应用介绍
让 Claude Code 或 Codex 讲一个系统架构、做一版界面方案，得到的往往是一大段文字，要么是一个样式花哨却不能交互的页面。Effective HTML 是一组专门教 AI 代理产出实用 HTML 成果物的技能，从低保真线框图到能真正点着用的交互原型，还有计划和架构图。
它的思路是把创意和可靠性分开：视觉风格跟着项目和受众走，不套固定模板；线框图故意保持粗糙，让人专注结构；原型只做一条可信的流程和它的各种状态。每个成果物都是单文件、响应式、可访问，并在浏览器里验证过。
html：通用入口，处理报告、讲解页、演示、落地页、小工具等混合需求，并分派给对应专项技能。
design-artifact：根据主题给出创意方向，不强加统一的视觉风格。
html-wireframe：低保真线框图，测试内容层级、导航、流程和响应式结构。
html-prototype：带真实状态、交互、键盘操作和响应式的可用原型。
html-plan：路线图、上线计划和实施步骤，保留原始约束不走样。
html-diagram：架构、时序、流程、状态、层级和时间线图，可交互高亮。
一条命令安装：npx skills add plannotator/effective-html，也可以作为 Claude Code 或 Codex 插件安装，或者直接当参考资料读。
它的思路是把创意和可靠性分开：视觉风格跟着项目和受众走，不套固定模板；线框图故意保持粗糙，让人专注结构；原型只做一条可信的流程和它的各种状态。每个成果物都是单文件、响应式、可访问，并在浏览器里验证过。
软件功能
html：通用入口，处理报告、讲解页、演示、落地页、小工具等混合需求，并分派给对应专项技能。
design-artifact：根据主题给出创意方向，不强加统一的视觉风格。
html-wireframe：低保真线框图，测试内容层级、导航、流程和响应式结构。
html-prototype：带真实状态、交互、键盘操作和响应式的可用原型。
html-plan：路线图、上线计划和实施步骤，保留原始约束不走样。
html-diagram：架构、时序、流程、状态、层级和时间线图，可交互高亮。
一条命令安装：npx skills add plannotator/effective-html，也可以作为 Claude Code 或 Codex 插件安装，或者直接当参考资料读。
