网页模板审美

核心定位

本 skill 是一个 产品官网审美路由器 + 高约束 Prompt 生成器。

不要把“风格”和“模板”拆开分别选择。正确流程是：先理解用户的产品内容，再匹配一个完整的 template_style_pack，然后调用该包里的详细生成模板，输出最终网页生成 Prompt。

主要适用范围：

• 产品官网
• 产品发布落地页
• 品牌/产品展示页
• 高端概念产品页
• SaaS、AI、硬件、消费品、生活方式产品、创意产品官网

除非用户明确要求，不要扩展到后台仪表盘、数据报告、文档站或信息可视化报告。

参考文件

• 读取 references/content-understanding.md：把用户的产品想法或上游内容转成内容理解标签。
• 读取 references/reference-intake.md：当用户提供链接、截图、图片或现有网站参考时，用它拆解新的模板风格包。
• 读取 references/template-pack-library.md：匹配、存储和更新完整的模板风格包。
• 读取 references/prompt-generation-workflow.md：把选中的模板风格包转成最终高约束网页生成 Prompt。
• 读取 references/delivery-quality-rules.md：在生成网站前补齐图片、icon、交互、响应式和效果验收约束。
• 读取 references/reference-fidelity-audit.md：把参考站拆成字体、图片、动效、交互、可点击状态和页面状态矩阵，避免只做静态外观。
• 读取 references/color-variant-rules.md：在不破坏模板风格的前提下生成颜色变体和推荐色彩方案。
• 读取 references/priority-rubric.md：当用户意图、模板风格、可运行性、动效和装饰冲突时，用它裁决优先级。
• 读取 references/final-quality-checklist.md：生成 Prompt 或最终网站后，用它做完整验收。
• 读取 references/forbidden-rules.md：生成和建站时必须避开的全局禁止项。
• 读取 references/template-selection-report.md：每次匹配模板时说明为什么选、为什么没选相近模板、是否启用加深规则。
• 读取 references/screenshot-calibration-rules.md：当用户要求高强度 copy 或提供截图/录屏时，用它补齐桌面、移动端、菜单、列表、详情和 hover 状态。
• 读取 references/image-prompt-rules.md：把图片生成方向写细，统一奢侈品、餐饮、酒店、家具、游戏、硬科技、SaaS 等图片风格。
• 读取 references/template-coverage-audit.md：了解当前模板类型覆盖、质量评估和后续补充方向。

便携使用

本版本面向 SkillHub、OpenClaw 等后台展示环境，优先使用中文名称和中文说明。内容是平台无关的 Markdown 规则和参考库。在其他智能体运行环境里使用时，先加载本 SKILL.md，再按任务加载需要的参考文件：

• 生成产品官网并继续建站：读取 content-understanding.md、template-pack-library.md、prompt-generation-workflow.md、template-selection-report.md、priority-rubric.md、delivery-quality-rules.md、reference-fidelity-audit.md、color-variant-rules.md、image-prompt-rules.md、forbidden-rules.md、final-quality-checklist.md。
• 添加新的参考网站/图片：读取 reference-intake.md、reference-fidelity-audit.md、template-pack-library.md。
• 根据 Prompt 继续生成网站：把选中模板包里的 generation_prompt_template 当作下一步建站 brief，保留其中所有交互、响应式、语言、素材准确性和质量验收约束。

最终呈现的网站默认必须中文主导，除非用户明确要求其他语言。英文可以用于图片生成提示词、动效术语、实现库名、模型/产品名和少量视觉标签，但不能让最终网页变成英文主导。

快速测试 Prompt

用网页模板审美，根据“一个高端中式香氛品牌，核心产品是四季线香与空间香氛，目标用户是设计师和高端生活方式用户”，匹配模板包，生成颜色变体，然后直接继续生成最终网站。

用网页模板审美，把 https://example.com 这个参考站拆成一个 template_style_pack，要求包含子页面模式、交互、响应式和 generation_prompt_template。

用网页模板审美，为一个 AI 知识管理工具生成中文主导官网，并自动匹配最适合的模板包，保留动效、交互、移动端、图片和 icon 约束。

工作流

1. 判断任务模式

使用以下模式之一：

• create_prompt_from_product：用户提供产品/品牌需求，希望得到官网 Prompt 或最终网站。
• extract_pack_from_reference：用户提供链接/图片，希望提取风格和模板。
• create_pack_from_reference：用户提供链接/图片，希望新增可复用模板风格包。
• match_pack_and_build：用户提供产品内容，希望 skill 自动匹配模板包并生成/建站。
• refine_existing_pack：用户希望让已有模板包更具体、更强约束。

如果用户还在讨论系统逻辑，先讨论流程，不要急着改文件。

2. 理解产品内容

读取 references/content-understanding.md，生成内部内容标签：

product_category:
audience:
site_goal:
content_density:
brand_temperament:
media_requirement:
interaction_level:
conversion_mode:
must_include:
avoid:

这一步要轻量。大多数内容标签由模型根据产品、用户、目标和内容自然推断，不需要复杂大库。

3. 匹配一个完整模板风格包

读取 references/template-pack-library.md。

模板风格包是一个不可拆分的完整单元，包含：

• 匹配条件
• 页面结构
• 视觉 DNA
• 交互规则
• 还原约束
• 禁忌项
• 详细生成 Prompt 模板

只选择一个包。除非用户明确要求混合，否则不要拿 A 包的视觉和 B 包的结构临时拼接。

4. 拆解或存储新模板包

当用户发送链接或图片作为参考：

1. 检查参考站点/图片。
2. 读取 references/reference-fidelity-audit.md，建立复刻审计矩阵。
3. 提取页面结构、字体系统、图片风格、动效、交互行为、可点击状态和严格还原规则。
4. 创建一个 template_style_pack 条目。
5. 加入详细 generation_prompt_template。
6. 存入 references/template-pack-library.md。

模板包必须足够具体，能生成用户示例那种详细网页 Prompt，而不是只有几条风格标签。

5. 生成颜色变体

读取 references/color-variant-rules.md。

在选中模板包后，先给出 2-4 个不破坏模板风格的颜色变体，并标注推荐方案。颜色变体只能改变色彩 token、背景明度、强调色和图片色调，不能改变模板的版式、交互、内容结构和气质。

如果用户明确想自己选色，先输出颜色变体让用户选择；否则默认使用推荐方案继续生成网站。

6. 组合最终 Prompt

读取 references/prompt-generation-workflow.md、references/priority-rubric.md、references/delivery-quality-rules.md 和 references/forbidden-rules.md。

最终 Prompt 必须包含：

• 产品/品牌名称和定位
• 明确页面章节
• 首屏行为和视觉细节
• 视觉系统、材质、图片规则、字体、色彩、留白
• 交互和动效等级
• 还原约束
• 禁忌项
• 真实品牌/产品的素材准确性规则
• 当用户要实现网站时，明确要求最终交付可运行网站
• 图片、icon、动效、响应式和浏览器验收规则
• 参考复刻审计矩阵：字体、图片、可点击元素、页面状态、hover/focus/active 状态
• 规则优先级、全局禁止项和最终质量验收清单

7. 继续建站或交付 Prompt

默认行为不是“输出 Prompt 后结束”。如果用户要求的是网页、网站、落地页、官网、页面实现、生成最终网站，必须把生成的 Prompt 作为下一步建站 brief 继续交给执行智能体/当前智能体实现。

只有当用户明确说“只要 Prompt”“不要建站”“只输出提示词”时，才停在 Prompt 输出。

建站后必须读取 references/final-quality-checklist.md，尽量做浏览器或截图验证，重点检查图片是否缺失、icon 是否统一、交互是否真的实现、移动端是否可用。

所有看起来像链接、按钮、标签、卡片、筛选项、菜单项、轮播箭头、拖拽提示、产品条目、图片热区的元素，都必须有真实可点击/可交互状态。不能只画出标签却不能点击。

输出格式

普通产品官网请求：

content_tags:
  product_category:
  audience:
  site_goal:
  content_density:
  brand_temperament:
  media_requirement:
  interaction_level:
selected_template_pack:
why_this_pack:
color_variants:
recommended_color_variant:
final_generation_prompt: |
  ...
handoff_instruction: |
  使用 final_generation_prompt 继续生成最终网站，不要停在 Prompt 输出。

参考采集请求：

template_pack_id:
source:
match_profile:
page_structure:
visual_dna:
interaction_rules:
reconstruction_constraints:
forbidden_patterns:
generation_prompt_template: |
  ...