LifeOS Webdesign 技能实战：用 CreatePrototype 工作流把 Brief 变成可交付的 Claude Design 原型-平芜编程栈

LifeOS Webdesign 技能实战：用 CreatePrototype 工作流把 Brief 变成可交付的 Claude Design 原型

【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS

导读

CreatePrototype是 LifeOS Webdesign 技能（位于 LifeOS/install/skills/Webdesign/）中面向「视觉画布」路线（Path 3）的核心工作流：它接收一段 1～3 句的产品 Brief，通过 Interceptor 技能驱动claude.ai/design生成原型，再完成截图评审、按需导出与可访问性校验，最终把产物交接给下游的代码集成流程。读完本文，你将掌握该工作流的完整触发方式、Brief 构造规范、底层驱动工具的实现机制、导出格式决策矩阵，以及从原型到生产代码的交接路径，可直接在 LifeOS 环境中复制运行。

一、CreatePrototype 在 Webdesign 技能中的定位

Webdesign 技能（SKILL.md）为 Web 界面产出提供了三条路径：

路径	名称	机制	适用场景
Path 1	DirectDesign（默认主力）	由 DA（数字助理）内联书写设计，加载开源`frontend-design`美学纲领	短小、即席、在代码库内完成的设计工作，无需浏览器与鉴权
Path 2	NativeDesignSync（`/design`、`/design-sync`）	Claude Code 官方命令，双向同步代码库与设计系统	代码集成、设计系统同步的首选
Path 3	ClaudeDesign via Interceptor（实验性）	通过 Interceptor 驱动`claude.ai/design`Web 画布	需要视觉画布评审的多页/可分享原型

CreatePrototype正是 Path 3 的入口工作流，与 DirectDesign.md、NativeDesignSync.md 并列。SKILL.md 中明确标注了它的定位：「此路径驱动claude.ai/designWeb 画布，需要interceptor-testChrome 配置文件中的已登录 claude.ai 会话，且从未端到端运行过（本技能每一次真实运行都使用了 DirectDesign）。仅在明确需要视觉 Web 画布且已完成一次性登录时使用。」因此，运行本工作流前务必先完成前置检查，这是理解后续所有步骤的前提。

从源码结构看（Tools/ 目录下的三个工具），Path 3 的自动化依赖两个组件：DriveClaudeDesign.ts（驱动画布）与VerifyDesign.ts（验证输出），两者都要求interceptorCLI 存在于 PATH 上。

二、触发方式与输入规格

触发短语

当用户说出以下短语之一时，应路由到本工作流：

"design a prototype" / "create a prototype" / "mockup" / "build a design" / "make a landing page design" / "design a dashboard"

必填输入：Brief

Brief是唯一必填项，用 1～3 句话描述要构建的内容，必须覆盖三点：用途（purpose）、受众（audience）、氛围（mood）。SKILL.md 与 InputFormats.md 反复强调：Brief 含糊（如 "make it look nice"）会直接产出千篇一律的通用设计——Claude Design 与任何模型一样，在意图不明确时默认走向通用。

强烈建议的可选输入

可选输入	说明	对结果的影响
Reference images（1～5 张本地图片路径）	视觉灵感参考	带视觉参考的首次产出质量显著高于纯文本 Brief
Brand assets	Logo 路径、字体文件、现有配色	保证品牌一致性
Framework target	`astro`/`next`/`vitepress`/`vanilla-html`	决定交接 bundle 的脚手架结构
Existing project path	若原型将落入现有应用	触发后续 IntegrateIntoApp.md
Aesthetic direction	`minimal`/`maximalist`/`retro-futuristic`/`editorial`/`brutalist`/`art-deco`/`luxury`/`playful`/`industrial`	省略时由 Claude Design 自行选择，通常等于放弃风格控制

三、八步工作流全解析

步骤 1：Preflight 前置检查

执行 SKILL.md 中定义的 Path 3 前置条件，任一失败立即暂停并给出修复指引，绝不静默降级：

Interceptor 技能可用——which interceptor能返回路径；否则先调用Skill("Interceptor")完成安装；
claude.ai 已登录会话——interceptor-testChrome 配置必须登录 claude.ai（未登录会撞上营销页而非应用）；需要一次性有头浏览器登录；
Claude Design 访问权限——订阅需包含 Claude Design（Pro / Max / Team / Enterprise 需管理员开启）；
（仅 IntegrateIntoApp 需要）父项目路径 + 框架标识（next / astro / vitepress / vite-react / vue / vanilla）。

# 验证 Interceptor 是否可用 interceptor --version || echo "ABORT: Interceptor skill not installed"

从 DriveClaudeDesign.ts 源码可见，resolveInterceptorBin()会在 Interceptor 缺失时以退出码 127 报错并打印安装指引，与文档中的 "halt with remediation" 语义一致。

步骤 2：构造 Brief

为 Claude Design 构造单个Prompt，必须包含五个要素（详见 References/InputFormats.md）：

一句话用途——页面/组件做什么、谁在用；
美学方向——必须显式指定，不要让 Claude Design 退化为通用风格；
约束——响应式断点、暗色模式、可访问性层级、框架；
差异化钩子——那个让人记住的独特细节；
范围——区块数量、关键组件、必备元素。

可复制的 Brief 模板（来自 InputFormats.md）：

PURPOSE: A [thing] for [audience] that helps them [core job]. AESTHETIC: [one direction — brutalist / editorial / retro-futuristic / minimal / etc.] Rationale: [why this fits the audience and job] CONSTRAINTS: - Framework: [next / astro / vitepress / react-vite / vanilla] - Responsive: mobile-first, breakpoints at 640/768/1024/1280 - Accessibility: WCAG 2.1 AA - Dark mode: [yes / no / both] - Typography: [pair or "your choice"] DIFFERENTIATION: [the one memorable element] SCOPE: - Section 1: [purpose, key content] - Section 2: [purpose, key content] - Must-haves: [list] - Must-NOTs: [list]

Prompt 长度甜区（InputFormats.md）：<50 词产出通用设计；100～300 词为甜区；>500 词时 Claude Design 开始忽略 Brief 部分内容。若 Brief 超过 300 词，应拆分阶段：先出原型 Brief，再用后续精修补充细节。

美学目录（节选，完整 12 项见 InputFormats.md）：Brutally minimal（个人站/散文/宣言）、Maximalist chaos（音乐/时尚/独立游戏）、Retro-futuristic（开发工具/基础设施公司）、Editorial / magazine（出版物/长文）、Brutalist / raw（独立软件/艺术站）、Art deco / geometric（奢侈品/金融/法律）、Industrial / utilitarian（仪表盘/管理工具）、Luxury / refined（高端品牌/服务）。混搭两种可以，同时选三种必出混乱。

规避通用默认：❌ 仅用 Inter/ Roboto / Arial / system-ui；❌ 白底紫色渐变；❌ 过度使用的 Space Grotesk；❌ 千篇一律的卡片网格；❌ 怯懦的均匀配色。✅ 指定独特的 display + body 字体对；✅ 指定主色 + 锐利强调色（hex 或具名）；✅ 非对称或破格布局；✅ 编排一个动画时刻（而非零散微交互）。

参考图最佳实践：参考氛围而非内容（"这种网格化编辑感"而非"复制这个站"）；混合来源（1 张网站截图 + 1 张海报 + 1 张建筑照片优于 3 张网站截图）；逐张标注用途（ref-1-type.png 用于字体、ref-2-color.png 用于配色、ref-3-layout.png 用于构图）；避免 AI 生成的参考图（会放大通用感）。

步骤 3：打开 Claude Design

bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts open

该命令在 Interceptor 控制的已认证 Chrome 会话中打开claude.ai/design。首次运行可能需要有头浏览器登录；之后可无头运行。源码层面（DriveClaudeDesign.ts）只是调用interceptor open https://claude.ai/design。

步骤 4：提交 Brief 并等待首版

bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts prompt "$(cat /tmp/brief.md)"

Claude Design 产出首版通常需要20～60 秒。

这里值得展开源码级细节：commandPrompt（DriveClaudeDesign.ts）不是通过 CDP 直接操作 DOM，而是先interceptor tree --json抓取可访问性树，然后按启发式定位控件：

Composer 定位：在可访问性树中查找role === "textbox"或contenteditable为真的节点（claude.ai/design的 Prompt 输入框满足其一），取第一个带 Interceptor ref 的节点，再调用interceptor type <ref> <brief>输入文本；
发送定位：在按钮节点中优先匹配 label 含send/submit/arrow的按钮；若整页只有一个按钮则作为兜底，最后interceptor click <ref>提交。

若启发式未命中，工具会把整棵可访问性树 dump 到/tmp/claude-design-tree-<timestamp>.json并以退出码 3 退出——这正是 SKILL.md 中「按钮移动不是阻塞点」这一 Gotcha 的技术依据：定位靠的是可访问性树语义而非像素坐标。

步骤 5：截图捕获与评审

OUT="${LIFEOS_DOWNLOADS_DIR:-$HOME/Downloads}"/webdesign/$(date +%Y%m%d-%H%M%S) mkdir -p "$OUT" bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts screenshot "$OUT/v1.png"

评审截图：若符合 Brief，进入步骤 6；否则交给 RefinePrototype.md 精修。输出目录默认落在$HOME/Downloads/webdesign/<时间戳>/，可用环境变量LIFEOS_DOWNLOADS_DIR覆盖——这与commandScreenshot中resolve(outPath)+ 自动mkdir -p父目录的实现（DriveClaudeDesign.ts）吻合。

关于迭代的精修策略（RefinePrototype.md）：Claude Design 支持四种精修模式——Inline comment（元素级外科手术）、Direct edit（文本就地修改）、Adjustment knob（间距/颜色/版式的滑块，最快且可逆）、Conversational prompt（结构性变更）。优先用旋钮（<2 秒生效），结构性变更才走对话式。优秀精修请求是具体且有边界的："Reduce hero padding by 30%" 优于 "Make it tighter"；"Use Playfair Display for headings, keep body font" 优于 "Better typography"。每次只改一处，若 5 轮以上精修仍未收敛，说明原始 Brief 有误，应回炉 CreatePrototype 重写 Brief。

步骤 6：按下一步骤选择导出格式

下一步	导出格式
评审 / 反馈	`url`（可分享的内部链接）
协作编辑	`canva`
本地代码集成	`bundle`（交接给 Claude Code）
幻灯片 / 客户端演示	`pptx`或`pdf`
静态一次性页面	`html`

bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts export bundle "$OUT"

格式决策树（详见 References/ExportFormats.md）：评审/反馈 → Internal URL；非开发者编辑 → Canva；现有应用内的生产代码 → Bundle → IntegrateIntoApp；全新独立应用的生产代码 → Bundle → ExportToCode → DeployDesign；静态一次性页面 → Standalone HTML → DeployDesign；客户端演示 → PDF 或 PPTX；本地归档 → Folder。

源码实现commandExport（DriveClaudeDesign.ts）的流程是：在可访问性树中找 label 含export的按钮 → 点击 → 等待 500ms 重新抓树 → 在menuitem/button/link中匹配含目标格式文本的项 → 点击 → 等待 3 秒 → 用newestDownload(10)在~/Downloads中按修改时间捡取最新下载文件 → 移动到输出目录。commandBundle则点击 label 匹配/Claude Code|handoff|Send to Claude/i的交接按钮，等待下载 zip 后自动unzip到输出目录并清理 zip（DriveClaudeDesign.ts）。

步骤 7：验证

bun ~/.claude/skills/Webdesign/Tools/VerifyDesign.ts "$OUT/index.html" "$OUT/verify"

在目标视口截图 + 输出可访问性报告。任何关键问题修复前不得宣布完成。

关于 VerifyDesign 的实现（VerifyDesign.ts），有几点值得说明：

用法：VerifyDesign.ts <url-or-path> <out-dir> [--viewport WIDTHxHEIGHT] [--a11y|--no-a11y]；默认视口1440x900，宽高各需在[320, 7680]内；输入既可以是 URL 也可以是本地文件路径（本地路径通过pathToFileURL转为file://交给 Interceptor 打开）；
流程：interceptor open→interceptor wait-stable→interceptor screenshot输出带时间戳的 PNG，退出码 0 表示通过；
可访问性检查：注意当前实现的 engine 是interceptor-tree-heuristic，即基于可访问性树的无头启发式（检查 img-alt、button-name、link-name、form-label、heading-order 五类违规），并非文档所述的 axe-core，且明确声明了局限性：no-contrast-check、no-dynamic-aria-live-check、no-css-parsed-check。也就是说，对比度、aria-live 动态区域、CSS 解析这三类无法在此验证，深层 a11y 仍需人工或补充工具把关；
视口限制：--viewport参数会被校验并写入结果 JSON，但工具注释明确「Interceptor 不暴露 viewport 动词，因此视口只记录不生效」。

步骤 8：交接

若原型将进入更大的站点工作：

Skill("Webdesign") → Workflows/IntegrateIntoApp.md

同时传递bundle 路径 + 目标项目路径。

交接 bundle 的结构（References/HandoffBundleSpec.md）——注意交接单元是整个目录而非单个文件：

<bundle-root>/ ├── PROMPT.md # 必需：frontmatter + 结构化 Brief（Claude Code 消费的主契约） ├── tokens.json # 必需：设计令牌 JSON ├── preview.html # 必需：静态预览渲染 ├── README.md # 推荐：bundle 元数据 ├── manifest.json # 推荐：框架 + 版本元数据 ├── components/ # 可选：组件脚手架（.tsx/.jsx/.vue/.astro/.html） ├── pages/ # 可选：多页面 bundle 的页面脚手架 ├── assets/ # 可选：images/ fonts/ icons/ logos/ └── integration/ # 可选：tailwind.config.ts、astro.config.mjs 等

PROMPT.md是整个 bundle 的心脏：frontmatter 记录generated_by、generated_at、claude_design_session、framework、design_system、handoff_type（full / partial / token-only），正文包含项目用途、受众、美学方向、框架目标、分节描述、组件清单、集成说明、Must-Preserve 与 Must-NOT 列表。tokens.json采用框架无关的 schema（color / typography / spacing / radius / shadow / motion），Tailwind 配置、Styled Components 主题、CSS 自定义属性都从它派生；manifest.json声明框架与版本约束、必需依赖包（如tailwindcss >=3.4.0）及claude_design_url。框架脚手架按framework字段生成：astro 产出pages/*.astro+astro.config.mjs，next 产出app/*/page.tsx，react-vite 产出src/components/*.tsx，vue 产出src/components/*.vue，vitepress 产出.vitepress/theme/，vanilla 产出index.html+styles.css+script.js。

Bundle 校验：喂给 Claude Code 前，用 ProcessHandoffBundle.ts 校验结构（PROMPT.md存在且 frontmatter 完整、tokens.json可解析、preview.html存在、manifest 声明的框架文件存在、组件引用的资源存在于assets/、文本文件中无密钥）。该工具还会按扩展名把 bundle 内容分类为 images / fonts / logos / components / code / notes / other，并输出 JSON 摘要；加--brief标志则渲染一份可直接给 Claude Code 的一行交接指令：> Integrate the assets in <bundle-dir> using tokens.json (if present) and components/ directory as the design reference.

四、输出物清单

一次完整的 CreatePrototype 运行交付：

截图（$OUT/下 PNG，含各迭代版本）；
导出产物（bundle 目录 / 独立 html / canva 链接 / pptx）；
可访问性报告（VerifyDesign 的 JSON 结果，含 viewport、截图路径、a11y 违规清单与 pass 状态）；
~/.claude/下的一行执行日志（SKILL.md 定义了格式：{"ts":"ISO8601","workflow":"CreatePrototype","brief":"one-line","outputs":["path1","path2"],"duration_s":42}）。

五、常见陷阱清单（Common Pitfalls）

Brief 含糊——"make it look nice" 必然产出通用设计；必须显式给出美学方向、氛围与差异化钩子；
跳过参考图——带视觉参考的 Claude Design 首版质量远高于纯文本 Brief；
不指定框架——交接 bundle 对 React / Vue / vanilla 的脚手架完全不同，必须在导出前选定；
HTML 导出误用——HTML 是静态单文件（内联 CSS/JS），不携带令牌与组件；任何代码集成工作流一律导出bundle。独立 HTML 适合静态托管、邮件内嵌原型、一次性落地页；不适合组件框架集成、动态内容、多页面路由。

六、与代码接轨：IntegrateIntoApp 交接流程

当原型要落入现有应用（如 Astro 站点、Next.js 仪表盘、VitePress 博客）时，IntegrateIntoApp.md 是标准后继流程，其核心原则是以框架感知的 diff 落地，而非绿地脚手架：

审计目标项目——探测框架（package.json依赖）、收集现有令牌文件（tailwind.config.*、tokens.*、theme.*、variables.css）、记录组件目录；
先跑 ExtractDesignSystem——若项目尚未抽取设计系统，必须先执行，用应用的真实令牌「喂饱」Claude Design，否则它会凭空发明一套竞争性配色；
构造集成 Brief——硬约束：沿用$TARGET/src/styles令牌、匹配$TARGET/src/components组件模式、遵守路由约定、逐字保留 Preserve 清单；集成模式默认 merge，显式 replace 才允许覆盖；
框架翻译——用frontend-design插件把通用输出翻译为项目框架约定；
生成 diff（diff -urN）→人工评审门（列出新增/修改/删除文件与令牌冲突，这是不可跳过的关键关口）→ 审批后git checkout -b webdesign-integration-$(date +%Y%m%d)+patch -p1应用；
应用内验证——启动 dev server，用 VerifyDesign 验证集成路由在应用外壳（nav/footer/theme）内的渲染；
回归测试——bun test && bun run typecheck && bun run lint，零回归才算完成。

集成模式三选一：merge（默认，新增页面/组件，最小化修改现有文件）、replace（整页重设计，覆盖范围内仍尊重现有令牌）、token-only（仅更新tokens.json/ tailwind 配置，代码由用户自写）。

七、时间预估与使用边界

单次迭代原型：3～8 分钟；每轮精修 +1～3 分钟；
精修：每个旋钮变更约 30 秒，对话式精修 1～2 分钟，典型精修会话 3～7 轮；
集成：单组件/页面集成 15～45 分钟；复杂多路由集成应拆分为多个会话。

最后必须重申本文开头与 SKILL.md 一致的使用边界：CreatePrototype 属于实验性的 Path 3 路线，前置依赖（Interceptor 安装、interceptor-test配置文件的 claude.ai 登录、订阅含 Claude Design）缺一不可；对于代码绑定类工作（导出、集成、设计系统抽取/同步），SKILL.md 明确建议优先使用 Path 2 的原生/design、/design-sync命令，Path 3 的 bundle 工作流是文档化的兜底方案。同时注意 Claude Design 生成的代币消耗与 claude.ai 聊天、Claude Code 共用配额池；运行一次ExtractDesignSystem让设计系统成为固定可复用参考，是降低项目全生命周期代币消耗的最高杠杆动作。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考