在提示词中说出决策：Effective HTML「肥制品+肥上下文」工作法详解
【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-html
Effective HTML 是一个开源的 AI 代理技能（Agent Skills）集合，教 AI 生成线框图、交互原型、实施计划和图表等自包含 HTML 制品。它的核心工作法是「肥制品 + 肥上下文」（fat artifacts + fat context）：提示词可以很薄，但上下文要给足，让 HTML 制品本身承载细节。本文带你快速掌握这套提示词工程方法，新手也能照着写出可直接交付的 AI HTML 生成需求。
什么是 Effective HTML？一分钟看懂
一句话概括：它不是网页框架，而是一本「AI 生成 HTML 制品」的实战手册 + 可安装的提示词技能。
- 无需安装即可使用：把它当作参考手册，直接在提示词里引用其中的模式即可
- 6 个可选技能：覆盖从低保真线框图到高保真交互原型的完整保真度光谱
- 每个制品都是单文件：CSS/JS 内联、响应式、可键盘操作、无需构建步骤
| 技能 | 适用场景 | 源码位置 |
|---|---|---|
html | 综合路由：报告、讲解页、落地页、混合制品 | skills/html/SKILL.md |
design-artifact | 视觉创意方向（配色、版式、字体调性） | skills/design-artifact/SKILL.md |
html-wireframe | 低保真线框图：结构、层级、导航、流程 | skills/html-wireframe/SKILL.md |
html-prototype | 可交互原型：真实状态、键盘支持、响应式 | skills/html-prototype/SKILL.md |
html-plan | 实施计划、路线图：保留原始承诺可追溯 | skills/html-plan/SKILL.md |
html-diagram | 架构图、时序图、流程图、状态图 | skills/html-diagram/SKILL.md |
核心心法：肥制品 + 肥上下文 🧠
官方文档 site/content/docs/index.mdx 把这套方法浓缩为一句话：
给代理真实的简报、源材料、约束、示例和已接受的决策（肥上下文）；让制品通过真实内容、标注、状态和交互承载工作细节（肥制品）。提示词和技能可以保持很薄。
三个角色分工非常清晰：
| 角色 | 职责 | 应该「肥」还是「薄」 |
|---|---|---|
| 提示词 | 指出决策是什么、上下文在哪（指向制品、仓库、文件夹） | 薄 ✅ |
| 上下文 | 真实简报、源文件、约束、已定决策 | 肥 ✅ |
| HTML 制品 | 用空间、对比、状态、交互展示细节，供人直接评审 | 肥 ✅ |
这解决了 AI 协作的一个普遍痛点：代理能写出远超人类阅读量的文字，而人最难评审的恰恰是一堵文字墙。HTML 能把层级、备选方案、状态和关系直接摆出来，所有人看到的是同一个可以指、可以问、可以改的东西。
五步工作循环：让每次生成都指向一个决策
项目指南给出的工作循环（见 site/content/docs/index.mdx），建议新手每一步都对号入座：
- 说出决策：这个制品要支撑人的哪个判断？
- 选形式与保真度：让该决策可见，且不引入新干扰
- 做一个自包含制品：真实内容，拒绝占位符文案
- 真尺寸检查：桌面宽屏 + 手机窄屏都过一遍
- 只评审当前阶段的边界：结构、行为、约束
- 需要时才升保真度：下一个决策确实需要新证据时再升级
关键洞察来自 site/content/docs/why-html.mdx：把细节放进制品，把决策放进提示词。
如何选择保真度：AI 生成线框图还是原型？📐
官方原则（site/content/docs/choosing-fidelity.mdx）：选择能让当前人工决策可见的最低保真度。粗糙的制品邀请结构批评，精美的制品邀请视觉批评，可运行的制品邀请行为批评——保真度决定了评审者回答什么问题。
| 当前开放问题 | 选什么 | 效果 |
|---|---|---|
| 什么内容该出现？放哪里？ | 线框图 | 只讨论结构，不被颜色带偏 |
| 应该长什么样、什么感觉？ | 高保真 Mockup | 讨论品牌、密度、排版 |
| 这个流程行为对吗？ | 可交互原型 | 直接操作控件验证状态流转 |
| 这些部分什么关系？ | 图表 | 架构图/时序图/状态图 |
| 顺序如何保留原始承诺？ | 计划（Markdown 常更合适） | 可追溯、可验证 |
线框图 vs 高保真 Mockup 的效果对比，看同一决策（成员角色变更评审）的两个阶段就一目了然：
低保真线框图——刻意"未完成"，评审注意力集中在结构上：
结构定稿后升级为高保真 Mockup——同样的决策，现在可以讨论品牌表达与视觉层级：
⚠️ 升级保真度前先问三个问题：决策发生了什么变化？新增的保真度提供什么新证据？多余的打磨会意外引来什么反馈？
提示词怎么写：把决策说清楚 ✍️
结合各技能文件的路由逻辑（skills/html/SKILL.md 的 "Route the request first"），一条「肥上下文」提示词的骨架长这样：
【决策】我需要在 X 之前判断：角色变更操作是否应该直接显示在成员行旁？ 【上下文】产品背景见 docs/brief.md；现有界面截图见 assets/current.png； 已接受的决定：移动端保留底部固定操作区 【形式】做一个低保真 HTML 线框图，对比 2~3 个结构方向 【约束】单文件、响应式、真实文案（不要 lorem ipsum）、 图片用标注占位符 【交付】返回文件路径 + 每个方向的取舍说明注意提示词里没有配色方案、字体栈、间距数值——这些由制品自己承载。html技能的路由规则会自动把请求分发给最合适的专业技能：结构未定 → 线框图；要可操作 → 原型；讲关系 → 图表。
实例解读：release-readiness 示例 🚀
仓库自带一个完整示例 examples/release-readiness/，展示「先线框图、后原型」的完整升级路径：
这张线框图顶部就有两处体现「在提示词中说出决策」：左上角虚线框注明STRUCTURE REVIEW · BEHAVIOR AND VISUAL DESIGN DEFERRED（结构评审，行为与视觉设计推迟），右上角写着Decision first（决策优先）——评审者一眼就知道该看什么、不该纠结什么。
当结构被确认后，同一决策升级为可操作原型，4/4 检查项通过后可直接「Release to production」：
想看源文件可直接打开 examples/release-readiness/wireframe.html 和 examples/release-readiness/prototype.html。
新手上手清单 ✅
- 不装任何东西先跑通：让 AI 按上面骨架写一条提示词，生成第一个 HTML 线框图
- 上下文指路，不灌水：提示词只写"材料在哪个文件/文件夹"，而不是把内容全贴进去
- 保真度匹配决策：结构没定就别要配色，行为没验证就别叫产品
- 要求真实内容：提示词中明确"禁止占位符文案和无效控件"
- 固定验证动作：桌面 + 手机两种宽度都看一遍，检查溢出和键盘焦点
- 模式重复了再装技能：
npx skills add plannotator/effective-html，让团队共享同一套默认值
小结
Effective HTML 的「肥制品 + 肥上下文」本质上是一种提示词工程范式：提示词负责说清决策，上下文负责提供证据，HTML 制品负责呈现一切。它不替代 Markdown，而是在"空间、对比、状态、交互"能降低评审成本时补位。掌握这套工作法后，你和 AI 的协作将从"读长篇回复"变成"打开一个可以指、可以点、可以改的页面"。
【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-html
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
