在提示词中说出决策Effective HTML「肥制品肥上下文」工作法详解【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-htmlEffective HTML 是一个开源的 AI 代理技能Agent Skills集合教 AI 生成线框图、交互原型、实施计划和图表等自包含 HTML 制品。它的核心工作法是「肥制品 肥上下文」fat artifacts fat context提示词可以很薄但上下文要给足让 HTML 制品本身承载细节。本文带你快速掌握这套提示词工程方法新手也能照着写出可直接交付的 AI HTML 生成需求。什么是 Effective HTML一分钟看懂一句话概括它不是网页框架而是一本「AI 生成 HTML 制品」的实战手册 可安装的提示词技能。无需安装即可使用把它当作参考手册直接在提示词里引用其中的模式即可6 个可选技能覆盖从低保真线框图到高保真交互原型的完整保真度光谱每个制品都是单文件CSS/JS 内联、响应式、可键盘操作、无需构建步骤技能适用场景源码位置html综合路由报告、讲解页、落地页、混合制品skills/html/SKILL.mddesign-artifact视觉创意方向配色、版式、字体调性skills/design-artifact/SKILL.mdhtml-wireframe低保真线框图结构、层级、导航、流程skills/html-wireframe/SKILL.mdhtml-prototype可交互原型真实状态、键盘支持、响应式skills/html-prototype/SKILL.mdhtml-plan实施计划、路线图保留原始承诺可追溯skills/html-plan/SKILL.mdhtml-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），仅供参考
