10分钟用Effective HTML生成线框图：为什么它必须“故意未完成“？
10分钟用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 编程助手的技能集合其中最实用的技能之一就是快速生成自包含的 HTML 线框图wireframe一条提示词几分钟内就能得到一个可以直接在浏览器打开、可交互切换布局方向的低保真线框图文件用来验证信息层级、导航结构、任务流和响应式布局——而不是急着做漂亮的设计稿。这篇文章带你 10 分钟上手这套工作流并回答一个反直觉的问题为什么 Effective HTML 生成的线框图必须看起来故意未完成先认识这个工具线框图技能在哪里Effective HTML 把做 HTML 产物拆成了 6 个技能通用的html、设计方向design-artifact、线框图html-wireframe、原型html-prototype、计划html-plan、图表html-diagram。本文聚焦线框图技能它的完整规则写在 skills/html-wireframe/SKILL.md而线框图的核心理念在官方文档 site/content/docs/wireframes.mdx 中有专门一页线框图在视觉完成度让改动看起来很贵之前先测试界面的组织方式。Wireframes test the organization of an interface before visual finish makes changes feel expensive.一句话先验证放什么、怎么排再讨论好不好看。3步快速生成 HTML 线框图第1步安装线框图技能如果希望技能被你的 AI 助手复用只需一条命令npx skills add plannotator/effective-html --skill html-wireframe不安装也完全可以用——把 skills/html-wireframe/SKILL.md 当参考文档直接喂给助手即可。第2步写清要验证的问题技能要求你先明确三件事而不是直接说帮我画个界面用户与任务谁在用、要完成什么事审查范围哪个页面或哪段流程在被评审结构问题这张线框图要帮你回答什么例如证据放左侧还是右侧。参考现成的案例提示词examples/release-readiness/brief.md 就是一份标准的产品简报定义了用户、必备信息和预期行为。第3步检查交付物技能约定交付物是一个自包含的 .html 文件CSS/JS 内联无需构建工具、无需联网并且布局不稳时会给出2–3 个真正不同的结构方向用一个可键盘操作的切换器放在同一个文件里方便直接对比桌面端和移动端宽度都要可用不出现意外的横向滚动只加有评审价值的行为能点击的链接、能切换的标签页不做动画、模拟 API 等过度设计。下图就是这个技能生成的真实产出之一一个制品对比线框图可以在 Split / Stack / Focusnotes 三种结构间一键切换全部灰阶、朴素边框——结构清晰但毫不精致。官方完整示例见 examples/release-readiness/wireframe.html配合说明文档 examples/release-readiness/README.md。为什么线框图必须故意未完成这是整个技能里最有设计感的一条规则原文写在 skills/html-wireframe/SKILL.md 的Keep the artifact intentionally unfinished一节核心做法包括克制的灰阶配色、系统字体、朴素边框和简单色块避免品牌色、渐变、阴影、插画、装饰性图片和精致组件样式图片和富媒体用带文字的占位块表示注释只用来暴露假设、未决问题或无法直接演示的行为。为什么要这么做理由有四个1. 让评审者聚焦结构而不是审美。如果线框图做得很漂亮评审会变成这个蓝色好不好这个圆角太大——讨论从该放什么漂移到了看起来如何。灰阶和朴素边框把视觉变量全部锁死剩下的争议只能围绕结构本身。2. 防止改起来很贵的心理陷阱。视觉上越接近成品大家越不舍得推翻重来。故意未完成的观感在传递一个信号现在改结构成本很低请大胆否定我。3. 区分有意的不完整与做不好。注意技能原文的限定线框图仍然可以构图讲究——Intentional unfinishedness is different from careless spacing, illegible type, or broken responsive behavior故意的未完成 ≠ 糟糕的间距、不可读的字或坏掉的响应式。顺序、层级和响应式必须可靠否则没人能基于它做判断。4. 明确哪些决定被推迟了。技能要求交付时说明哪些视觉决定故意留给了后续的 mockup 或原型。这避免了线框图阶段的决策越界也让下一阶段的工作范围清晰。下面这张图来自发布就绪release-readiness示例的决策优先方向注意它的标题、标签、数据都是真实文案Can Atlas Mobile 4.8 ship?、iOS smoke test · FAIL而非 lorem ipsum——技能明确要求低保真不是用匿名方框糊弄的借口当文案影响布局时必须用真实标签。同一个文件里还有第二个结构方向Evidence ledger走的是高密度对比和可审计路线。两个方向不是卡片换个位置而是不同的组织假设——这正是技能反复强调的只改 padding 和卡片顺序不算有意义的备选方案。自问清单你的线框图通过了吗官方文档 site/content/docs/wireframes.mdx 给出了 5 个评审问题可以拿来自检几秒钟内能否看懂这个页面是干什么的主要动作是否明显又没有脱离上下文孤立存在层级在窄屏宽度下是否依然成立还能删掉什么加细节之前先想删减几个备选方案是否真的在验证不同的结构假设线框图之后从结构到原型的自然衔接故意未完成不代表永远不精致。Effective HTML 的完整路径是wireframe 定结构 → design-artifact html-prototype 做视觉方向。同一个对比页的成品版本mockup长这样——同样的结构加上了品牌化视觉系统但核心布局与线框图阶段的决定保持一致这组线框图 成品的配对案例完整说明见 site/public/examples/product-design/README.md共 3 组、6 个自包含 HTML 文件可以逐个打开对照研究。另外示例目录还提供了一个从线框图走到可交互原型的完整旅程——examples/release-readiness/ 下的 wireframe.html 验证信息怎么组织prototype.html 则实现iOS 冒烟测试失败 → 记录重跑 → 发布状态从 blocked 变 ready这条最小可信流程两者的验证记录见 examples/release-readiness/validation.md。总结线框图的正确打开方式要点一句话保真度灰阶、系统字体、朴素边框——视觉变量全部锁死内容真实文案和代表性内容拒绝 lorem ipsum备选方案2–3 个真正不同的结构方向同一文件内切换对比行为只加有评审价值的点击/切换不做动画和模拟 API交付自包含 .html桌面 移动端都可用边界明确列出推迟到 mockup 阶段的视觉决定记住 Effective HTML 的设计哲学故意未完成不是偷懒而是一种让结构评审保持诚实的手段。当每个像素都还没被赋予品牌含义时你讨论的才真正是产品本身。【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-html创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考