Communitygithub.com

danielmiessler/LifeOS

通过三种路径设计和集成 Web 界面：DirectDesign（内联编写设计，遵循 Anthropic 前端设计理念——默认主力）、原生 /design 和 /design-sync Claude Code 命令（代码集成和设计系统同步首选）或 ClaudeDesign（通过 Interceptor 驱动 claude.ai/design——实验性的可视化审查备选方案）。适用于 Web 设计、UI 设计、创建原型、设计系统、设计同步、重新设计网站、模型、着陆页、仪表板设计、设计到代码、前端设计、界面优化、设计审核、粗野/编辑/复古 UI。不适用于插画/标志（请使用 Art）或视频（请使用 Remotion）。

LifeOS 是什么？

danielmiessler/LifeOS 中的 Webdesign 技能为 AI 代理提供了统一的 Web 界面设计和集成解决方案，解决了“可视化工具与真实代码库脱节”和“手写代码集成性好但视觉表现平庸”的两难困境。它通过三条路径实现：DirectDesign 路径利用本地参考的 Anthropic 开源前端设计理念内联编写设计，是大多数临时性、代码库内工作的默认主力，无需浏览器或认证；Native Design Sync 路径通过 Claude Code 的原生 /design 和 /design-sync 命令（2026 年 6 月 GA）实现与真实代码库的双向设计系统同步，是代码绑定工作的首选；ClaudeDesign 路径通过 Interceptor 技能驱动 claude.ai/design 的 Web 画布，用于需要可视化审查的场合，但该路径目前未经端到端验证且需要一次性登录。技能会识别工作上下文，在作为更大项目子步骤时产出针对现有应用的差分/补丁，而非独立的 HTML 文件，并可读取用户自定义的设计偏好（颜色、排版、间距等）。它还包含详细的工作流路由表、前提条件检查和大量经验教训（Gotchas），帮助代理避免常见错误，例如优先使用原生 CLI 而非 Figma 回环，以及通过一次性提取设计系统来减少令牌消耗。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/danielmiessler/LifeOS/tree/HEAD/LifeOS/install/skills/Webdesign
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

语音通知（强制首要操作）

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "正在运行 Webdesign 技能", "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 月 GA，适用于 Pro/Max/Team/Enterprise 计划——官方资料：support.claude.com/en/articles/14604416）。/design-sync 将代码库的真实设计系统提取到 Claude Design，并将生成的变更推回代码库；/design 则用于在终端中创建和编辑设计。这些是确定性、第一方的替代方案，可取代手动的 Interceptor 交接包机制——对于任何代码绑定工作，优先使用它们。工作流：NativeDesignSync。

路径 3 — 通过 Interceptor 使用 ClaudeDesign（实验性可视化审查备选方案）

⚠️ 未经验证且当前不可用。此路径通过 Interceptor 技能驱动 claude.ai/design 的 Web 画布，用于以视觉为先的审查。它要求 interceptor-test Chrome 配置文件中有一个已登录的 claude.ai 会话，但该配置文件目前未登录，且此路径从未端到端运行过（本技能所有实际运行均使用 DirectDesign 路径）。仅当你明确需要可视化 Web 画布并且已设置好登录时，才使用此路径。工作流：CreatePrototype、ExtractDesignSystem、RefinePrototype、WebsiteToRedesign、ExportToCode、IntegrateIntoApp、DeployDesign。工具：DriveClaudeDesign.ts。

路由规则

当用户要求“做一个好看的设计”/“设计点什么”但没有指明具体路径时：

  • 默认使用 DirectDesign 处理简短、临时性、代码库内的工作——追求速度和上下文内迭代。
  • 使用原生 CLI (/design-sync) 当任务是同步真实代码库的设计系统或执行代码绑定的设计工作，且这些命令可用时。
  • 仅在明确需要可视化 Web 画布审查时才使用 ClaudeDesign（路径 3），并记住它需要一次性登录且未经证实。

集成感知操作（关键）

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

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

当独立使用进行绿地设计时，技能会生成一个自包含的原型，并可选择搭建一个新应用。

自定义设置

用户特定的设计偏好（调色板、排版、间距网格、动画时序、框架默认值）存放在：

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # 设计令牌、首选框架
├── README.md
└── EXTEND.yaml

如果存在 PREFERENCES.md，技能会读取它并将这些令牌传递给 Claude Design 的简报以及任何下游交接包。如果没有自定义层，技能默认使用 Claude Design 自身的系统提取输出。

工作流路由

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

正在 **Webdesign** 技能中运行 **工作流名称**...
工作流触发条件文件
DirectDesign (路径 1 — 默认，{{DA_NAME}} 内联编写)“做一个好看的设计”、“直接设计这个”、“你自己设计”、“设计点酷的”、“前端美学”、“粗野/编辑/复古/极繁 UI”、任何不包含“原型”/“模型”/“claude design”的简短临时设计请求Workflows/DirectDesign.md
NativeDesignSync (路径 2 — 代码工作首选)“/design”、“/design-sync”、“设计同步”、“同步设计系统”、“将设计系统提取到 Claude Design”、“将代码推回 Claude Design”、“原生设计命令”Workflows/NativeDesignSync.md
CreatePrototype (路径 3 — 实验性，驱动 claude.ai/design)“设计一个原型”、“创建原型”、“模型”、“构建一个设计”、“claude design”、“使用 claude.ai/design”Workflows/CreatePrototype.md
ExtractDesignSystem (路径 3)“提取设计系统”、“从中提取令牌”、“提取品牌”Workflows/ExtractDesignSystem.md
RefinePrototype (路径 3)“迭代”、“优化”、“调整间距”、“更改颜色”Workflows/RefinePrototype.md
WebsiteToRedesign (路径 3)“重新设计这个站点”、“重建此 URL”、“现代化”Workflows/WebsiteToRedesign.md
ExportToCode (路径 3 备选方案 —— 优先使用 /design-sync)“导出到代码”、“交付到代码”、“发送到 Claude Code”、“处理交接”Workflows/ExportToCode.md
IntegrateIntoApp (路径 3 备选方案 —— 优先使用 /design-sync)“将其集成到”、“修补到应用中”、“落地到现有代码库”Workflows/IntegrateIntoApp.md
DeployDesign (路径 3)“部署设计”、“发布到生产环境”Workflows/DeployDesign.md

对于代码绑定工作（导出、集成、设计系统提取/同步），优先使用路径 2（NativeDesignSync → /design-sync）。上述路径 3 的交接包工作流作为文档化的备选方案保留，用于在 Web 画布上工作时使用，但它们未经证实且需要测试配置文件的登录。

前提条件（预检）

路径 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 上 GA。/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 导出是可编辑的。 如果用户希望非开发者（市场人员、创始人）优化设计，请通过 Workflows/ExportToCode.md 并使用 --format canva 选项进行路由。
  • 无实时协作。 Claude Design 不支持像 Figma 那样的多人编辑。通过 URL 导出分享以进行异步审查。
  • Enterprise 门槛。 企业账户需要管理员在组织设置中启用 Claude Design，调色板图标才会出现在 claude.ai 中。
  • 会话配额。 Claude Design 的生成过程消耗大量令牌。截至 2026 年 6 月更新，其使用量与 claude.ai 聊天、Claude Code 和 Cowork 共享同一个配额池——不再单独计算。Pro 计划对于持续的设计工作来说较为有限；推荐使用 Max 计划。
  • 设计系统先行是降低令牌消耗的关键。 最大的令牌消耗源是在每次生成时重新推断你的品牌风格，然后进行纠正。运行 ExtractDesignSystem 一次，使系统成为一个固定的可重用参考；后续每次生成都会重用它，而不是重新猜测。更少的纠正循环 = 在整个项目生命周期中显著减少令牌消耗。这是应对配额消耗最具杠杆作用的举措。
  • 输出保真度 ≠ 生产就绪。 Claude Design 能产生精美的视觉效果，但交接的代码通常需要经过验证和无障碍性检查。集成后请运行 Tools/VerifyDesign.ts。
  • Vision 不会猜测。 如果提示未指定响应式断点、对比度要求或深色模式行为，Claude Design 会选择可能不匹配目标应用的默认值。请在简报中明确说明。

示例

示例 1：根据需求描述创建原型

用户：“为一个 AI 安全初创公司设计一个定价页面——编辑美学，仅深色模式”
→ 调用 CreatePrototype 工作流
→ 预检：Interceptor + 已登录的 claude.ai 会话
→ 组合包含明确美学、约束和差异化的简报
→ 通过工具驱动 claude.ai/design

…

[为翻译而截断]

相关技能

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community