Menu
批量生成多页面 HTML 原型，支持 10 种设计风格的产品经理快速原型生成工具
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | html-style-generator |
| description | 批量生成多页面 HTML 原型，支持 10 种设计风格的产品经理快速原型生成工具 |
批量生成多页面 HTML 原型，支持多种设计风格。
/html-style
无论选择什么风格，所有生成的 HTML 必须遵守以下规则：
https://images.unsplash.com/photo-{ID}?w={宽度}&q=80<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80" alt="科技产品">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
核心原则：页面空间不是被动容器，而是主动的设计语言。必须通过以下手法赋予页面动态张力：
不对称布局
元素叠压
position: absolute + z-index 制造前后层次感对角线流向
clip-path: polygon(...) 或 transform: skewY(-3deg)）打破水平分割留白与密度的刻意控制
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%); }
基本原则：
Animation、Component Styling、Effects、Hover States 等任何章节必须包含的动画类型：
-translate-y-2、shadow-lg）技术要求：
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 |
自检清单（生成前必须逐项检查）：
用户输入：文字描述或 @Markdown 文档
你的任务：
输出格式：
📋 理解你的需求！建议生成以下页面：
【页面规划】
1. 首页 (index.html) - 博客介绍、最新文章列表
2. 文章列表 (articles.html) - 所有文章、分类筛选、搜索
3. 文章详情 (article-detail.html) - 文章内容、评论、分享
4. 关于我 (about.html) - 个人介绍、联系方式
✅ 请确认：
- 这些页面够吗？需要增减吗？
- 回复"确认"继续，或告诉我调整内容
用户调整示例：
完成条件：用户回复"确认"
你的任务：
styles/ 目录下的所有 .md 文件输出格式：
🎨 请选择设计风格：
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 服务、开发者文档、控制台面板
请回复编号或风格名称：
输出格式：
📂 请选择输出目录：
1. 使用当前目录根路径
2. 指定其他目录
请回复 1 或输入完整路径：
处理逻辑：
你的任务： 在确定输出目录后，立即列出该目录下已有的 HTML 文件，并记录下来供后续使用。
执行方式：
使用 search_file 工具搜索输出目录下的所有 .html 文件。
输出示例：
📁 检查输出目录...
已有文件：
- index.html
- about.html
💡 注意：生成时会自动避开这些文件名，避免覆盖。
如果用户指定的目录不存在：
输出格式：
⚙️ 请选择生成策略：
1. 全部生成（一次性生成所有页面）
2. 逐个生成（每生成一个确认后再继续）
3. 选择生成（指定生成哪些页面）
请回复 1、2 或 3：
直接循环生成所有页面，每完成一个反馈进度。
执行流程：
🚀 开始批量生成...
[1/4] 生成首页 (index.html)...
✅ 已保存：d:/projects/blog-system/index.html
[2/4] 生成文章列表 (articles.html)...
✅ 已保存：d:/projects/blog-system/articles.html
...
✨ 全部完成！
生成一个，等待用户确认后再生成下一个。
执行流程：
🚀 开始逐个生成...
[1/4] 生成首页 (index.html)...
✅ 已保存：d:/projects/blog-system/index.html
💡 请查看效果，回复"继续"生成下一个，或告诉我调整意见
用户回复：
让用户指定生成哪些页面。
输出格式：
请选择要生成的页面（输入编号，多个用逗号分隔）：
1. 首页 (index.html)
2. 文章列表 (articles.html)
3. 文章详情 (article-detail.html)
4. 关于我 (about.html)
示例：1,3,4
或输入"all"生成全部
你的任务（对每个页面执行）：
读取风格模板
styles/{选中的风格}.mdstyles/Saas-style.md读取避坑清单
config/pitfalls.yaml你是前端专家和 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 文件并在浏览器中打开运行。
你直接生成 HTML 代码，不需要调用 API。
生成后，立即检查以下内容：
致命错误（必须修复）：
<!DOCTYPE html> 声明<meta charset="UTF-8"><html>, <head>, <body> 标签<title> 标签且不为空底层设计要求检查：
警告（建议修复）：
{}()"" 或 ''href="#"修复方式：
文件名重复检测：
在保存前，检查 {文件名} 是否与已存在的文件重复：
重命名规则：
原文件名: index.html → 新文件名: index-1.html
原文件名: about.html → 新文件名: about-1.html
原文件名: index.html → index-2.html（如果 index-1.html 也存在）
依此类推...
使用 create_file 工具直接保存：
文件路径：{输出目录}/{最终文件名}
文件内容：{生成的 HTML 代码}
保存后反馈：
✅ 已保存：{完整文件路径}
（自动重命名为 {最终文件名}）
全部生成完成后：
✨ 完成！生成结果：
📂 {输出目录}/
├── index.html ✅
├── articles.html ✅
├── article-detail.html ✅
└── about.html ✅
💡 提示：
- 在浏览器中打开查看效果
- 如需调整某个页面，直接告诉我
如有未生成的页面（逐个生成或选择生成模式）：
⚠️ 还有以下页面未生成：
- 注册页 (register.html)
- 设置页 (settings.html)
如需继续生成，回复"继续生成剩余页面"
config/pitfalls.yaml
生成 HTML 前，读取并融入 Prompt。
测试中发现问题时：
用户反馈："发现一个问题，xxx 页面有 xxx 问题"
你的处理：
config/pitfalls.yaml 的 known_issues 列表反馈给用户：
✅ 已修复！同时已将问题加入避坑清单：
- "{问题描述}"
下次生成时会自动避免。
encoding:
- "必须包含 <meta charset='UTF-8'> 声明"
- "禁止使用中文文件名"
html_structure:
- "必须是完整的 HTML5 文档"
- "必须包含 viewport meta 标签"
# ... 其他分类
known_issues: []
# 测试中发现的问题添加到这里
styles/ 目录下创建新的 .md 文件_template.md 的格式编写风格提示词