如何用Effective HTML选对保真度？线框图、Mockup、原型、图表与计划5类制品实战对比

如何用Effective HTML选对保真度线框图、Mockup、原型、图表与计划5类制品实战对比【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-htmlEffective HTML 是一套面向 AI Agent 的 HTML 制品技能集能把一句话的需求变成自包含、可直接打开的 HTML 文件——线框图、高保真 Mockup、可交互原型、图表和计划都在其能力范围内。它最重要的方法论不是画得多精美而是选对保真度fidelity粗糙的制品邀请结构讨论精致的制品邀请视觉讨论可运行的原型邀请行为讨论。本文带你按当下要做的决策快速匹配这 5 类 HTML 制品。核心原则选够用即可的最低保真度项目文档 choosing-fidelity.mdx 开篇就给出了一条黄金法则Choose the lowest fidelity that makes the next human decision visible.选择能让下一个人类决策清晰可见的最低保真度。保真度决定别人回答的是哪种问题——先想清楚评审需要看什么证据再决定制品做到多细制品类型解决什么问题邀请哪种评审对应技能线框图 Wireframe内容、层级、导航、流程结构评审html-wireframeMockup视觉层级、品牌、排版、密度视觉评审html-prototypemockup 模式原型 Prototype状态变化、反馈、校验、交互行为评审html-prototypeprototype 模式图表 Diagram架构、时序、状态、层级关系关系评审html-diagram计划 Plan顺序、里程碑、承诺保留执行评审html-plan一句话总结只在评审依赖新证据时才提高保真度而不是因为制品看起来没做完。线框图结构没定之前别谈视觉当开放问题是放什么、放哪里、怎么流时用线框图。它的视觉处理要刻意保持未完成——克制的灰阶配色、朴素边框、真实文案——目的是让评审者别把注意力花在颜色和装饰上。仓库里的发布准备示例examples/release-readiness/就用一个文件对比了三种真正不同的结构方向Decision first决策优先发布结论与检查项并排可见Evidence ledger证据台账高密度对比强调可审计Guided gate引导式关卡把决策变成分步评审 技能文档提醒只改 padding 或卡片顺序不算有意义的替代方案要探索不同的组织思路索引 vs 引导路径、分栏 vs 聚焦画布。详见 html-wireframe 技能 与文档 wireframes.mdx。Mockup结构稳定后先审视觉再谈交互结构一旦稳定开放问题变成视觉层级、品牌表达、密度与排版时就切换到 Mockup。Mockup 是高保真的静态制品——它可以很漂亮但不必假装每个控件都能点。在 html-prototype 技能 中Mockup 被定义为非交互保真模式与原型共用同一套内容结构——这样保真度提升时变化容易对比不会引入新的布局争议。可交互原型用行为回答这个流程到底好不好用当决策依赖行为——状态变化、输入反馈、校验失败、恢复路径、多步骤流程——静态图就答不上来了这时才上原型。好原型的三个要点来自 prototypes.mdx做最窄的可信流程只实现一条能代表产品决策的路径别为显得完整堆无关页面覆盖会影响判断的状态加载中、空内容、校验失败、可恢复错误、键盘焦点等——因为状态影响判断才实现而不是打勾式凑数守住产品边界原型要明确这里在演示什么、哪里只是示意不能假装后端已存在上述示例原型完整走通了查看失败的 iOS 冒烟测试 → 记录复跑通过 → 状态从 blocked 变为 ready的闭环并覆盖了加载、错误、成功、禁用等状态。图表关系复杂时先选对视觉模型图表的价值在于几何承载精确关系。第一步不是画图而是判断关系类型再选模型来自 diagrams.mdx顺序与交接重要 →时序图转换与条件重要 →状态模型归属与嵌套重要 →层级图信息在系统中流动 →流程图边界与依赖重要 →架构视图随时间变化重要 →时间线两个容易踩的坑把所有主题硬塞进从左到右的方框箭头以及用装饰性视觉差异制造信息量。技能文档 html-diagram/SKILL.md 强调定义一套小的视觉语法形状、线条、颜色各代表什么并保持一致标签要短而具体。计划Markdown 优先HTML 选择性使用5 类制品里计划是最反直觉的项目文档 plans.mdx 明说——计划通常更适合 Markdown。信息大多是线性的读者需要的是持久的顺序而不是一套视觉界面。只有出现下面这些场景HTML 才值得多花成本多个替代方案需要并排对比时间线存在有意义的重叠依赖关系需要交互浏览里程碑上挂着可展开的证据计划需要与图表、可运行示例同页评审用 HTML 做计划时html-plan 技能 有一条硬规则保留来源承诺区分给定的需求和自己的解读绝不编造不存在的产品能力来让计划显得完整。提高保真度前的 3 个自查问题 每次想把线框图升级成 Mockup、把 Mockup 升级成原型之前先问三个问题决策本身变了什么还是只是觉得不够好看多出来的保真度能提供什么新证据多余的精致会不会引来错误的反馈比如评审者开始纠结配色而结构问题还没解决三个问题都有实质答案再升级否则停在当前保真度。快速上手安装技能与查看示例把技能集安装到你的 Agent 中npx skills add plannotator/effective-html也可以只装单个技能如线框图npx skills add plannotator/effective-html --skill html-wireframe不安装也能直接用把仓库 clone 下来当作参考即可。建议按这个顺序读路由总纲skills/html/SKILL.md先判断该用哪类制品保真度决策site/content/docs/choosing-fidelity.mdx完整对照案例examples/release-readiness/ 里的 wireframe.html 与 prototype.html同一份产品简报从结构探索走到可交互原型旁边还附了 validation.md 验证记录线框/Mockup 对照site/public/examples/product-design/README.md总结用 Effective HTML 选保真度的心法只有三步读决策不读完成度 → 选最低够用的保真度 → 升级前先问新证据是什么。线框图定结构Mockup 定视觉原型定行为图表定关系计划则优先留在 Markdown。把制品的完成度和评审需要的证据对齐你和 AI Agent 的每一次讨论才会落在真正的问题上。【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-html创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考