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），仅供参考
企业数字化 ERP 产品动态
相关推荐
气凝胶产业化实战指南：从超临界干燥到电池热失控抑制 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 5:19:39
MIPI CSI与DVP摄像头接口选型、信号完整性与调试实战指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 5:19:39
Android TV无线调试完整指南：ADB远程连接与问题排查 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 5:19:33
建设网站需要提前准备的条件一文搞懂 建设网站需要提前准备的条件一文搞懂 模板网站太丑，功能还卡壳，这是很多老板找我们建站时的第一句话。别急着骂供应商，很多时候不是他们不行，是你手里没牌。今天不聊虚的，直接拆解 建设网站需要提前准备的条件… · 2026/9/27 5:53:22
不懂代码怕被黑？一文搞懂谷歌官方建站服务安全坑 不懂代码怕被黑？一文搞懂谷歌官方建站服务安全坑 想做网站却不会写代码，是不是经常心里发虚？尤其是看到新闻里说某某官网被挂马、数据泄露，那种“会不会轮到我家网站”的焦虑感，简直让人睡不着觉。很多设计师或老板以为，只要用了 谷歌官方建站服务… · 2026/9/27 5:53:22
开发了一个GNSS软件接收机，大家觉得怎么样？ 一个 GNSS 软件接收机：Qt6 C20，把 GPS / 北斗 / Galileo 十种信号全部打通一个不依赖任何第三方 GNSS 库的离线软件接收机。21,000 行 C20 从捕获、跟踪、导航电文译码一路写到多系统联合定位，配上完整的 Qt6 图形界面和命令行批处理工具。十… · 2026/9/27 5:53:10
RTX 3080 20G 的 CUDA 兼容性 / 新驱动还能不能正常跑本地模型？ RTX 3080 20G 属于改显存版本，判断它能不能跑本地模型，关键不在显存大小，而在两件事：驱动是否认得出这张卡，以及驱动暴露的 CUDA 支持上限是否不低于框架编译时用的版本。多数情况下，只要 nvidia-smi 能稳定… · 2026/9/27 5:52:39
网络编程：UDP协议 一、是什么 UDP（User Datagram Protocol，用户数据报协议）是一种简单的、无连接的传输层协议，用于在网络中传输数据。 与 TCP 不同，UDP 不提供可靠性、顺序性和流量控制，但它具有低延迟和高效的特点… · 2026/9/27 5:52:15
做网站都需要买什么问题避坑指南与性能优化实战 做网站都需要买什么问题避坑指南与性能优化实战 找建站公司最怕什么？怕被忽悠多花冤枉钱，更怕花了钱做出来的网站打开像蜗牛，客户还没看内容就关了页面。很多老板问“做网站都需要买什么问题”，其实核心就是两件事：一是别买没用的服务，二是买对能保性能… · 2026/9/27 5:52:15
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
