html-style-generator

name	html-style-generator
description	批量生成多页面 HTML 原型，支持 10 种设计风格的产品经理快速原型生成工具

HTML Prototype Style Generator

功能描述

批量生成多页面 HTML 原型，支持多种设计风格。

触发命令

/html-style

使用场景

• 创建产品原型
• 批量生成 UI 页面
• 快速搭建演示系统
• 根据需求文档生成完整页面集

底层设计要求（必须遵守）

无论选择什么风格，所有生成的 HTML 必须遵守以下规则：

1. 语言要求

• 所有输出必须使用简体中文
• 包括：代码内注释、页面文本、按钮文字、提示信息等

2. 设计视角

• 以设计师的视角输出美观且用户友好的 UI/UX
• 注重细节、留白、视觉层次
• 避免程序员思维，追求设计美感

3. 页面互联

• HTML 之间可以整合或跳转到其他页面
• 导航菜单链接到各页面
• 相关操作有合理的页面跳转

4. 字体排版

• 选用独特且富有表现力的字体
• 禁止使用：Inter、Roboto、Arial 等常见字体
• 推荐搭配：展示性字体（标题）+ 精致正文字体
• 示例：
  • 标题：思源宋体、站酷高端黑、庞门正道标题体
  • 正文：思源黑体、Noto Sans SC

5. 色彩与主题

• 通过 CSS 变量构建统一的美学风格
• 采用主色调搭配鲜明点缀色
• 避免单调的黑白灰，要有视觉焦点

6. 图片资源

• 使用 Unsplash 图片：https://images.unsplash.com/photo-{ID}?w={宽度}&q=80
• 根据页面主题选择相关的 Unsplash 图片
• 示例：

  <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80" alt="科技产品">
  

7. 技术栈

• HTML5：使用语义化标签（header、nav、main、section、article、footer 等）
• CSS：原生 CSS（CSS 变量、Flexbox、Grid、动画）
• Font Awesome：使用 Font Awesome 图标（通过 CDN）

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  

• Tailwind CSS（可选）：如果风格模板中明确使用 Tailwind，则引入

  <script src="https://cdn.tailwindcss.com"></script>
  

• JavaScript：仅用于基础交互（菜单切换、滚动效果等），保持轻量
• ECharts（当需求涉及可视化图表时）：使用 Apache ECharts 绘制图表

  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  

  • 适用场景：数据仪表盘、统计图表、趋势分析、排行榜等
  • 配置图表主题色与页面主色调保持一致
  • 确保图表具有响应式适配

8. 空间构成（必须遵守）

核心原则：页面空间不是被动容器，而是主动的设计语言。必须通过以下手法赋予页面动态张力：

1. 不对称布局

   • 避免左右完全对称的"双栏镜像"结构
   • 主次内容采用不等宽比例（如 3:2、5:3、7:5）
   • Hero 区域文字与视觉元素不居中对齐，形成视觉引力

2. 元素叠压

   • 关键元素（卡片、图片、徽章、数字）适度超出容器边界或相互叠压
   • 利用 position: absolute + z-index 制造前后层次感
   • 浮动小卡片、数据标注、装饰图形跨越父容器边缘放置

3. 对角线流向

   • 页面视觉动线从左上引导至右下（或右上至左下）
   • 使用倾斜背景色块（clip-path: polygon(...) 或 transform: skewY(-3deg)）打破水平分割
   • 大标题、图形、CTA 按钮沿对角线方向排布形成张力

4. 留白与密度的刻意控制

   • 充裕留白：展示型页面（官网、着陆页）每个区块的 padding 不低于 80px 0
   • 精心密集：数据型区域（统计、表格、列表）允许紧凑，但须保持内在节奏感
   • 禁止：整页均匀平铺、所有区块同等间距——必须有节奏的松紧对比

实现技巧：

/* 不对称英雄区 */
.hero-grid { grid-template-columns: 7fr 5fr; }

/* 元素叠压 */
.float-badge { position: absolute; top: -20px; right: -24px; z-index: 2; }

/* 对角线色块 */
.section-diagonal { clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%); }

---

9. 动画与微交互（强制执行）

基本原则：

• 必须实现风格模板中描述的所有动画效果（无论出现在哪个章节）
• 禁止以"保持简洁"为由省略模板明确要求的视觉效果
• 每种风格的独特动画是其核心 DNA，不可简化或替换
• 动画描述可能出现在：Animation、Component Styling、Effects、Hover States 等任何章节

必须包含的动画类型：

1. 悬停态（hover）：transform + shadow/color 组合变化
   • 卡片/按钮必须有明确的 hover 反馈
   • 参数必须匹配模板（如 -translate-y-2、shadow-lg）
2. 激活态（active/pressed）：物理按压效果或等效反馈
   • 按钮点击必须有按下态（inset 阴影、scale 缩小等）
   • 禁止只有 hover 态而缺少 active 态
3. 环境装饰动画：背景光斑、浮动元素、渐变流动等氛围营造
   • 如模板描述了 background blobs、floating animation，必须实现
   • 这些是风格特色的关键，不是"可选项"
4. 微交互细节：focus 态、loading 态、过渡动画
   • 输入框 focus 必须有 accent ring 或等效视觉反馈
   • 所有 transition 必须有精确参数（duration、easing）

技术要求：

• 优先纯 CSS：@keyframes、transition、transform、animation
• 不排斥必要 JS：如模板明确要求 JavaScript 动画（如 Material Ripple），则必须实现
• 精确参数：所有动画必须有明确的 duration、easing、delay 值
• 性能优化：使用 will-change、避免 layout thrashing

风格特有动画清单（必须实现对应风格的关键动画）：

风格	关键动画特征	示例
Minimal SaaS	蓝色渐变流动、内容渐入 staggered	@keyframes gradient-flow
Modern Dark	氛围光效呼吸、光泽扫过	gloss-sweep、ambient-glow
Hand-Drawn Sketch	手绘线条抖动、纸张纹理浮动	wobbly-borders、paper-float
Corporate Trust	等距 3D 变换、彩色阴影深度	rotate-x/y、colored-shadow
Flat Design	微妙缩放、色彩过渡	scale-hover、color-morph
Industrial	金属光泽扫过、机械式卡顿	metal-sheen、step-easing
Material	涟漪扩散、层级升降	ripple-effect（可 JS）
Neumorphism	嵌套深度变化、物理按压	inset/extruded 组合、press-down
Newsprint	油墨扩散、印刷错位	ink-spread、misprint-shift
Tencent Cloud	腾讯蓝渐变、科技感光效	tech-gradient、glow-effect

自检清单（生成前必须逐项检查）：

• □ 是否实现了模板中列出的所有独特动画？（无论在哪一章）
• □ 按钮/卡片是否有完整的 default/hover/active 三态？
• □ 装饰性元素（光斑、渐变、特殊效果）是否到位？
• □ 动画参数是否与模板描述一致？（duration、easing、transform 值）
• □ focus 态是否有明确视觉反馈？（accent ring、shadow 等）
• □ 是否避免了过度简化？（如将动态渐变改为静态背景）

---

完整工作流程

阶段 1：需求分析与页面规划

用户输入：文字描述或 @Markdown 文档

你的任务：

1. 仔细阅读用户的需求描述或 @ 的文档
2. 分析需求，智能推断需要哪些页面
3. 输出页面列表

输出格式：

📋 理解你的需求！建议生成以下页面：

【页面规划】
1. 首页 (index.html) - 博客介绍、最新文章列表
2. 文章列表 (articles.html) - 所有文章、分类筛选、搜索
3. 文章详情 (article-detail.html) - 文章内容、评论、分享
4. 关于我 (about.html) - 个人介绍、联系方式

✅ 请确认：
- 这些页面够吗？需要增减吗？
- 回复"确认"继续，或告诉我调整内容

用户调整示例：

• 增加页面："再加一个标签页"
• 删除页面："第 4 个不要了"
• 修改功能："文章列表加上标签云功能"

完成条件：用户回复"确认"

---

阶段 2：选择设计风格

你的任务：

1. 读取 styles/ 目录下的所有 .md 文件
2. 列出可用风格

输出格式：

🎨 请选择设计风格：

1. Minimal SaaS (极简 SaaS 风格)
   - 特点：简洁现代、蓝色渐变、响应式布局
   - 适用：SaaS 产品、工具类应用、后台管理系统、在线服务

2. Modern Dark (现代深色风格)
   - 特点：深色系、氛围光效、精致交互（类 Linear/Vercel）
   - 适用：开发者工具、AI 产品、音乐/视频平台、高端科技产品

3. Hand-Drawn Sketch (手绘草图风格)
   - 特点：手写字体、不规则边框、纸质纹理、创意手绘效果
   - 适用：手账文具、创意礼物、手工艺品、亲子教育、艺术周边

4. Corporate Trust (企业信任风格)
   - 特点：专业稳重、蓝色系、金融/企业官网适用
   - 适用：银行保险、企业官网、政务服务、医疗健康、教育培训

5. Flat Design (扁平化风格)
   - 特点：简洁平面、明亮色彩、现代扁平设计
   - 适用：电商商城、时尚服饰、快消品、生活服务、移动应用

6. Industrial (工业风格)
   - 特点：粗犷质感、金属色调、制造业/硬件适用
   - 适用：机械设备、汽车配件、五金工具、建材家居、工业用品

7. Material (材料设计风格)
   - 特点：Google Material Design、卡片层级、阴影动画
   - 适用：移动应用、新闻资讯、社交媒体、工具类应用、CRM 系统

8. Neumorphism (新拟态风格)
   - 特点：柔和阴影、凸起凹陷、极简立体效果
   - 适用：智能家居、控制面板、健康监测、仪表盘、可穿戴设备

9. Newsprint (报纸印刷风格)
   - 特点：复古印刷、报纸排版、怀旧质感
   - 适用：新闻媒体、杂志期刊、博客写作、书店文具，文化创意

10. Tencent Cloud (腾讯云风格)
    - 特点：腾讯蓝、科技可信、高效清晰、企业级设计
    - 适用：云计算产品、企业官网、SaaS 服务、开发者文档、控制台面板

请回复编号或风格名称：

---

阶段 3：选择输出目录

输出格式：

📂 请选择输出目录：

1. 使用当前目录根路径
2. 指定其他目录

请回复 1 或输入完整路径：

处理逻辑：

• 选择 1：使用当前项目根路径，自动创建项目子目录
• 选择 2：使用用户输入的路径
• 目录不存在时，使用工具自动创建

3.5 检查已有文件（重要！）

你的任务： 在确定输出目录后，立即列出该目录下已有的 HTML 文件，并记录下来供后续使用。

执行方式： 使用 search_file 工具搜索输出目录下的所有 .html 文件。

输出示例：

📁 检查输出目录...

已有文件：
- index.html
- about.html

💡 注意：生成时会自动避开这些文件名，避免覆盖。

如果用户指定的目录不存在：

• 跳过此步骤，后续直接生成

---

阶段 4：选择生成策略

输出格式：

⚙️ 请选择生成策略：

1. 全部生成（一次性生成所有页面）
2. 逐个生成（每生成一个确认后再继续）
3. 选择生成（指定生成哪些页面）

请回复 1、2 或 3：

策略 1：全部生成

直接循环生成所有页面，每完成一个反馈进度。

执行流程：

🚀 开始批量生成...

[1/4] 生成首页 (index.html)...
✅ 已保存：d:/projects/blog-system/index.html

[2/4] 生成文章列表 (articles.html)...
✅ 已保存：d:/projects/blog-system/articles.html

...

✨ 全部完成！

策略 2：逐个生成

生成一个，等待用户确认后再生成下一个。

执行流程：

🚀 开始逐个生成...

[1/4] 生成首页 (index.html)...
✅ 已保存：d:/projects/blog-system/index.html

💡 请查看效果，回复"继续"生成下一个，或告诉我调整意见

用户回复：

• "继续" → 生成下一个
• "调整 xxx" → 修复后重新生成当前页面
• "跳过" → 跳过当前页面，生成下一个

策略 3：选择生成

让用户指定生成哪些页面。

输出格式：

请选择要生成的页面（输入编号，多个用逗号分隔）：

1. 首页 (index.html)
2. 文章列表 (articles.html)
3. 文章详情 (article-detail.html)
4. 关于我 (about.html)

示例：1,3,4
或输入"all"生成全部

---

阶段 5：生成 HTML 页面

你的任务（对每个页面执行）：

5.1 读取参考文件

1. 读取风格模板

   • 路径：styles/{选中的风格}.md
   • 如：styles/Saas-style.md

2. 读取避坑清单

   • 路径：config/pitfalls.yaml
   • 提取所有规则，融入 Prompt

5.2 组合 Prompt

你是前端专家和 UI/UX 设计师，请根据以下需求生成高质量的 HTML 页面。

【项目背景】
{用户的完整需求描述}

【当前页面】
页面名称：{page.name}
文件名：{page.filename}
功能要求：{page.description}

【设计风格要求】
{读取的完整风格模板内容}

【底层设计要求 - 必须遵守】
1. 语言：所有输出必须使用简体中文（包括代码注释、页面文本、按钮文字）
2. 设计视角：以设计师的视角输出美观且用户友好的 UI/UX
3. 页面互联：HTML 之间可以整合或跳转到其他页面，提供完整的导航
4. 字体排版：
   - 选用独特且富有表现力的字体
   - 禁止使用 Inter、Roboto、Arial 等常见字体
   - 推荐：展示性字体（标题）+ 精致正文字体
   - 示例：思源宋体/站酷高端黑（标题）+ 思源黑体（正文）
5. 色彩与主题：通过 CSS 变量构建统一美学，主色调搭配鲜明点缀色
6. 动画效果（强制执行）：
   - **必须实现**风格模板中描述的**所有动画效果**（无论出现在哪个章节）
   - 动画描述可能散落在：`Animation`、`Component Styling`、`Effects`、`Buttons`、`Cards` 等任何位置
   - **禁止省略**模板明确要求的视觉效果（如光斑、渐变文字、特殊阴影）
   - **完整三态**：所有交互元素必须有 default/hover/active 状态
   - **精确参数**：transition/animation 必须有明确的 duration、easing 值
   - **装饰元素**：背景光斑、浮动动画等氛围元素不是"可选项"，必须实现
   - 如果风格模板中没有描述动画效果，则不强制实现

7. 图片资源：
   - 使用 Unsplash 图片：`https://images.unsplash.com/photo-{ID}?w={宽度}&q=80`
   - 根据页面主题选择相关的、高质量的图片

8. 技术栈：
   - HTML5 语义化标签
   - 原生 CSS（CSS 变量、Flexbox、Grid、动画）
   - Font Awesome 图标（CDN 引入）
   - Tailwind CSS（仅当风格模板明确要求时使用）
   - 轻量 JavaScript（仅用于基础交互；如模板要求特殊动画如 Ripple，可使用 JS）
   - ECharts（当需求涉及可视化图表时：数据仪表盘、统计图表、趋势分析等）

【动画自检清单】
生成完成后，请逐项检查：
□ 是否实现了模板中列出的所有独特动画？
□ 按钮/卡片是否有完整的 default/hover/active 三态？
□ 装饰性元素（光斑、渐变、特殊效果）是否到位？
□ 动画参数是否与模板描述一致？（duration、easing、transform 值）
□ focus 态是否有明确视觉反馈？（accent ring、shadow 等）
□ 是否避免了过度简化？（如将动态渐变改为静态背景）

【避坑清单】

【输出要求】
1. 生成完整的 HTML5 文档（<!DOCTYPE html>）
2. 必须包含 UTF-8 编码声明：<meta charset="UTF-8">
3. 必须包含 viewport meta 标签（移动端适配）
4. 必须是响应式布局，适配手机和桌面端
5. 代码结构清晰，有适当的注释（使用简体中文注释）
6. 使用现代 CSS（如 Flexbox、Grid）
7. 确保所有交互元素可点击、可访问
8. 引入 Font Awesome 图标（CDN）
9. 使用 Unsplash 图片替换占位符或 emoji
10. 如需基础交互（轮播、菜单等），添加轻量 JavaScript
11. 如需图表展示，引入 ECharts 并配置与页面风格一致的图表主题

请直接输出完整的 HTML 代码，不要包含任何解释性文字。代码应该可以直接保存为 .html 文件并在浏览器中打开运行。

5.3 生成 HTML

你直接生成 HTML 代码，不需要调用 API。

5.4 质量自检

生成后，立即检查以下内容：

致命错误（必须修复）：

• 有 <!DOCTYPE html> 声明
• 有 <meta charset="UTF-8">
• 有 viewport meta 标签
• 有 <html>, <head>, <body> 标签
• 有 <title> 标签且不为空
• 无乱码字符（如 锟斤拷）
• 所有文本是简体中文（无英文界面元素）

底层设计要求检查：

• 使用了独特的字体（非 Inter/Roboto/Arial）
• 有 CSS 变量定义的色彩主题
• 页面间有导航链接
• （动画效果按风格模板要求实现，如有）

警告（建议修复）：

• 大括号匹配 {}
• 小括号匹配 ()
• 引号匹配 "" 或 ''
• 无空链接 href="#"

修复方式：

• 如有致命错误，立即修正后再保存
• 如不满足底层设计要求，补充完善
• 如有警告，记录并告知用户

5.5 保存文件

文件名重复检测：

在保存前，检查 {文件名} 是否与已存在的文件重复：

1. 如果文件名不重复：直接保存
2. 如果文件名已重复：自动重命名

重命名规则：

原文件名: index.html → 新文件名: index-1.html
原文件名: about.html → 新文件名: about-1.html
原文件名: index.html → index-2.html（如果 index-1.html 也存在）
依此类推...

使用 create_file 工具直接保存：

文件路径：{输出目录}/{最终文件名}
文件内容：{生成的 HTML 代码}

保存后反馈：

✅ 已保存：{完整文件路径}
（自动重命名为 {最终文件名}）

---

阶段 6：完成反馈

全部生成完成后：

✨ 完成！生成结果：

📂 {输出目录}/
├── index.html ✅
├── articles.html ✅
├── article-detail.html ✅
└── about.html ✅

💡 提示：
- 在浏览器中打开查看效果
- 如需调整某个页面，直接告诉我

如有未生成的页面（逐个生成或选择生成模式）：

⚠️ 还有以下页面未生成：
- 注册页 (register.html)
- 设置页 (settings.html)

如需继续生成，回复"继续生成剩余页面"

---

避坑清单管理

避坑清单位置

config/pitfalls.yaml

读取方式

生成 HTML 前，读取并融入 Prompt。

添加新问题

测试中发现问题时：

1. 用户反馈："发现一个问题，xxx 页面有 xxx 问题"

2. 你的处理：

   • 立即修复当前问题
   • 将问题描述添加到 config/pitfalls.yaml 的 known_issues 列表

3. 反馈给用户：

   ✅ 已修复！同时已将问题加入避坑清单：
      - "{问题描述}"
   
   下次生成时会自动避免。
   

避坑清单格式

encoding:
  - "必须包含 <meta charset='UTF-8'> 声明"
  - "禁止使用中文文件名"

html_structure:
  - "必须是完整的 HTML5 文档"
  - "必须包含 viewport meta 标签"

# ... 其他分类

known_issues: []
# 测试中发现的问题添加到这里

---

添加新风格

1. 在 styles/ 目录下创建新的 .md 文件
2. 参考 _template.md 的格式编写风格提示词
3. 重启 Claude Code 即可使用

---

版本历史

• v1.0.0 (2026-03-13): 初始版本
  • 六阶段工作流程
  • 支持三种生成策略
  • 内置避坑清单机制