Webdesign

语音通知（必须首先执行）

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Running the Webdesign skill", "voice_enabled": true}' > /dev/null

功能

通过两种途径设计并集成 Web 界面。ClaudeDesign 通过 Interceptor 技能操作 Anthropic 的 claude.ai/design 产品，然后将结果整合到你的代码库中。DirectDesign 则基于 Anthropic 的开源前端设计理念，在代码中直接编写设计，并从本地参考文件加载该理念。默认路由：简短、临时且在代码库内完成的工作交给 DirectDesign；多页面或可分享的原型交给 ClaudeDesign。

要解决的问题

制作出色的 Web UI，通常意味着要么费力应对无法触及真实代码库的视觉工具，要么从头手写代码，最后每次都得到千篇一律的默认效果。这两种失败模式各走极端：视觉优先的工具能带来精致效果，却存在交接断层；直接编写代码便于集成，美感却平淡。这项技能让你能在一处使用两条途径——需要评审时，通过 claude.ai/design 完成视觉往返；需要速度和代码库内迭代时，加载真正的美学准则并直接编写设计——并根据需求选择合适的途径。

工作原理

Webdesign 提供三种制作 Web UI 的途径。**选择合适的途径；如果意图不明确，请按名称列出选项。**我们始终操作当前可用的 Claude Design 版本，无需固定版本。

途径 1 — DirectDesign（默认主力方案；{{DA_NAME}}直接编写设计）

{{DA_NAME}}直接编写设计，并在编写时加载 Anthropic 开源的 frontend-design 美学准则。核心提示词内容来自 github.com/anthropics/skills/tree/main/skills/frontend-design（MIT 许可），并镜像到 References/FrontendDesignPhilosophy.md 中，包含设计风格清单、反默认规则、字体搭配方案、动效词汇和色彩规范。独立完整：无运行时依赖、无需浏览器、无需身份验证。这是本技能迄今实际交付所有真实设计所使用的途径。工作流：DirectDesign。

途径 2 — 原生 Claude Design CLI（代码集成和设计系统同步的首选）

Anthropic 在 Claude Code 中推出了第一方 /design 和 /design-sync 命令（2026 年 6 月，面向 Pro/Max/Team/Enterprise 正式发布 — 官方说明：support.claude.com/en/articles/14604416）。/design-sync 会将代码库中的真实设计系统导入 Claude Design，并将已完成的修改推回；/design 则可从终端创建和编辑设计。这些命令可确定地完成工作，是手工打造的 Interceptor 交接包机制的第一方替代方案——凡是与代码相关的工作，都应优先使用它们。工作流：NativeDesignSync。

途径 3 — 通过 Interceptor 使用 ClaudeDesign（视觉评审的实验性备用方案）

⚠️ 尚未验证，目前无法正常工作。此途径通过 Interceptor 技能操作 claude.ai/design 网页画布，以视觉优先的方式进行评审。它要求在 interceptor-test Chrome 配置文件中登录经过身份验证的 claude.ai 会话，但该配置文件目前尚未登录，且此途径从未完成过端到端运行（本技能每次实际运行都使用了 DirectDesign）。仅在你确实需要网页视觉画布且已先行设置好登录的情况下使用。工作流：CreatePrototype、ExtractDesignSystem、RefinePrototype、WebsiteToRedesign、ExportToCode、IntegrateIntoApp、DeployDesign。工具：DriveClaudeDesign.ts。

路由规则

当用户提出“设计得漂亮些”或“设计一个东西”之类的要求，却没有指定途径时：

• 简短、临时且在代码库内完成的工作，默认使用 DirectDesign——以获得更快速度和上下文内迭代。
• 需要同步真实代码库的设计系统，或进行与代码紧密结合的设计工作，且命令可用时，使用原生 CLI（/design-sync）。
• 仅在用户明确要求通过网页画布进行视觉评审时，才使用 ClaudeDesign（途径 3），并请记住它需要一次性登录，而且尚未经验证。

注重集成的操作（重要）

此技能经常作为更大型网站工作中的子步骤被调用，例如撰写博客文章、构建管理仪表板或发布营销页面。从父级上下文调用时，此技能：

• 接受现有项目上下文作为输入：框架、令牌文件、组件目录、部署目标。
• 输出针对现有应用的差异 / 补丁，而非独立的 HTML 文件。
• 遵循现有的设计令牌和组件模式，除非用户要求全面重新设计，否则不会覆盖它们。
• 通过 Workflows/IntegrateIntoApp.md 处理集成工作。

独立调用以进行全新设计时，此技能会生成自包含的原型，并可选择搭建新应用的基本框架。

自定义

用户专属的设计偏好（调色板、字体排印、间距网格、动画时间、框架默认设置）位于：

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # Design tokens, preferred frameworks
├── README.md
└── EXTEND.yaml

如果存在 PREFERENCES.md，技能会读取该文件，并将其中的令牌传入 Claude Design 的简报以及任何下游交接包。若没有自定义层，技能将默认采用 Claude Design 自身提取的系统。

工作流路由

执行工作流时，请输出此通知：

Running **WorkflowName** in **Webdesign**...

工作流	触发条件	文件
DirectDesign （路径 1 — 默认，由 {{DA_NAME}} 内联编写）	“做个好看的设计”、“直接设计这个”、“你自己来设计”、“设计点酷的东西”、“前端美学”、“粗野主义 / 编辑风 / 复古 / 极繁主义 UI”，以及任何不含“prototype” / “mockup” / “claude design”的简短临时设计请求	Workflows/DirectDesign.md
NativeDesignSync （路径 2 — 编码工作首选）	“/design”、“/design-sync”、“design sync”、“sync design system”、“pull design system into Claude Design”、“push code back to Claude Design”、“native design command”	Workflows/NativeDesignSync.md
CreatePrototype （路径 3 — 实验性，使用 claude.ai/design）	“design a prototype”、“create prototype”、“mockup”、“build a design”、“claude design”、“use claude.ai/design”	Workflows/CreatePrototype.md
ExtractDesignSystem （路径 3）	“extract design system”、“pull tokens from”、“extract brand”	Workflows/ExtractDesignSystem.md
RefinePrototype （路径 3）	“iterate on”、“refine”、“adjust spacing”、“change color”	Workflows/RefinePrototype.md
WebsiteToRedesign （路径 3）	“redesign this site”、“rebuild this URL”、“modernize”	Workflows/WebsiteToRedesign.md
ExportToCode （路径 3 后备方案 — 优先使用 /design-sync）	“export to code”、“ship to code”、“send to Claude Code”、“process handoff”	Workflows/ExportToCode.md
IntegrateIntoApp （路径 3 后备方案 — 优先使用 /design-sync）	“integrate this into”、“patch into the app”、“land in existing codebase”	Workflows/IntegrateIntoApp.md
DeployDesign （路径 3）	“deploy the design”、“ship to production”	Workflows/DeployDesign.md

对于面向代码的工作（导出、集成、设计系统提取 / 同步），优先使用路径 2（NativeDesignSync → /design-sync）。上方的路径 3 捆绑工作流仍作为有文档记录的后备方案，适用于通过 Web 画布进行操作的情况；但这些工作流尚未经过验证，需要使用测试配置文件登录。

前置条件（PREFLIGHT）

路径 1（DirectDesign）无需任何条件——不需要浏览器，也不需要身份验证。路径 2（原生 CLI）只需要包含 Claude Design 的 Claude 订阅，以及当前版本的 Claude Code（如果没有显示相关命令，请运行 /update）。以下检查仅适用于路径 3（通过 Interceptor 使用 ClaudeDesign）：

1. Interceptor 技能可用——which interceptor 会返回一个路径。如果没有，请指导用户先调用 Skill("Interceptor") 完成设置。
2. 已登录的 claude.ai 会话——interceptor-test Chrome 配置文件必须已登录 claude.ai。运行时检查（未登录的配置文件会进入营销页面，而非应用）；如果尚未登录，必须先进行一次有界面登录，然后才能运行任何路径 3 工作流。
3. Claude Design 访问权限——Claude 订阅必须包含 Claude Design（Pro、Max、Team 或 Enterprise，且管理员已选择启用）。
4. 对于 IntegrateIntoApp：在上下文中传入父项目路径和框架标识符（next、astro、vitepress、vite-react、vue、vanilla）。

缺少前置条件 → 停止，并给出明确的解决步骤。绝不静默回退。

注意事项

在此处累积经验。注意事项中的信息密度最高。

• 两条路径，一项技能。 ClaudeDesign（CreatePrototype 等）驱动 claude.ai/design；DirectDesign 则由 {{DA_NAME}} 使用 References/FrontendDesignPhilosophy.md 直接编写设计。不要混淆两者。当用户意图不明确时，应明确列出这两个选项并让用户选择——绝不要擅自选择路径。
• 原生优先——代码和令牌是真实来源，Figma 不是依赖项。 通过链接代码仓库（Claude Design 会从代码中读取真实组件和令牌）或上传令牌／组件文件来导入设计系统，绝不要使用 .fig 导出文件。不要在任一方向加入 Figma 往返流程（设计 → .fig，或代码 → 可编辑的 Figma 画板）。我们的判断是，设计应存在于代码库中，而非外部交换文件中。如果出现无需代码仓库的视觉评审需求，应通过 URL／截图分享来解决，而不是让这项技能依赖 Figma。
• DirectDesign 完全独立。 美学规范位于 References/FrontendDesignPhilosophy.md（镜像自 anthropics/skills 的 MIT 源码）。无需在运行时依赖已安装的上游 frontend-design Claude Code 插件——DirectDesign 可在任何 LifeOS 环境中运行。
• 原生 /design + /design-sync 现已成为与代码绑定的路径（已确认）。 Anthropic 官方文档（support.claude.com/en/articles/14604416）介绍了这两个命令；截至 2026 年 6 月，它们已在 Pro/Max/Team/Enterprise 上全面开放。/design-sync 可双向同步代码库 ↔ 设计系统——对于任何与代码绑定的操作，都应使用它代替 Interceptor 交接包机制。目前仍没有公开的 REST API 或 MCP 服务；CLI 命令是可编程接口。如果看不到这些命令，请运行 /update。
• ClaudeDesign/Interceptor 路径（路径 3）未经验证，目前受阻。 它从未完成过端到端运行——这项技能的每次实际运行都使用了 DirectDesign。interceptor-test 配置未登录 claude.ai，因此 DriveClaudeDesign.ts 到达的是营销页面，而不是应用。该工具通过无障碍树启发式方法定位控件（通过 role=textbox／contenteditable 定位输入框，通过 /send|submit/ 定位发送按钮，通过 /export/ 定位导出按钮），所以按钮位置变化并非阻碍——缺少身份验证以及原生 CLI 取代该路径才是阻碍。要使用路径 3 前，先让测试配置登录 claude.ai 一次，然后进行一次人工监督下的运行。
• 必须使用真实 Chrome。 使用 Interceptor 技能——它是 LifeOS 中唯一获准使用的浏览器自动化方式。Claude Design 的 UI 依赖 claude.ai 的完整会话状态；基于 CDP 的自动化会触发机器人检测并丢失会话 Cookie。
• 交接包是目录，不是单个文件。 一个交接包包含 PROMPT.md、可选的 tokens.json、components/、assets/ 以及特定框架的脚手架。应将整个目录作为一个整体处理。
• frontend-design 插件会自动激活。 将交接包交给 Claude Code 后，该插件（已预装在官方市场中）会自动处理前端工作——不要手动调用它。
• Claude Design 会在引导过程中提取设计系统。 对于希望 Claude Design 理解的新代码库，应先运行 ExtractDesignSystem，再运行 CreatePrototype——否则 Claude Design 会使用通用默认值并覆盖你的令牌。
• 集成 ≠ 覆盖。 IntegrateIntoApp 会在现有代码基础上生成差异。如果用户希望全面重新设计并替换现有 UI，请明确指出这一点并征求确认。
• Canva 导出内容可编辑。 如果用户希望非开发人员（营销人员、创始人）修改设计，请使用 --format canva 通过 Workflows/ExportToCode.md 处理。
• 不支持实时协作。 Claude Design 不支持像 Figma 那样的多人协同编辑。可通过 URL 导出分享，以便异步评审。
• 企业版限制。 企业账户需要管理员先在 Organization 设置中启用 Claude Design，claude.ai 中才会显示调色板图标。
• 会话用量限额。 Claude Design 生成会消耗大量令牌。截至 2026 年 6 月的更新，其用量与 claude.ai 聊天、Claude Code 和 Cowork 共用一个额度池——不再有单独的额度。Pro 套餐不适合持续进行设计工作；推荐 Max。
• 先建立设计系统才能解决令牌问题。 最大的令牌消耗来自每次迭代都重新推断品牌风格，然后再进行修正。运行一次 ExtractDesignSystem，将系统设为固定、可复用的参考；之后的每次生成都会复用它，而非重新猜测。修正轮次越少，项目整个周期消耗的令牌就越少。这是最能有效减少额度消耗的做法。
• 输出精良 ≠ 可直接用于生产环境。 Claude Design 可以生成精美的视觉效果，但交接代码通常仍需经过验证和无障碍检查。集成后运行 Tools/VerifyDesign.ts。
• 视觉模型不会自行猜测。 如果提示词未指定响应式断点、对比度要求或深色模式行为，Claude Design 会采用默认设置，这些设置可能与目标应用不符。请在需求说明中明确写出。

示例

示例 1：根据简介创建原型

User: "Design a pricing page for an AI security startup — editorial aesthetic, dark only"
→ Invokes CreatePrototype workflow
→ Preflight: Interceptor + authenticated claude.ai session
→ Composes brief with explicit aesthetic, constraints, differentiation
→ Drives claude.ai/design via Tools/DriveClaudeDesign.ts
→ Screenshots output, verifies a11y via Tools/VerifyDesign.ts
→ Returns bundle path + preview URL

示例 2：将 Claude Design 原型集成到现有 Astro 应用中

User: "Integrate this prototype into ~/Projects/landing — it's an Astro site"
→ Invokes IntegrateIntoApp workflow
→ Audits target project (framework, tokens, components)
→ Runs ExtractDesignSystem first to prime Claude Design with app's real tokens
→ Translates prototype to Astro conventions via frontend-design plugin
→ Produces unified diff against the working tree
→ Pauses for human review before applying
→ Applies patch on a branch, runs tests, screenshots in-context

示例 3：重新设计现有的线上网站

User: "Redesign example.com — modernize, keep the copy, make it brutalist"
→ Invokes WebsiteToRedesign workflow
→ Captures current state (screenshot + HTML + tokens)
→ Writes critique (what works, what's dated, what to preserve)
→ Composes rebuild brief with explicit aesthetic and preserve list
→ Drives Claude Design with critique + original screenshot as input
→ Iterates via RefinePrototype until satisfied
→ Hands off to IntegrateIntoApp or ExportToCode

文件组织

skills/Webdesign/
├── SKILL.md                          # This file — routing + gotchas
├── README.md                         # Public-facing intro
├── Workflows/
│   ├── DirectDesign.md               # Path 2 — {{DA_NAME}} writes inline (no claude.ai round-trip)
│   ├── CreatePrototype.md            # Path 1 — drives claude.ai/design
│   ├── ExtractDesignSystem.md
│   ├── RefinePrototype.md
│   ├── WebsiteToRedesign.md
│   ├── ExportToCode.md
│   ├── IntegrateIntoApp.md
│   └── DeployDesign.md
├── Tools/
│   ├── DriveClaudeDesign.ts          # Interceptor wrapper for claude.ai/design
│   ├── ProcessHandoffBundle.ts       # Parse bundle → structured brief
│   └── VerifyDesign.ts               # Screenshot + a11y probe
└── References/
    ├── FrontendDesignPhilosophy.md   # Aesthetic doctrine — load-bearing for DirectDesign (MIT-attributed mirror)
    ├── ClaudeDesignCapabilities.md   # What Claude Design does / doesn't do
    ├── InputFormats.md               # Prompt patterns, codebase prep
    ├── ExportFormats.md              # html / pdf / pptx / canva / url / bundle
    └── HandoffBundleSpec.md          # Bundle structure for Claude Code handoff

执行日志

{"ts":"ISO8601","workflow":"CreatePrototype","brief":"one-line","outputs":["path1","path2"],"duration_s":42}

此日志为只读元数据；不属于公开技能分发内容。