mcpField
H
html-prototype-build

html-prototype-build

github.com/lisuiwen设计与 UI2341 次安装5 天前更新
代码仓库

关于 html-prototype-build

html-prototype-build 是用于构建和维护 HTML 原型的 Agent skill，面向处理界面生成、编辑与交付的工作流。它按任务加载所需指南与资源包，并区分浏览器运行时和本地创作工具。

主要功能

  1. 01按任务路由到对应指南
  2. 02发现并解析 UI 资源包
  3. 03使用 PrototypeViewers 管理业务状态
  4. 04支持本地编辑与评审标记
  5. 05运行测试并准备交付文件

适用场景

  1. 01依据用户材料生成或重建界面
  2. 02在创作环境中直接编辑原型
  3. 03为页面添加临时评审标记
  4. 04按页面状态批量截图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/lisuiwen/ai-html-annotation --skill html-prototype-build

安装后在 Claude Code 中输入/html-prototype-build确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.env.example
README.md
README.zh-CN.md
addons/annotations/
ADDON.md
ui-annotations.html
agents/
openai.yaml
references/
delivery-checklist.md
delivery.md
generation-contract.md
local-authoring.md
pack-install.md
product-annotations.md
review-mark.md
screenshots.md
sketch-board.md
ui-generation.md
runtime/author/
bootstrap.js
runtime/author/core/
modes.js
picker.js
platform.js
selector.js
runtime/author/shell/
index.css
index.js
runtime/author/sketch/
board.css
board.js
charts.js
export.js
index.html
mount.js
sizing.js

详细介绍

HTML 原型构建

快速开始

  1. 根据用户提供的材料确认原型类型和业务事实；信息不足时先询问，不要猜测。
  2. 生成或大幅修改 UI 时，运行 node <skill-root>/scripts/resolve-pack.mjs --list，然后运行 node <skill-root>/scripts/resolve-pack.mjs --pack=<pack-id> --select=<preset, pattern, or component id>，并且只读取它输出的最小文件闭包。
  3. 根据共享生成规范 §7生成完整的 <prototype-name>/ 交付目录；所有业务状态都通过 PrototypeViewers 路由，并且正式的客户端 Runtime 必须直接使用 Runtime 副本。
  4. 完成后，在仓库根目录运行 npm test；仅在任务需要时才启动创作服务器或生成场景截图。

先确定任务类型

只阅读与当前任务匹配的入口；不要一次性阅读所有参考资料：

用户目标必需入口主要输出或工具
生成、重建或大幅修改 UIUI 生成HTML 原型和按需 UI 组件
安装或下载缺失的 UI 包Pack 安装scripts/install-pack.mjs
了解 Viewer、便笺卡片、SVG 连接器或交互闪电产品标注快照 + 客户端 Runtime
启动创作环境、直接编辑、编辑便笺或跳转到源文件本地创作runtime/server/index.mjs + 创作工具
添加或修改画板组件画板组件pack manifest.json atoms + data-pack-atom
向页面添加审阅标记、导出 For AI审阅标记runtime/author/tools/mark/
按页面状态批量生成截图场景截图runtime/cli/screenshot.mjs
准备最终文件交付与迭代最终交付文件
交付前最终检查交付检查清单逐项复选框

生成或大幅修改 UI 时，先阅读共享生成规范；其他任务则阅读上方对应入口，无需阅读完整规范。

对于视觉任务，通过 UI 包目录发现可用包，并选择基础包和提供方；解析最小文件闭包，并遵循使用方包规则。未安装任何包时，请遵循 Pack 安装。

scripts/ 存放 Agent 的确定性工具。runtime/ 按执行边界划分：client/ 是正式的浏览器 Runtime，author/ 是浏览器创作工具（包括画板），server/ 是本地 Node 创作服务，cli/ 是独立的命令行工具。只有 runtime/client/ 会被复制到原型中。runtime/author/、runtime/server/ 和 runtime/cli/ 均保留在技能目录中。

术语

  • ponytail: — 用于标记有意采用的原型捷径或尚未收集的状态的就地注释；获得真实截图、计算样式或交互证据后，应将其替换。
  • 项目材料 — 当前任务的截图、需求和已确认的事实（不是通用框架默认值）。

核心边界

  • 每个原型都必须按顺序使用分发的 runtime/client/core/display-mode.js、runtime/client/core/state.js、runtime/client/notes/model.js、runtime/client/notes/viewer.js；state.js 提供唯一的 PrototypeViewers 状态源，model.js 仅处理注释场景元数据和纯 when 匹配，Notes Viewer 仅负责 DOM/连接器渲染。不要把这些职责重新合并到 Viewer 中。
  • 正式注释只能通过 runtime/server/index.mjs + Notes editor 写回 prototype/notes.snapshot.js；不要在 prototype.html 中内嵌注释编辑器，也不要将正式注释存储在 localStorage 中。
  • Mark 是 Author Tools 面板中的临时审阅工具，与 Direct edit 并列；其数据存储在按页面路径划分的 localStorage 中，绝不写入快照，也不会注入源 HTML。
  • Direct edit 仅在创作会话中预览，并通过服务端安全地写回源 HTML。
  • 创作服务仅处理本地编辑和原型内的源查找；它绝不会进入源 HTML 或最终交付物。
  • runtime/author/sketch/ 中的画板是创作会话页面。不要将其复制到 <prototype-name>/ 中。
  • 截图仅使用 URL 场景和正式注释数据；它们不会生成业务状态。
  • 系统名称、菜单、字段、状态和业务数据必须来自用户提供的材料；信息不明确时应询问，绝不猜测。

评论

支持 Markdown