5分钟上手Effective HTML免安装、npx与Claude Code插件3种启动方式【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-htmlEffective HTML 是一套面向 AI 编码代理Coding Agent的开源技能包它能让你的 AI 助手把需求直接变成自包含的 HTML 制品低保真线框图、可交互原型、实施计划、架构图和数据图表。无论你是想让 AI 先画一版页面结构还是生成一份能点击操作的发布评审原型这套技能包都能帮你用一条提示词搞定。本文将带你用3 种启动方式免安装直接引用、npx 一键安装、Claude Code 插件在 5 分钟内跑起来。Effective HTML 是什么AI 代理的 HTML 制品工具箱Effective HTML 由 Plannotator 团队维护核心理念是HTML 几乎可以可视化任何东西而且往往比一大段文字更清晰。它包含 6 个可独立使用、也可组合使用的技能Skill技能适用场景html综合入口报告、讲解页、落地页、工具页并自动路由到更专门的技能design-artifact为任意 HTML 制品提供贴合主题的视觉创意方向html-wireframe低保真线框图测试信息层级、导航、任务流和响应式结构html-prototype高保真 Mockup 或可交互原型真实状态、键盘可达、响应式html-plan计划、路线图、实施顺序保留原文承诺、可追溯html-diagram架构、时序、流程、状态、层级、时间线等图表所有制品都有一个共同承诺单个 .html 文件、内联 CSS/JS、无需构建步骤、浏览器直接打开就能用。技能定义文件都在仓库中例如 skills/html-wireframe/SKILL.md、skills/html-prototype/SKILL.md。方式一免安装启动——直接 Clone 仓库当参考库Effective HTML 最大的特点是不装任何东西也能用。官方建议把仓库先当参考手册再当可安装技能包见 README.md。只需 3 步克隆仓库到你的电脑git clone https://gitcode.com/gh_mirrors/ef/effective-html在你的 AI 对话中告诉代理技能位置例如请阅读 effective-html/skills/html-wireframe/SKILL.md 并按其中的契约工作。提出需求例如帮我给发布就绪检查页画 2 版低保真线框图。代理会按 skills/html/SKILL.md 中的路由规则选择最合适的技能并把详细指引按需加载——不需要的参考文档不会干扰上下文。适合想先体验效果、不想引入安装依赖的团队。方式二npx 一键安装——最常用的启动方式想让技能在每次对话中自动可用用 skills 工具链一条命令装好npx skills add plannotator/effective-html安装后代理即可把 6 个技能当作可复用工作流调用。只想要其中某几个可以单独管理# 查看技能清单 npx skills add plannotator/effective-html --list # 只安装指定技能 npx skills add plannotator/effective-html --skill html-wireframe npx skills add plannotator/effective-html --skill html-prototype技能分组与清单定义在 skills.sh.json 中包含html、design-artifact、html-wireframe、html-prototype、html-diagram、html-plan六个技能。npx 方式无需任何全局安装临时项目也能秒装秒用。方式三Claude Code 插件安装——深度集成启动如果你日常主力是 Claude Code推荐走插件通道两步完成/plugin marketplace add plannotator/effective-html /plugin plugin install plannotator-effective-htmleffective-html插件安装后Claude Code 会自动发现技能目录如 skills/html-plan/SKILL.md你在对话里说帮我出一版上线计划它就会按html-plan技能的可追溯契约来产出。 同样支持 Codex 插件通道codex plugin marketplace add plannotator/effective-html后再codex plugin add plannotator-effective-htmleffective-html。三种方式怎么选一张表看懂启动方式适合人群命令/操作优势免安装引用尝鲜者、CI 环境、临时任务git clone后让代理读技能文件零依赖随用随走npx 安装大多数开发者npx skills add plannotator/effective-html一条命令、可按技能粒度安装Claude Code 插件Claude Code / Codex 用户/plugin marketplace add/plugin install深度集成自动路由技能上手之后一条提示词生成专业制品安装完成后你可以直接这样用给这个功能画 2 版布局不同的线框图→ 触发html-wireframe产出刻意未完成感的低保真页面让评审聚焦结构而非配色把线框图变成可点击的交互原型要有加载、空、错误状态→ 触发html-prototype产出键盘可达、响应式的完整流程把这份发布检查清单做成计划页→ 触发html-plan保留原文承诺与可追溯性画一张系统架构图→ 触发html-diagram选择与关系匹配的视觉模型。想要完整可运行的成品效果可以打开仓库里的示例 examples/release-readiness/prototype.html 查看发布就绪原型的实现视觉概念参考 site/public/brand/working-atlas.png 所示的 Working Atlas 风格。常见问题 FAQ问必须安装全部 6 个技能吗不用。html是综合入口缺少的专门技能时它会继续工作你也可用--skill参数只装需要的技能。问生成的 HTML 需要联网或构建吗不需要。每个制品都是自包含的单文件 HTML内联 CSS/JS本地双击打开即可无需任何构建工具或外部服务。问线框图为什么故意不好看这是设计契约低保真阶段刻意避开品牌色、渐变和阴影让团队把注意力放在信息层级和任务流上详见 skills/html-wireframe/SKILL.md。问如何本地部署配套文档站点站点源码在 site/README.md 中说明进入site/目录执行pnpm install pnpm dev即可本地预览。5 分钟3 种方式你的 AI 代理从今天起就能交付专业级的 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 产品动态
相关推荐
大模型API聚合平台深度剖析:选型前必须弄清的五个关键问题 大模型API聚合平台越来越多,选型时的信息差却没变小。各家大模型API在协议、鉴权、流式格式上互不兼容,需要中间架一层聚合网关统一输出标准接口,同时兼顾计费统计、限流与密钥安全分发等企业需求。在反复对比主流平台之后,本文把选型前必须弄清的五个关键问题梳理成文,第一个推… · 2026/9/26 15:52:09
卫星系统攻击面拆解与仿真实验实战 1. 认知归零：卫星黑客攻击到底在攻击什么1.1 一张系统图看懂卫星的四大攻击面“卫星黑客攻击”这六个字，放在朋友圈里是科幻片，放在安全圈里却是一个相当具体的工程问题。我做了几年卫星通信与网络安全的交叉研究，每次和圈外朋友聊… · 2026/9/26 15:51:56
AI硬件神器：小白也能实现创意实物化 1. 这不是玩具，是创意落地的物理接口“这个AI硬件神器太绝了 小白也能把创意做成实物”——这句话最近在创客圈、设计工作室甚至高校工坊里反复刷屏。我第一次听到是在深圳华强北一家专注教育硬件的小店，店主把一块巴掌大的板子往桌上一放，接… · 2026/9/26 16:27:37
FluentTweaker功能树详解：如何用检查-勾选-应用三步完成Windows去臃肿 FluentTweaker功能树详解：如何用检查-勾选-应用三步完成Windows去臃肿 【免费下载链接】FluentTweaker Windows Slop Remover 项目地址: https://gitcode.com/gh_mirrors/wi/FluentTweaker
FluentTweaker（原名 Winslop）是一款基于 Win… · 2026/9/26 16:27:37
气泡浮力与流体动力学：Canvas 模拟水下气泡上升与破裂动效 气泡浮力与流体动力学：Canvas 模拟水下气泡上升与破裂动效在现代 Web 互动营销、水下科幻主题大屏以及先锋液体微交互设计中，“晶莹剔透的水下气泡（Underwater Bubbles）升腾与表面张力破裂动效” 是一种能极大赋予界面生机、空灵与… · 2026/9/26 16:27:37
液体封装材料深度解析：先进封装、Underfill与国产替代机遇 干了这么多年半导体材料相关的调研，我越来越觉得，液体封装材料是个被低估的赛道。圈内提到封装材料，第一反应通常是颗粒状的EMC（环氧塑封料），但真正到高可靠、高密度、大尺寸芯片的场景里，液态体… · 2026/9/26 16:27:37
串口分线器实战：一路物理串口如何变多路虚拟串口 简介：Serial Port Splitter 是一款面向串口通信场景的系统工具，适合设备调试人员和工业控制用户，用于解决物理串口数量不足及多程序争用串口数据的问题。软件通过虚拟串口技术创建多个虚拟端口，让不同应用同时分享同一物理串口&am… · 2026/9/26 16:27:31
数据库课后习题答案别硬背：当测试用例集刷，效率翻倍 简介：万常选版《数据库原理与设计》课后习题答案资源，覆盖第2至6章及第9章，适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件，含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21
OpenClaw 替代品？Hermes Agent 踩坑实录：macOS 飞书接入 TaoToken 配置 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40
向下兼容与向上兼容：接口设计中的兼容性策略与工程实践 一次版本升级事故，是很多团队绕不过去的坎。线上环境里，服务端明明已经上线了新版接口，老的移动端还在照着旧文档传参数。请求一到网关，校验直接拒绝，用户操作失败，客服群炸了锅，开发群里开始互… · 2026/9/26 0:00:46
