今天在 GitHub Trending 上看到一个有意思的项目：Effective HTML，它提供了一套系统化的 AI 技能，帮助开发者用 HTML 快速构建从线框图到可交互原型的各类可视化工件。
一、项目概述
Effective HTML 由 Plannotator 团队开发，是一个专注于创建"有用、自包含 HTML 工件"的技能集合。它的核心理念是：HTML 可以可视化几乎所有内容，往往比大段文字更清晰。项目提供六个可选技能，覆盖从低保真线框图到架构图的多种场景：
| 技能 | 用途 |
|---|---|
html | 通用 HTML 请求、报告、演示页、落地页等 |
design-artifact | 为任意 HTML 工件提供创意方向 |
html-wireframe | 低保真布局设计，测试内容层级和导航流程 |
html-prototype | 可工作原型，含真实状态、交互、键盘支持 |
html-plan | 计划、路线图、实施方案 |
html-diagram | 架构图、流程图、时序图、状态图等 |
项目灵感来自 Thariq Shihipar 的文章《The unreasonable effectiveness of HTML》，核心理念是将创意自由度与可靠性分离：创意方向来自对话和项目背景，而技能提供可复用的生成流程。
二、技术原理
核心设计理念
Effective HTML 的技术哲学是"胖工件 + 胖上下文"：
- 单个自包含文件：所有 HTML 工件都是单个
.html文件，无外部依赖，可直接在浏览器中打开 - 响应式 + 可访问性：每个工件都内置响应式设计和可访问性支持
- 渐进式保真度：线框图故意保持未完成状态，让评审者聚焦结构；原型实现一个可信流程及其相关状态
技能路由机制
html 技能作为入口，负责路由到专业技能：
用户请求 → html 技能（路由层）
↓
┌──────┼──────┐
↓ ↓ ↓
wireframe prototype diagram ...
这种设计让每个技能保持独立可用，同时避免重复实现。
架构图技能实现
以 html-diagram 为例，它会根据关系类型选择合适的可视化模型：
- 架构图：组件 + 依赖箭头
- 时序图：参与者 + 时间线 + 消息
- 流程图：节点 + 决策分支
- 状态图：状态节点 + 转换边
所有图表都用纯 HTML + CSS + JavaScript 渲染，无需 Mermaid、PlantUML 等外部工具。
三、安装与快速开始
环境要求
- Node.js 18+（用于
npx） - 或 Claude Code / Codex 插件环境
安装方式
方式一：整体安装
npx skills add plannotator/effective-html
方式二：按需安装单个技能
# 列出所有可用技能
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
方式三：Claude Code 插件
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
最简使用示例
安装后，直接向 AI 描述需求：
"帮我创建一个登录页面的线框图"
"生成一个微服务架构图"
"做一个可交互的购物车原型"
AI 会调用对应技能生成单个 HTML 文件。
四、使用方法与实战
场景一：低保真线框图
线框图故意保持"未完成"风格，让评审者聚焦结构和流程：
用户请求：
"为一个博客平台设计线框图，包含：首页、文章列表、文章详情、作者页"
AI 输出：
单个 HTML 文件，展示四个页面的布局结构，用灰框和占位符表示内容区域
设计要点：
- 不使用真实图片和详细样式
- 标注内容层级和导航流程
- 支持响应式（移动端/桌面端切换）
场景二：可交互原型
原型实现一个完整用户流程及其状态：
用户请求：
"创建一个购物车原型，支持：添加商品、修改数量、删除、结算"
AI 输出：
可交互 HTML 文件，包含：
- 商品列表（点击添加到购物车）
- 购物车侧边栏（实时更新数量和总价）
- 结算按钮（触发表单验证）
- 键盘导航支持（Tab + Enter）
技术实现：
- 状态管理：使用 JavaScript 对象存储购物车数据
- 响应式更新：DOM 操作同步界面
- 可访问性：ARIA 标签 + 键盘事件监听
场景三：架构图
生成系统架构的可视化表示：
用户请求：
"为我的微服务系统画一个架构图，包含：API Gateway、User Service、Order Service、Payment Service、数据库"
AI 输出：
HTML 文件，展示：
- 五个组件节点（带图标）
- 服务间调用关系（箭头）
- 数据库连接（虚线）
- 悬停显示服务详情
进阶用法：design-artifact 技能
当需要统一创意方向时，先调用 design-artifact：
步骤 1：
"为一个金融科技产品设计视觉风格指南，目标用户是 25-40 岁职场人群"
步骤 2：
"基于上面的风格，创建仪表盘原型"
design-artifact 提供可复用的创意流程，但不强加固定视觉风格。
五、常见问题与解决方案
Q1：生成的 HTML 文件过大怎么办？
原因：内联了所有样式和脚本，无外部依赖。
解决方案：
- 对于原型，可以在生产环境中拆分为 CSS/JS 文件
- 使用工具如 PurgeCSS 移除未使用的样式
- 压缩后再部署
Q2：如何让 AI 理解我的设计偏好？
方法：
- 提供参考链接或截图（“类似 Airbnb 的风格”）
- 使用
design-artifact技能建立创意方向 - 在项目根目录放置
style-guide.html作为参考
Q3：生成的线框图太简陋？
设计意图：线框图故意保持低保真，让评审者聚焦结构而非视觉细节。
如需更高保真度：
- 明确说明"高保真线框图"
- 或直接使用
html-prototype技能
Q4：原型在移动端显示异常？
检查项：
- 确认技能生成的代码包含 viewport meta 标签
- 使用浏览器开发者工具测试响应式断点
- 检查 CSS 是否使用了固定宽度
六、总结
Effective HTML 展示了 AI 时代的前端开发新范式：用自然语言描述需求，AI 生成可直接运行的单文件 HTML 工件。它的价值在于：
- 快速验证想法：几分钟内从想法到可视化原型
- 降低沟通成本：用可交互原型替代静态文档
- 技能可复用：六种技能覆盖常见场景，安装即可使用
- 无外部依赖：单个 HTML 文件，随处可打开