拓冰网站定制 
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的核心工作流它接收一段 13 句的产品 Brief通过 Interceptor 技能驱动claude.ai/design生成原型再完成截图评审、按需导出与可访问性校验最终把产物交接给下游的代码集成流程。读完本文你将掌握该工作流的完整触发方式、Brief 构造规范、底层驱动工具的实现机制、导出格式决策矩阵以及从原型到生产代码的交接路径可直接在 LifeOS 环境中复制运行。一、CreatePrototype 在 Webdesign 技能中的定位Webdesign 技能SKILL.md为 Web 界面产出提供了三条路径路径名称机制适用场景Path 1DirectDesign默认主力由 DA数字助理内联书写设计加载开源frontend-design美学纲领短小、即席、在代码库内完成的设计工作无需浏览器与鉴权Path 2NativeDesignSync/design、/design-syncClaude Code 官方命令双向同步代码库与设计系统代码集成、设计系统同步的首选Path 3ClaudeDesign via Interceptor实验性通过 Interceptor 驱动claude.ai/designWeb 画布需要视觉画布评审的多页/可分享原型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必填输入BriefBrief是唯一必填项用 13 句话描述要构建的内容必须覆盖三点用途purpose、受众audience、氛围mood。SKILL.md 与 InputFormats.md 反复强调Brief 含糊如 make it look nice会直接产出千篇一律的通用设计——Claude Design 与任何模型一样在意图不明确时默认走向通用。强烈建议的可选输入可选输入说明对结果的影响Reference images15 张本地图片路径视觉灵感参考带视觉参考的首次产出质量显著高于纯文本 BriefBrand assetsLogo 路径、字体文件、现有配色保证品牌一致性Framework targetastro/next/vitepress/vanilla-html决定交接 bundle 的脚手架结构Existing project path若原型将落入现有应用触发后续 IntegrateIntoApp.mdAesthetic directionminimal/maximalist/retro-futuristic/editorial/brutalist/art-deco/luxury/playful/industrial省略时由 Claude Design 自行选择通常等于放弃风格控制三、八步工作流全解析步骤 1Preflight 前置检查执行 SKILL.md 中定义的 Path 3 前置条件任一失败立即暂停并给出修复指引绝不静默降级Interceptor 技能可用——which interceptor能返回路径否则先调用Skill(Interceptor)完成安装claude.ai 已登录会话——interceptor-testChrome 配置必须登录 claude.ai未登录会撞上营销页而非应用需要一次性有头浏览器登录Claude Design 访问权限——订阅需包含 Claude DesignPro / 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.mdPURPOSE: 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.md50 词产出通用设计100300 词为甜区500 词时 Claude Design 开始忽略 Brief 部分内容。若 Brief 超过 300 词应拆分阶段先出原型 Brief再用后续精修补充细节。美学目录节选完整 12 项见 InputFormats.mdBrutally 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 Designbun ~/.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 产出首版通常需要2060 秒。这里值得展开源码级细节commandPromptDriveClaudeDesign.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.mdClaude Design 支持四种精修模式——Inline comment元素级外科手术、Direct edit文本就地修改、Adjustment knob间距/颜色/版式的滑块最快且可逆、Conversational prompt结构性变更。优先用旋钮2 秒生效结构性变更才走对话式。优秀精修请求是具体且有边界的Reduce hero padding by 30% 优于 Make it tighterUse Playfair Display for headings, keep body font 优于 Better typography。每次只改一处若 5 轮以上精修仍未收敛说明原始 Brief 有误应回炉 CreatePrototype 重写 Brief。步骤 6按下一步骤选择导出格式下一步导出格式评审 / 反馈url可分享的内部链接协作编辑canva本地代码集成bundle交接给 Claude Code幻灯片 / 客户端演示pptx或pdf静态一次性页面htmlbun ~/.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。源码实现commandExportDriveClaudeDesign.ts的流程是在可访问性树中找 label 含export的按钮 → 点击 → 等待 500ms 重新抓树 → 在menuitem/button/link中匹配含目标格式文本的项 → 点击 → 等待 3 秒 → 用newestDownload(10)在~/Downloads中按修改时间捡取最新下载文件 → 移动到输出目录。commandBundle则点击 label 匹配/Claude Code|handoff|Send to Claude/i的交接按钮等待下载 zip 后自动unzip到输出目录并清理 zipDriveClaudeDesign.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 结构化 BriefClaude 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_typefull / partial / token-only正文包含项目用途、受众、美学方向、框架目标、分节描述、组件清单、集成说明、Must-Preserve 与 Must-NOT 列表。tokens.json采用框架无关的 schemacolor / typography / spacing / radius / shadow / motionTailwind 配置、Styled Components 主题、CSS 自定义属性都从它派生manifest.json声明框架与版本约束、必需依赖包如tailwindcss 3.4.0及claude_design_url。框架脚手架按framework字段生成astro 产出pages/*.astroastro.config.mjsnext 产出app/*/page.tsxreact-vite 产出src/components/*.tsxvue 产出src/components/*.vuevitepress 产出.vitepress/theme/vanilla 产出index.htmlstyles.cssscript.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 PitfallsBrief 含糊——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插件把通用输出翻译为项目框架约定生成 diffdiff -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 配置代码由用户自写。七、时间预估与使用边界单次迭代原型38 分钟每轮精修 13 分钟精修每个旋钮变更约 30 秒对话式精修 12 分钟典型精修会话 37 轮集成单组件/页面集成 1545 分钟复杂多路由集成应拆分为多个会话。最后必须重申本文开头与 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让设计系统成为固定可复用参考是降低项目全生命周期代币消耗的最高杠杆动作。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 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的核心工作流它接收一段 13 句的产品 Brief通过 Interceptor 技能驱动claude.ai/design生成原型再完成截图评审、按需导出与可访问性校验最终把产物交接给下游的代码集成流程。读完本文你将掌握该工作流的完整触发方式、Brief 构造规范、底层驱动工具的实现机制、导出格式决策矩阵以及从原型到生产代码的交接路径可直接在 LifeOS 环境中复制运行。一、CreatePrototype 在 Webdesign 技能中的定位Webdesign 技能SKILL.md为 Web 界面产出提供了三条路径路径名称机制适用场景Path 1DirectDesign默认主力由 DA数字助理内联书写设计加载开源frontend-design美学纲领短小、即席、在代码库内完成的设计工作无需浏览器与鉴权Path 2NativeDesignSync/design、/design-syncClaude Code 官方命令双向同步代码库与设计系统代码集成、设计系统同步的首选Path 3ClaudeDesign via Interceptor实验性通过 Interceptor 驱动claude.ai/designWeb 画布需要视觉画布评审的多页/可分享原型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必填输入BriefBrief是唯一必填项用 13 句话描述要构建的内容必须覆盖三点用途purpose、受众audience、氛围mood。SKILL.md 与 InputFormats.md 反复强调Brief 含糊如 make it look nice会直接产出千篇一律的通用设计——Claude Design 与任何模型一样在意图不明确时默认走向通用。强烈建议的可选输入可选输入说明对结果的影响Reference images15 张本地图片路径视觉灵感参考带视觉参考的首次产出质量显著高于纯文本 BriefBrand assetsLogo 路径、字体文件、现有配色保证品牌一致性Framework targetastro/next/vitepress/vanilla-html决定交接 bundle 的脚手架结构Existing project path若原型将落入现有应用触发后续 IntegrateIntoApp.mdAesthetic directionminimal/maximalist/retro-futuristic/editorial/brutalist/art-deco/luxury/playful/industrial省略时由 Claude Design 自行选择通常等于放弃风格控制三、八步工作流全解析步骤 1Preflight 前置检查执行 SKILL.md 中定义的 Path 3 前置条件任一失败立即暂停并给出修复指引绝不静默降级Interceptor 技能可用——which interceptor能返回路径否则先调用Skill(Interceptor)完成安装claude.ai 已登录会话——interceptor-testChrome 配置必须登录 claude.ai未登录会撞上营销页而非应用需要一次性有头浏览器登录Claude Design 访问权限——订阅需包含 Claude DesignPro / 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.mdPURPOSE: 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.md50 词产出通用设计100300 词为甜区500 词时 Claude Design 开始忽略 Brief 部分内容。若 Brief 超过 300 词应拆分阶段先出原型 Brief再用后续精修补充细节。美学目录节选完整 12 项见 InputFormats.mdBrutally 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 Designbun ~/.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 产出首版通常需要2060 秒。这里值得展开源码级细节commandPromptDriveClaudeDesign.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.mdClaude Design 支持四种精修模式——Inline comment元素级外科手术、Direct edit文本就地修改、Adjustment knob间距/颜色/版式的滑块最快且可逆、Conversational prompt结构性变更。优先用旋钮2 秒生效结构性变更才走对话式。优秀精修请求是具体且有边界的Reduce hero padding by 30% 优于 Make it tighterUse Playfair Display for headings, keep body font 优于 Better typography。每次只改一处若 5 轮以上精修仍未收敛说明原始 Brief 有误应回炉 CreatePrototype 重写 Brief。步骤 6按下一步骤选择导出格式下一步导出格式评审 / 反馈url可分享的内部链接协作编辑canva本地代码集成bundle交接给 Claude Code幻灯片 / 客户端演示pptx或pdf静态一次性页面htmlbun ~/.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。源码实现commandExportDriveClaudeDesign.ts的流程是在可访问性树中找 label 含export的按钮 → 点击 → 等待 500ms 重新抓树 → 在menuitem/button/link中匹配含目标格式文本的项 → 点击 → 等待 3 秒 → 用newestDownload(10)在~/Downloads中按修改时间捡取最新下载文件 → 移动到输出目录。commandBundle则点击 label 匹配/Claude Code|handoff|Send to Claude/i的交接按钮等待下载 zip 后自动unzip到输出目录并清理 zipDriveClaudeDesign.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 结构化 BriefClaude 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_typefull / partial / token-only正文包含项目用途、受众、美学方向、框架目标、分节描述、组件清单、集成说明、Must-Preserve 与 Must-NOT 列表。tokens.json采用框架无关的 schemacolor / typography / spacing / radius / shadow / motionTailwind 配置、Styled Components 主题、CSS 自定义属性都从它派生manifest.json声明框架与版本约束、必需依赖包如tailwindcss 3.4.0及claude_design_url。框架脚手架按framework字段生成astro 产出pages/*.astroastro.config.mjsnext 产出app/*/page.tsxreact-vite 产出src/components/*.tsxvue 产出src/components/*.vuevitepress 产出.vitepress/theme/vanilla 产出index.htmlstyles.cssscript.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 PitfallsBrief 含糊——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插件把通用输出翻译为项目框架约定生成 diffdiff -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 配置代码由用户自写。七、时间预估与使用边界单次迭代原型38 分钟每轮精修 13 分钟精修每个旋钮变更约 30 秒对话式精修 12 分钟典型精修会话 37 轮集成单组件/页面集成 1545 分钟复杂多路由集成应拆分为多个会话。最后必须重申本文开头与 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让设计系统成为固定可复用参考是降低项目全生命周期代币消耗的最高杠杆动作。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考