尧图网页设计 
LifeOS Webdesign 实战用 WebsiteToRedesign 工作流把任意网站改造成现代化设计【免费下载链接】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本篇指南讲解 LifeOS 中 Webdesign 技能的WebsiteToRedesign工作流——一条捕获线上页面 → 分析批判 → 生成改造简报 → 交给 Claude Design 重建 → 迭代对比 → 落地代码的完整网站改版流水线。读完本文你将掌握如何输入一个 URL 与改版方向产出保留原站结构、换上全新审美的现代化页面并能熟练调用 DriveClaudeDesign.ts 与 VerifyDesign.ts 两个核心工具完成截图、投喂、迭代、对比与无障碍校验。工作流定位改版任务在 Webdesign 技能中的归属WebsiteToRedesign是 Webdesign 技能 提供的多条工作流之一专用于把现有线上网站改造成新设计这类任务。它的典型触发短语包括redesign this site、rebuild this page、modernize this URL、new look for、give this site a facelift。在技能的路径体系中它属于 Path 3通过 Interceptor 驱动claude.ai/design的可视化画布路线与CreatePrototype、RefinePrototype、ExportToCode、IntegrateIntoApp、DeployDesign共同构成一套从概念到生产代码的管道。需要说明的是根据 SKILL.md 中的运行记录Path 3 属于实验性通道要求本机 Interceptor 可用且interceptor-testChrome 配置档已登录 claude.ai在未满足前置条件时文章第 3 节会给出明确的前置检查清单。工作流的内核可以浓缩为一行Live URL → capture → critique → modernized rebuild via Claude Design——即实时网址 → 捕获 → 批判 → 通过 Claude Design 完成现代化重建。输入定义改版前需要准备什么工作流的输入分为必填与可选两类缺一不可的是前两项类别字段说明必填URL要捕获的线上页面地址必填Direction方向要改变什么审美迁移、面向不同受众、全新品牌、或保留骨架只换外观keep-the-bones-fix-the-look可选Preserve list保留清单需要逐字保留的元素/区块文案、结构、特定组件可选Reference sites参考站点1–3 个观感应启发重建的网站 URL可选Framework target框架目标重建成果将落地到什么框架Direction 是决定成败的关键输入。它决定了重建是换皮还是换骨仅要求美学迁移时保留清单可偏向结构与文案要求全新品牌时则几乎可以全盘推倒。捕获现有站点截图、HTML 快照与设计令牌第一步是为改版建立原状基线。工作流默认把产出存放在$LIFEOS_DOWNLOADS_DIR缺省为$HOME/Downloads下的webdesign/redesign/时间戳目录中OUT${LIFEOS_DOWNLOADS_DIR:-$HOME/Downloads}/webdesign/redesign/$(date %Y%m%d-%H%M%S) mkdir -p $OUT # Full-page screenshot —— Interceptor 没有 Tools/ 目录改用技能 API 调用。 # Skill(Interceptor, open $URL and capture full-page screenshot to $OUT/original.png) # HTML snapshot curl -sL $URL $OUT/original.html # Extract tokens from the live site bun ~/.claude/skills/Webdesign/Tools/VerifyDesign.ts $URL $OUT/original-verify三条命令各司其职全页截图通过 Interceptor 技能捕获原站视觉交给 Claude Design 作为改版前参照物。HTML 快照curl -sL拉取原始 HTML。工作流的 Common Pitfalls 明确提示仅用截图不够——HTML 为 Claude Design 提供了像素推断不出的结构上下文语义标签、层级、真实文案截图与 HTML 双通道输入是保证重建不跑偏的关键。令牌提取调用 VerifyDesign.ts 对原站做一次冒烟检查。从源码看VerifyDesign.ts url-or-path out-dir会通过 Interceptor 打开页面、等待渲染稳定wait-stable、截取当前视口图并默认执行一次基于可访问性树启发式的 a11y 扫描--a11y|--no-a11y可开关默认开启支持的视口参数为--viewport WIDTHxHEIGHT宽高均须落在 320–7680 之间默认1440x900。工具在结束时输出 JSONurl、resolvedUrl、viewport、screenshot、a11y 结果、pass 标志供后续流程解析。注意其 a11y 检测并非 axe-core 完整实现源码中明确列出了三项局限无对比度检查、无动态 aria-live 检查、无 CSS 解析检查。批判性分析重建前必须回答的问题工作流强调批判环节不可跳过。在重新生成之前先把截图与 HTML 喂给一次快速分析回答四个问题这个页面上什么有效什么显得过时或千篇一律访客离开后唯一记住的东西是什么重建应该保留什么、重新思考什么将批判结果写入$OUT/critique.md——Claude Design 会在重建简报中读取它。这一步的意义工作流的 Common Pitfalls 说得很直白跳过批判、直接重建这个产出的只是没有意图的变更而批判让重建变得有目的。critique.md 实际上是给下游 Claude Design 的先验知识帮助它区分这是原站值得保留的设计资产与这是需要淘汰的过时痕迹。撰写重建简报给 Claude Design 的完整指令批判完成之后组合一份引用原站的重建简报。工作流给出的模板如下TASK: Redesign the page currently at $URL. ORIGINAL SCREENSHOT: (attached) $OUT/original.png WHAT TO PRESERVE: $PRESERVE_LIST AESTHETIC DIRECTION: $DIRECTION REFERENCE FEEL (not copy — just mood): $REFERENCE_SITES CONSTRAINTS: - Framework: $FRAMEWORK - Responsive: mobile-first, breakpoints at 640/768/1024/1280 - Accessibility: WCAG 2.1 AA minimum - Dark mode: $DARK_MODE_YN DIFFERENTIATION: The one memorable element: $DIFFERENTIATOR模板中的每一行都对应一种约束策略可以结合 InputFormats.md 中的理想简报五要素来理解其设计逻辑AESTHETIC DIRECTION必须是一个明确的美学方向如 brutally minimal、editorial、retro-futuristic、maximalist chaos 等而非含糊的好看一点。InputFormats.md 提供了 12 个方向的美学目录并警告混搭两种可以三种必然糊掉同时给出反默认清单避开 Inter/Roboto/Arial/system-ui-only、紫色渐变白底、过度使用的 Space Grotesk、千篇一律的卡片网格转而要求有辨识度的字体配对点名两种、主色锐利强调色给出 hex 或命名色、非对称或打破网格的布局、一个编排过的动画时刻。REFERENCE FEEL (not copy — just mood)参考站点只取情绪不取内容。参考图的最佳实践是混合来源网站截图海报建筑照片优于三张网站截图、逐张标注用途ref-1 管排版、ref-2 管色板、ref-3 管构图、避免 AI 生成的参考图。CONSTRAINTS把响应式断点640/768/1024/1280、无障碍等级WCAG 2.1 AA、深色模式行为显式写死。参考文档强调视觉不会猜——若简报不指定断点、对比度与深色模式Claude Design 会使用默认值很可能与目标应用不符。DIFFERENTIATION唯一令人难忘的元素是让结果不像模板的核心。InputFormats.md 提供了正反例如超大页码从每个 section 左缘出血差异化成功对比欢迎回来式装饰失败。另外InputFormats.md 给出了简报长度甜区低于 50 词会产出泛化默认100–300 词是甜区超过 500 词 Claude Design 开始忽略部分内容超长简报应拆成先原型、后细化两阶段。提交给 Claude DesignDriveClaudeDesign 工具实操简报就绪后通过工具驱动 claude.ai/designbun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts open bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts upload $OUT/original.png bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts prompt $(cat $OUT/brief.md)从 DriveClaudeDesign.ts 源码可以看出它是 Interceptor 的薄封装open执行interceptor open https://claude.ai/design打开设计画布。prompt先获取当前页面的可访问性树interceptor tree --json用响亮可访问性树启发式定位输入框——优先找带 ref 且role textbox或contenteditable true的节点找不到就把整棵树 dump 到/tmp/claude-design-tree-时间戳.json并退出定位后用interceptor type输入简报再从按钮列表里按/send|submit|arrow/i正则找发送按钮单按钮界面退化为唯一按钮最后click发送。这意味着按钮位置变化不是障碍工具始终按无障碍语义而非坐标定位。前置要求interceptor在 PATH 上且存在一个已认证的 claude.ai 会话源码在找不到 interceptor 时以退出码 127 报错并提示先安装 Interceptor 技能。值得留意的是工作流文档中出现的upload动词在工具源码的main()分发中并未实现支持 open/prompt/screenshot/export/bundle这从侧面印证了该通道的实验性质实际执行时应以源码确认的能力为准必要时改为通过prompt携带路径说明。迭代用 RefinePrototype 打磨细节第一版原型很少一次到位工作流第 5 步要求进入 RefinePrototype 工作流 进行迭代。文档给出的常见改版迭代指令都是具体而边界明确的Keep the headline copy verbatim — only restyle标题文案逐字保留只换样式The hero felt too wide — constrain to max-w-6xlhero 太宽约束到 max-w-6xlBring the testimonial section closer to the features把推荐语区块挪近特性区The CTA color isnt working — try warmerCTA 颜色不对换更暖的RefinePrototype 提供了四种细化模式内联评论元素级外科手术、直接编辑文案微调、调节旋钮间距/颜色/布局/字号实时非破坏、对话式提示结构性变更。实践优先级是旋钮优先最快且可回退结构性变更才用对话提示。细化请求同样要具体减少 hero 内边距 30%优于紧凑一点Playfair Display 做标题、正文不动优于更好的字体。若连续 5 轮以上细化仍不收敛说明原始简报就有问题应从 CreatePrototype 用更锐利的简报重来而不是细化到对的答案。并排对比改造前后验收导出前必须捕获新设计并做并排对比bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts screenshot $OUT/redesigned.png bun ~/.claude/skills/Webdesign/Tools/VerifyDesign.ts --compare $OUT/original.png $OUT/redesigned.png $OUT/compareVerifyDesign.ts的--compare模式把original.png与redesigned.png合成对比目录供人工目检。除此之外VerifyDesign.ts还能在集成后对渲染中的真实应用做截图a11y 冒烟检查——这是工作流链条上输出保真 ≠ 生产就绪的兜底闸门见 SKILL.md 的 GotchasClaude Design 产出的是打磨过的视觉效果但交接代码常常需要验证与无障碍补课。导出与集成让改版落地工作流第 7 步根据部署目标分叉替换现有站点→ 走 IntegrateIntoApp.md把原型以框架感知的 diff而非绿地脚手架的形式落进现有应用。其流程是审计目标项目package.json探测框架、tailwind.config.*/tokens.*/theme.*/variables.css抓取既有令牌→ 先运行 ExtractDesignSystem 让 Claude Design 用应用真实令牌而非自造色板 → 撰写集成简报硬约束不得发明新颜色、匹配既有组件模式、遵循路由约定→ 用frontend-design插件做框架翻译 →diff -urN生成 patch →人工审阅 diff 闸门→ 切分支patch -p1应用 →bun dev起服务用 VerifyDesign 验证上下文渲染 →bun test bun run typecheck bun run lint跑全套回归。集成模式有三种merge默认新增为主、replace显式授权后覆盖范围内路由、token-only只更新 tokens.json/tailwind 配置。绿地重建→ 先走 ExportToCode.md 再走 DeployDesignDriveClaudeDesign.ts export bundle $OUT/bundle导出交接包含PROMPT.md、tokens.json、components/、assets/、preview.html用ProcessHandoffBundle.ts解析出结构化简报交给frontend-design插件生成生产级代码最后对localhost起服务做截图像素对比与 a11y 门禁。需要提醒的是两份工作流文档都明确标注若本机可用原生/design-sync命令优先走 Path 2NativeDesignSync交接包路径是 Path 3 的实验性回退。具体导出格式的选择矩阵Internal URL / Canva / Bundle / HTML / PDF / PPTX / Folder / 平台直推可查阅 ExportFormats.md。工作流输出清单一次完整的单页改版会产出以下可交付物$OUT/original.png、$OUT/original.html—— 捕获的原始状态视觉 结构双基线$OUT/critique.md—— 重建前的批判分析$OUT/brief.md—— 交给 Claude Design 的重建简报$OUT/redesigned.png—— 最终原型截图$OUT/compare/—— 前后并排对比导出产物bundle 目录 / HTML / URL常见陷阱与避坑清单工作流文档总结了四条高频失败模式全部可以在仓库文档与源码中找到对应依据跳过批判—— 直接重建这个只会产生无意图的变更批判让重建有目的对应工作流第 2 步。保留过多—— 如果保留清单里什么都有那就是刷漆而不是改版。最多挑 2–4 个元素进入保留清单。只用截图—— 截图配 HTML 双输入才能给 Claude Design 像素推断不出的结构上下文对应第 1 步的curl -sL快照。参考抄袭—— 参考站点提供的是情绪而非内容如果改版结果像参考站那就失败了对应简报中的REFERENCE FEEL (not copy — just mood)措辞。时间预估单页端到端约 10–25 分钟。更大规模的多页改版应按页分解为多次会话每页独立走一遍本工作流集成与验证阶段另需参考 IntegrateIntoApp 的 15–45 分钟/页预估。参考路径速览工作流本体WebsiteToRedesign.md技能总纲与路径路由SKILL.md驱动工具open/prompt/screenshot/export/bundleDriveClaudeDesign.ts验证工具截图 a11y 启发式冒烟VerifyDesign.ts简报撰写规范与美学目录InputFormats.md迭代细化RefinePrototype.md落地现有应用IntegrateIntoApp.md导出为代码ExportToCode.md导出格式决策矩阵ExportFormats.mdClaude Design 能力与访问层级ClaudeDesignCapabilities.md【免费下载链接】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 实战：用 WebsiteToRedesign 工作流把任意网站改造成现代化设计
LifeOS Webdesign 实战用 WebsiteToRedesign 工作流把任意网站改造成现代化设计【免费下载链接】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本篇指南讲解 LifeOS 中 Webdesign 技能的WebsiteToRedesign工作流——一条捕获线上页面 → 分析批判 → 生成改造简报 → 交给 Claude Design 重建 → 迭代对比 → 落地代码的完整网站改版流水线。读完本文你将掌握如何输入一个 URL 与改版方向产出保留原站结构、换上全新审美的现代化页面并能熟练调用 DriveClaudeDesign.ts 与 VerifyDesign.ts 两个核心工具完成截图、投喂、迭代、对比与无障碍校验。工作流定位改版任务在 Webdesign 技能中的归属WebsiteToRedesign是 Webdesign 技能 提供的多条工作流之一专用于把现有线上网站改造成新设计这类任务。它的典型触发短语包括redesign this site、rebuild this page、modernize this URL、new look for、give this site a facelift。在技能的路径体系中它属于 Path 3通过 Interceptor 驱动claude.ai/design的可视化画布路线与CreatePrototype、RefinePrototype、ExportToCode、IntegrateIntoApp、DeployDesign共同构成一套从概念到生产代码的管道。需要说明的是根据 SKILL.md 中的运行记录Path 3 属于实验性通道要求本机 Interceptor 可用且interceptor-testChrome 配置档已登录 claude.ai在未满足前置条件时文章第 3 节会给出明确的前置检查清单。工作流的内核可以浓缩为一行Live URL → capture → critique → modernized rebuild via Claude Design——即实时网址 → 捕获 → 批判 → 通过 Claude Design 完成现代化重建。输入定义改版前需要准备什么工作流的输入分为必填与可选两类缺一不可的是前两项类别字段说明必填URL要捕获的线上页面地址必填Direction方向要改变什么审美迁移、面向不同受众、全新品牌、或保留骨架只换外观keep-the-bones-fix-the-look可选Preserve list保留清单需要逐字保留的元素/区块文案、结构、特定组件可选Reference sites参考站点1–3 个观感应启发重建的网站 URL可选Framework target框架目标重建成果将落地到什么框架Direction 是决定成败的关键输入。它决定了重建是换皮还是换骨仅要求美学迁移时保留清单可偏向结构与文案要求全新品牌时则几乎可以全盘推倒。捕获现有站点截图、HTML 快照与设计令牌第一步是为改版建立原状基线。工作流默认把产出存放在$LIFEOS_DOWNLOADS_DIR缺省为$HOME/Downloads下的webdesign/redesign/时间戳目录中OUT${LIFEOS_DOWNLOADS_DIR:-$HOME/Downloads}/webdesign/redesign/$(date %Y%m%d-%H%M%S) mkdir -p $OUT # Full-page screenshot —— Interceptor 没有 Tools/ 目录改用技能 API 调用。 # Skill(Interceptor, open $URL and capture full-page screenshot to $OUT/original.png) # HTML snapshot curl -sL $URL $OUT/original.html # Extract tokens from the live site bun ~/.claude/skills/Webdesign/Tools/VerifyDesign.ts $URL $OUT/original-verify三条命令各司其职全页截图通过 Interceptor 技能捕获原站视觉交给 Claude Design 作为改版前参照物。HTML 快照curl -sL拉取原始 HTML。工作流的 Common Pitfalls 明确提示仅用截图不够——HTML 为 Claude Design 提供了像素推断不出的结构上下文语义标签、层级、真实文案截图与 HTML 双通道输入是保证重建不跑偏的关键。令牌提取调用 VerifyDesign.ts 对原站做一次冒烟检查。从源码看VerifyDesign.ts url-or-path out-dir会通过 Interceptor 打开页面、等待渲染稳定wait-stable、截取当前视口图并默认执行一次基于可访问性树启发式的 a11y 扫描--a11y|--no-a11y可开关默认开启支持的视口参数为--viewport WIDTHxHEIGHT宽高均须落在 320–7680 之间默认1440x900。工具在结束时输出 JSONurl、resolvedUrl、viewport、screenshot、a11y 结果、pass 标志供后续流程解析。注意其 a11y 检测并非 axe-core 完整实现源码中明确列出了三项局限无对比度检查、无动态 aria-live 检查、无 CSS 解析检查。批判性分析重建前必须回答的问题工作流强调批判环节不可跳过。在重新生成之前先把截图与 HTML 喂给一次快速分析回答四个问题这个页面上什么有效什么显得过时或千篇一律访客离开后唯一记住的东西是什么重建应该保留什么、重新思考什么将批判结果写入$OUT/critique.md——Claude Design 会在重建简报中读取它。这一步的意义工作流的 Common Pitfalls 说得很直白跳过批判、直接重建这个产出的只是没有意图的变更而批判让重建变得有目的。critique.md 实际上是给下游 Claude Design 的先验知识帮助它区分这是原站值得保留的设计资产与这是需要淘汰的过时痕迹。撰写重建简报给 Claude Design 的完整指令批判完成之后组合一份引用原站的重建简报。工作流给出的模板如下TASK: Redesign the page currently at $URL. ORIGINAL SCREENSHOT: (attached) $OUT/original.png WHAT TO PRESERVE: $PRESERVE_LIST AESTHETIC DIRECTION: $DIRECTION REFERENCE FEEL (not copy — just mood): $REFERENCE_SITES CONSTRAINTS: - Framework: $FRAMEWORK - Responsive: mobile-first, breakpoints at 640/768/1024/1280 - Accessibility: WCAG 2.1 AA minimum - Dark mode: $DARK_MODE_YN DIFFERENTIATION: The one memorable element: $DIFFERENTIATOR模板中的每一行都对应一种约束策略可以结合 InputFormats.md 中的理想简报五要素来理解其设计逻辑AESTHETIC DIRECTION必须是一个明确的美学方向如 brutally minimal、editorial、retro-futuristic、maximalist chaos 等而非含糊的好看一点。InputFormats.md 提供了 12 个方向的美学目录并警告混搭两种可以三种必然糊掉同时给出反默认清单避开 Inter/Roboto/Arial/system-ui-only、紫色渐变白底、过度使用的 Space Grotesk、千篇一律的卡片网格转而要求有辨识度的字体配对点名两种、主色锐利强调色给出 hex 或命名色、非对称或打破网格的布局、一个编排过的动画时刻。REFERENCE FEEL (not copy — just mood)参考站点只取情绪不取内容。参考图的最佳实践是混合来源网站截图海报建筑照片优于三张网站截图、逐张标注用途ref-1 管排版、ref-2 管色板、ref-3 管构图、避免 AI 生成的参考图。CONSTRAINTS把响应式断点640/768/1024/1280、无障碍等级WCAG 2.1 AA、深色模式行为显式写死。参考文档强调视觉不会猜——若简报不指定断点、对比度与深色模式Claude Design 会使用默认值很可能与目标应用不符。DIFFERENTIATION唯一令人难忘的元素是让结果不像模板的核心。InputFormats.md 提供了正反例如超大页码从每个 section 左缘出血差异化成功对比欢迎回来式装饰失败。另外InputFormats.md 给出了简报长度甜区低于 50 词会产出泛化默认100–300 词是甜区超过 500 词 Claude Design 开始忽略部分内容超长简报应拆成先原型、后细化两阶段。提交给 Claude DesignDriveClaudeDesign 工具实操简报就绪后通过工具驱动 claude.ai/designbun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts open bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts upload $OUT/original.png bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts prompt $(cat $OUT/brief.md)从 DriveClaudeDesign.ts 源码可以看出它是 Interceptor 的薄封装open执行interceptor open https://claude.ai/design打开设计画布。prompt先获取当前页面的可访问性树interceptor tree --json用响亮可访问性树启发式定位输入框——优先找带 ref 且role textbox或contenteditable true的节点找不到就把整棵树 dump 到/tmp/claude-design-tree-时间戳.json并退出定位后用interceptor type输入简报再从按钮列表里按/send|submit|arrow/i正则找发送按钮单按钮界面退化为唯一按钮最后click发送。这意味着按钮位置变化不是障碍工具始终按无障碍语义而非坐标定位。前置要求interceptor在 PATH 上且存在一个已认证的 claude.ai 会话源码在找不到 interceptor 时以退出码 127 报错并提示先安装 Interceptor 技能。值得留意的是工作流文档中出现的upload动词在工具源码的main()分发中并未实现支持 open/prompt/screenshot/export/bundle这从侧面印证了该通道的实验性质实际执行时应以源码确认的能力为准必要时改为通过prompt携带路径说明。迭代用 RefinePrototype 打磨细节第一版原型很少一次到位工作流第 5 步要求进入 RefinePrototype 工作流 进行迭代。文档给出的常见改版迭代指令都是具体而边界明确的Keep the headline copy verbatim — only restyle标题文案逐字保留只换样式The hero felt too wide — constrain to max-w-6xlhero 太宽约束到 max-w-6xlBring the testimonial section closer to the features把推荐语区块挪近特性区The CTA color isnt working — try warmerCTA 颜色不对换更暖的RefinePrototype 提供了四种细化模式内联评论元素级外科手术、直接编辑文案微调、调节旋钮间距/颜色/布局/字号实时非破坏、对话式提示结构性变更。实践优先级是旋钮优先最快且可回退结构性变更才用对话提示。细化请求同样要具体减少 hero 内边距 30%优于紧凑一点Playfair Display 做标题、正文不动优于更好的字体。若连续 5 轮以上细化仍不收敛说明原始简报就有问题应从 CreatePrototype 用更锐利的简报重来而不是细化到对的答案。并排对比改造前后验收导出前必须捕获新设计并做并排对比bun ~/.claude/skills/Webdesign/Tools/DriveClaudeDesign.ts screenshot $OUT/redesigned.png bun ~/.claude/skills/Webdesign/Tools/VerifyDesign.ts --compare $OUT/original.png $OUT/redesigned.png $OUT/compareVerifyDesign.ts的--compare模式把original.png与redesigned.png合成对比目录供人工目检。除此之外VerifyDesign.ts还能在集成后对渲染中的真实应用做截图a11y 冒烟检查——这是工作流链条上输出保真 ≠ 生产就绪的兜底闸门见 SKILL.md 的 GotchasClaude Design 产出的是打磨过的视觉效果但交接代码常常需要验证与无障碍补课。导出与集成让改版落地工作流第 7 步根据部署目标分叉替换现有站点→ 走 IntegrateIntoApp.md把原型以框架感知的 diff而非绿地脚手架的形式落进现有应用。其流程是审计目标项目package.json探测框架、tailwind.config.*/tokens.*/theme.*/variables.css抓取既有令牌→ 先运行 ExtractDesignSystem 让 Claude Design 用应用真实令牌而非自造色板 → 撰写集成简报硬约束不得发明新颜色、匹配既有组件模式、遵循路由约定→ 用frontend-design插件做框架翻译 →diff -urN生成 patch →人工审阅 diff 闸门→ 切分支patch -p1应用 →bun dev起服务用 VerifyDesign 验证上下文渲染 →bun test bun run typecheck bun run lint跑全套回归。集成模式有三种merge默认新增为主、replace显式授权后覆盖范围内路由、token-only只更新 tokens.json/tailwind 配置。绿地重建→ 先走 ExportToCode.md 再走 DeployDesignDriveClaudeDesign.ts export bundle $OUT/bundle导出交接包含PROMPT.md、tokens.json、components/、assets/、preview.html用ProcessHandoffBundle.ts解析出结构化简报交给frontend-design插件生成生产级代码最后对localhost起服务做截图像素对比与 a11y 门禁。需要提醒的是两份工作流文档都明确标注若本机可用原生/design-sync命令优先走 Path 2NativeDesignSync交接包路径是 Path 3 的实验性回退。具体导出格式的选择矩阵Internal URL / Canva / Bundle / HTML / PDF / PPTX / Folder / 平台直推可查阅 ExportFormats.md。工作流输出清单一次完整的单页改版会产出以下可交付物$OUT/original.png、$OUT/original.html—— 捕获的原始状态视觉 结构双基线$OUT/critique.md—— 重建前的批判分析$OUT/brief.md—— 交给 Claude Design 的重建简报$OUT/redesigned.png—— 最终原型截图$OUT/compare/—— 前后并排对比导出产物bundle 目录 / HTML / URL常见陷阱与避坑清单工作流文档总结了四条高频失败模式全部可以在仓库文档与源码中找到对应依据跳过批判—— 直接重建这个只会产生无意图的变更批判让重建有目的对应工作流第 2 步。保留过多—— 如果保留清单里什么都有那就是刷漆而不是改版。最多挑 2–4 个元素进入保留清单。只用截图—— 截图配 HTML 双输入才能给 Claude Design 像素推断不出的结构上下文对应第 1 步的curl -sL快照。参考抄袭—— 参考站点提供的是情绪而非内容如果改版结果像参考站那就失败了对应简报中的REFERENCE FEEL (not copy — just mood)措辞。时间预估单页端到端约 10–25 分钟。更大规模的多页改版应按页分解为多次会话每页独立走一遍本工作流集成与验证阶段另需参考 IntegrateIntoApp 的 15–45 分钟/页预估。参考路径速览工作流本体WebsiteToRedesign.md技能总纲与路径路由SKILL.md驱动工具open/prompt/screenshot/export/bundleDriveClaudeDesign.ts验证工具截图 a11y 启发式冒烟VerifyDesign.ts简报撰写规范与美学目录InputFormats.md迭代细化RefinePrototype.md落地现有应用IntegrateIntoApp.md导出为代码ExportToCode.md导出格式决策矩阵ExportFormats.mdClaude Design 能力与访问层级ClaudeDesignCapabilities.md【免费下载链接】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），仅供参考