结构化博客首页设计生成
结构化博客首页设计生成
结构化博客首页设计生成 结构化博客首页设计生成 Modified November 26, 2025 Code block Markdown 图像处理 ：抽象几何图形，轻微3D效果，图表和数据可视化精美 核心元素 ：代码展示美观，产品功能直观演示，精准的动效 4. Spotify 风格特点 视觉语言 ：大胆现代，音乐视觉化，活力四射 色彩方案 ：黑色背景，鲜绿品牌色，高对比度 排版特点 ：粗体无衬线字体，不同大小文字对比强烈，常使用全大写标题 布局偏好 ：不规则网格，模块可水平滚动，内容密度适中 交互设计 ：音乐相关元素有动态效果，悬停状态变化明显 图像处理 ：艺术家图片处理带情绪色调，专辑封面原样展示 核心元素 ：内容发现功能，个性化推荐，情绪化设计 5. BBC 风格特点 视觉语言 ：权威清晰，信息条理分明，新闻导向 色彩方案 ：BBC红为主色，大量黑白内容，分类有色彩编码 排版特点 ：BBC Reith字体家族，清晰标题层级，适中行距增强可读性 布局偏好 ：模块化网格，重要新闻突出，清晰分类区域 交互设计 ：简洁功能性，最少化动效，快速加载优先 图像处理 ：新闻图片真实呈现，视频缩略图清晰，信息图表简洁 核心元素 ：内容分类清晰，时效性强调，全球视角 6. Mailchimp 风格特点 视觉语言 ：友好专业，有趣不失正式，个性鲜明 色彩方案 ：黄色主色调，柔和辅助色，温暖色调 排版特点 ：Cooper Light等特色字体，轻松活泼的标题，可读性强的正文 布局偏好 ：不对称布局，有趣的视觉节奏，引导视线流动 交互设计 ：微妙的动画效果，互动元素友好响应，表单设计简洁 图像处理 ：手绘插图风格，卡通吉祥物，简化的概念图示 核心元素 ：幽默插图，简化复杂概念，友好的用户引导 7. Notion 风格特点 视觉语言 ：极简实用，笔记本美学，功能性设计 色彩方案 ：黑白为主，极少量柔和强调色，高对比度 排版特点 ：无衬线字体，变量字重，宽松行距，块状内容结构 布局偏好 ：模块化设计，可折叠内容，适应性网格 交互设计 ：功能性动效，折叠/展开内容平滑，拖拽操作 图像处理 ：简约线条插图，低饱和度图像，功能性截图 核心元素 ：内容块概念，极简界面，工具属性强 8. Squarespace 风格特点 视觉语言 ：高端摄影展，艺术品陈列，极致视觉体验 色彩方案 ：黑白对比强烈，偶尔点缀单一强调色，高饱和度图像 排版特点 ：高级无衬线字体，宽松字间距，大胆使用超大标题 布局偏好 ：全屏分区，大胆使用负空间，垂直流动感 交互设计 ：平滑滚动过渡，图片优雅加载，微妙视差效果 图像处理 ：专业摄影质感，画廊式展示，精心策划的视觉序列 核心元素 ：视觉优先设计，模板展示，创意人群定位 9. Medium 风格特点 视觉语言 ：内容为王，极简阅读体验，文学期刊感 色彩方案 ：纯白背景，黑色文字，极少量绿色品牌点缀 排版特点 ：衬线字体标题，无衬线正文，优化阅读的行宽与行距 布局偏好 ：单栏内容，宽边距，专注于长文阅读 交互设计 ：阅读进度指示，简洁的分享和评论功能 图像处理 ：配图支持文章，宽屏特色图，简约的作者头像 核心元素 ：内容可读性优先，估计阅读时间，精选系统 10. National Geographic 风格特点 视觉语言 ：震撼视觉内容，探索精神，权威科学感 色彩方案 ：标志性黄色边框，深色背景衬托图片，自然色调 排版特点 ：严肃的衬线字体，层次分明的标题系统，引人入胜的引言 布局偏好 ：大幅图片主导，文字融入图像，沉浸式体验 交互设计 ：故事化内容流，多媒体整合，章节式导航 图像处理 ：世界级摄影作品，全景展示，细节特写并重 核心元素 ：视觉叙事，自然科学主题，探索发现精神 V2 Code block Markdown 专业博客首页设计师 Prompt 你是一名专业的网页设计师和前端开发专家，擅长设计吸引人的博客首页。请根据提供的网站布局，设计一个 美观、现代、易读 的中文博客首页，参考 Medium、Liner、RaycastAI、Notion 等知名内容平台的设计美学。 首页设计目标 第一印象： 创造强烈的视觉第一印象，立即传达博客的主题和价值。 内容展示： 优雅地展示推荐文章和最新内容，吸引用户点击阅读。 清晰导航： 提供直观的导航系统，帮助用户轻松找到感兴趣的内容。 品牌识别： 通过设计元素建立"向阳乔木"的品牌识别度。 首页设计参考 Medium首页： 简约大气的内容卡片，清晰的分类，突出的特色文章。 RaycastAI首页： 现代简约的UI，清晰的信息架构，适当的空间分配。 Notion博客： 模块化的内容布局，优雅的排版，舒适的阅读体验。 Substack首页： 突出最新内容，简洁的订阅入口，作者品牌展示。 首页关键元素设计 视觉设计（重点优化） 创建富有美感且专业的配色方案，确保前景和背景有足够的对比度 深色模式下特别注意文字与背景的对比度，保证可读性 为不同的内容区块使用微妙的背景色差异，增强层次感 确保所有交互元素（按钮、链接等）有明显的视觉反馈 自由选择合适的主色调，创建专业且现代的视觉效果 导航设计 设计清晰直观的主导航，确保在所有设备上都易于使用 移动端导航需要完善的展开/收起逻辑，避免用户操作困难 二维码弹窗需适配不同设备，在移动端考虑使用模态框而非悬浮显示 分类下拉菜单需要明确的视觉提示和平滑过渡 确保导航项目有足够的点击区域和明确的激活状态 深色/浅色模式切换按钮需要明确的视觉反馈和状态指示 Hero区域 设计简洁有力的标语和副标题，清晰传达博客定位 考虑添加简单的视觉元素或背景，增强吸引力 确保在各种设备上都有良好的展示效果 使用渐变背景增加视觉层次感，但不要过于花哨 压缩Hero区域高度，使其更加紧凑 添加微妙的背景动画或微动效，提升视觉吸引力 推荐文章区域 设计视觉吸引力强的文章轮播/展示组件 每篇文章展示标题、简短描述和高质量图片 分类标签设计要简洁，不要过于抢眼，避免通栏显示 确保整个卡片区域可点击，提升用户体验 轮播图需要固定图片的宽高比例，保持一致的视觉效果 文章列表区域 设计清晰的文章卡片， 整个卡片区域都可点击跳转到文章详情 有图片的文章展示精美的配图，无图文章保持简洁美观 创建视觉层次，引导用户浏览 为卡片添加微妙的悬停效果，提示可点击性 侧边栏 设计简洁的"最新文章"列表，缩略图+标题 创建易于浏览的分类和标签导航 保持侧边栏轻量，避免与主要内容竞争注意力 使用卡片式设计，与主内容区形成视觉呼应 页面布局 使用响应式网格系统，确保在所有设备上的最佳展示 合理分配空间，主要内容区域占据更多比例 使用适当的留白创造呼吸感，避免页面拥挤 确保各区块之间有明确的视觉分隔 技术规范 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript。 Font Awesome: https://lf6 cdn tos.bytecdntp.com/cdn/expire 100 M/font awesome/6.0.0/css/all.min.css Tailwind CSS: https://lf3 cdn tos.bytecdntp.com/cdn/expire 1 M/tailwindcss/2.2.19/tailwind.min.css 非中文字体: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap 实现完整的深色/浅色模式切换功能，默认跟随系统设置，并允许用户手动切换。 确保深色模式切换彻底，所有元素都有明确的深色样式 背景色、文字颜色、边框、阴影等所有元素都需要有对应的深色模式样式 特别注意深色模式下的颜色对比度，确保文本清晰可读 代码结构清晰、语义化，包含适当的注释，便于转换为React组件。 实现完整的响应式，必须在所有设备上（手机、平板、桌面）完美展示。 考虑添加适当的微交互和过渡动效，提升用户体验，但不过度使用。 优化页面加载速度，确保图片和资源高效加载。 导航组件需要特别注意可访问性，确保键盘导航和屏幕阅读器支持。 移动端导航需要实现完善的展开/收起动画和交互逻辑。 二维码显示需要考虑不同设备的交互方式（悬停/点击）。 特别注意事项 网站标题使用纯文本，应用精美字体，不要添加任何图标 确保使用有效的图片URL，可以使用以下Unsplash图片链接： https://images.unsplash.com/photo 1620712943543 bcc4688e7485 https://images.unsplash.com/photo 1655720828018 edd2daec9349 https://images.unsplash.com/photo 1655635949212 1d8f4f103ea1 https://images.unsplash.com/photo 1620641788421 7a1c342ea42e https://images.unsplash.com/photo 1677442135068 6f2e8a18c5b4 引导关注和打赏的提示语不要超过15个字 轮播图中的标签设计要简洁，不要过于抢眼，避免通栏显示 确保所有文章卡片整体可点击，而不仅仅是标题或"阅读更多"链接 文章卡片在悬停时应有明显的视觉反馈，提示用户可点击 确保深色模式下所有文本有足够的对比度，特别是灰色文本 所有交互元素（按钮、链接等）在不同状态下（默认、悬停、激活）有明确的视觉区分 配色方案可以自由发挥，但必须保证良好的可读性和专业感 轮播图需要固定图片的宽高展示，保持统一的视觉效果 底部的联系和打赏直接展示二维码图片，顶部导航栏使用图标，点击后显示模态框 Hero区域需要压缩高度，并添加微妙的动画效果或背景动画 整体设计要更加精致，注重细节和视觉平衡 输出要求 1. 直接输出完整的HTML网页，后续会交给AI让它写成React组件，你需要考虑这点需求。 2. 严格使用"网站布局和内容"中的布局和内容要求生成。 网站布局和内容 Header（重点优化） 文字Logo：向阳乔木 使用黑色，有质感的中文衬线体 导航菜单（需优化交互和响应式表现） 首页:/ 分类:/categories AI工具:/categories/tools ChatGPT:/categories/tools/chatgpt Midjourney:/categories/tools/midjourney Claude:/categories/tools/claude AI教程:/categories/tutorial 新手入门:/categories/tutorial/beginner 进阶技巧:/categories/tutorial/advanced Prompt:/categories/prompt 文本提示词:/categories/prompt/text 图像提示词:/categories/prompt/image 微信打赏icon： 在移动端点击显示模态框，桌面端可以悬停显示 添加引导语："支持创作"（不超过15字） 微信联系icon： 在移动端点击显示模态框，桌面端可以悬停显示 添加引导语："联系我"（不超过15字） 深色/浅色模式切换按钮需要使用fontawesome中的月亮和太阳图标，浅色模式显示月亮，深色模式显示太阳 Hero Block 背景添加微妙的动画效果或背景动画 V1 Code block Markdown 专业博客首页设计师 Prompt 你是一名专业的网页设计师和前端开发专家，擅长设计吸引人的博客首页。请根据提供的网站布局，设计一个 美观、现代、易读 的中文博客首页，参考 Medium、Liner、RaycastAI、Notion 等知名内容平台的设计美学。 首页设计目标 第一印象： 创造强烈的视觉第一印象，立即传达博客的主题和价值。 内容展示： 优雅地展示推荐文章和最新内容，吸引用户点击阅读。 清晰导航： 提供直观的导航系统，帮助用户轻松找到感兴趣的内容。 品牌识别： 通过设计元素建立"向阳乔木"的品牌识别度。 首页设计参考 Medium首页： 简约大气的内容卡片，清晰的分类，突出的特色文章。 RaycastAI首页： 现代简约的UI，清晰的信息架构，适当的空间分配。 Notion博客： 模块化的内容布局，优雅的排版，舒适的阅读体验。 Substack首页： 突出最新内容，简洁的订阅入口，作者品牌展示。 首页关键元素设计 导航设计（重点优化） 设计清晰直观的主导航，确保在所有设备上都易于使用 移动端导航需要完善的展开/收起逻辑，避免用户操作困难 二维码弹窗需适配不同设备，在移动端考虑使用模态框而非悬浮显示 分类下拉菜单需要明确的视觉提示和平滑过渡 确保导航项目有足够的点击区域和明确的激活状态 深色/浅色模式切换按钮需要明确的视觉反馈 Hero区域 设计简洁有力的标语和副标题，清晰传达博客定位 考虑添加简单的视觉元素或背景，增强吸引力 确保在各种设备上都有良好的展示效果 推荐文章区域 设计视觉吸引力强的文章轮播/展示组件 每篇文章展示标题、简短描述和高质量图片 考虑添加分类标签和阅读时间估计 文章列表区域 设计清晰的文章卡片，包含标题、摘要、发布日期 有图片的文章展示精美的配图，无图文章保持简洁美观 创建视觉层次，引导用户浏览 侧边栏 设计简洁的"最新文章"列表，突出标题 创建易于浏览的分类和标签导航 保持侧边栏轻量，避免与主要内容竞争注意力 页面布局 使用响应式网格系统，确保在所有设备上的最佳展示 合理分配空间，主要内容区域占据更多比例 使用适当的留白创造呼吸感，避免页面拥挤 技术规范 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript。 Font Awesome: https://lf6 cdn tos.bytecdntp.com/cdn/expire 100 M/font awesome/6.0.0/css/all.min.css Tailwind CSS: https://lf3 cdn tos.bytecdntp.com/cdn/expire 1 M/tailwindcss/2.2.19/tailwind.min.css 非中文字体: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap 实现完整的深色/浅色模式切换功能，默认跟随系统设置，并允许用户手动切换。 代码结构清晰、语义化，包含适当的注释，便于转换为React组件。 实现完整的响应式，必须在所有设备上（手机、平板、桌面）完美展示。 考虑添加适当的微交互和过渡动效，提升用户体验，但不过度使用。 优化页面加载速度，确保图片和资源高效加载。 导航组件需要特别注意可访问性，确保键盘导航和屏幕阅读器支持。 移动端导航需要实现完善的展开/收起动画和交互逻辑。 二维码显示需要考虑不同设备的交互方式（悬停/点击）。 输出要求 1. 直接输出完整的HTML网页，后续会交给AI让它写成React组件，你需要考虑这点需求。 2. 严格使用"网站布局和内容"中的布局和内容要求生成。 网站布局和内容 Header（重点优化） 文字Logo：向阳乔木 导航菜单（需优化交互和响应式表现） 首页:/ 分类:/categories AI工具:/categories/tools AI教程:/categories/tutorial Prompt:/categories/prompt 微信打赏icon： 在移动端点击显示模态框，桌面端可以悬停显示 微信联系icon： 在移动端点击显示模态框，桌面端可以悬停显示 深色/浅色模式切换按钮需要明确的视觉反馈和状态指示 Hero Block Line1：向阳乔木个人网站 补充风格 🎡 近期活动推荐 音频模型的Seedance2.0时刻来了！ 在火山引擎Force大会上，字节发布了最新的「豆包音频生成模型 Seed Audio 1.0」，它首次实现声音参考复刻，同时能根据你的描述，全要素直出你想要的任何声音。 只需一句话描述，可以直接生成有情绪、有停顿、有笑声，有背景音乐/音效的一整段多角色对白。 V2 V1 补充风格 🎡 近期活动推荐 音频模型的Seedance2.0时刻来了！ 在火山引擎Force大会上，字节发布了最新的「豆包音频生成模型 Seed Audio 1.0」，它首次实现声音参考复刻，同时能根据你的描述，全要素直出你想要的任何声音。 只需一句话描述，可以直接生成有情绪、有停顿、有笑声，有背景音乐/音效的一整段多角色对白。 🎡 近期活动推荐 音频模型的Seedance2.0时刻来了！ 在火山引擎Force大会上，字节发布了最新的「豆包音频生成模型 Seed Audio 1.0」，它首次实现声音参考复刻，同时能根据你的描述，全要素直出你想要的任何声音。 只需一句话描述，可以直接生成有情绪、有停顿、有笑声，有背景音乐/音效的一整段多角色对白。 🎡 近期活动推荐 近期活动推荐 音频模型的Seedance2.0时刻来了！ 在火山引擎Force大会上，字节发布了最新的「豆包音频生成模型 Seed Audio 1.0」，它首次实现声音参考复刻，同时能根据你的描述，全要素直出你想要的任何声音。 只需一句话描述，可以直接生成有情绪、有停顿、有笑声，有背景音乐/音效的一整段多角色对白。 我们已经在内测玩了几天，非常上头。知识库整理了「豆包音频生成模型1.0使用教程」 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎁 现在体验还有福利： 👉 第一步：进方舟体验中心，直接开整 https://ark.volcengine.com/region:cn beijing/experience/voice?model=doubao seed audio 1 0 👉 第二步：参与问卷调研，有机会获得2000分钟额度（限量10个名额)，玩到爽 https://bytedance.larkoffice.com/share/base/form/shrcn2DdkTW8zJKn6vV30lnyHvb ⏰ 7月30日开奖，名额和额度有限，先到先得 效果样式 演示网址： 波普风格：https://www.32kw.com/view/4c8cf44 大胆现代：https://www.32kw.com/view/7ce0f35 Longreads https://www.32kw.com/view/4deefd9 构成主义风格 https://www.32kw.com/view/c228e72 Paris Review网站 https://www.32kw.com/view/e081ffe Aeon 风格 https://www.32kw.com/view/78f0899 优雅复古风格 https://www.32kw.com/view/24ed305 日式极简 https://www.32kw.com/view/413bcb9 Notion风格 https://www.32kw.com/view/b99931f Apple风格 https://www.32kw.com/view/5afafc5 V3 (支持风格配置版) 可选29种风格 10种相对正常的阅读网站风格 10个有些炫酷的个性网站 10个知名网站设计风格