gg-skills/claude-designer

# Claude 设计师 一个用于使用 **Claude Design**（https://claude.ai/design）的 Claude 技能——Anthropic Labs 的研究预览网页工具，用于原型、幻灯片、微站点和演示——通过 Claude 代理。 该技能教导一个新代理如何端到端地操作 Claude Design：选择正确的项目类型、编写良好的提示、通过 Chrome MCP 驱动画布、通过聊天/评论/调整/编辑进行迭代、选择正确的导出方式，以及处理研究预览的粗糙边缘。 ## 安装 最快的跨代理安装路径是 `skills` CLI： ``` npx skills add gg-skills/claude-designer ``` 将此技能作为 Git 子模块添加到工作区以使用固定版本，或作为普通克隆以使用最新的 `main`： ``` # 项目本地，版本锁定： git submodule add git@github.com:gg-skills/claude-designer.git .claude/skills/claude-designer # 或项目本地，最新主分支： mkdir -p .claude/skills git -C .claude/skills clone git@github.com:gg-skills/claude-designer.git # 或用户级，在此机器上的每个项目中都可用： mkdir -p ~/.claude/skills git -C ~/.claude/skills clone git@github.com:gg-skills/claude-designer.git ``` 安装后，重新启动代理或重新加载技能。查看父级 [`skills` 目录仓库](https://github.com/gg-skills/skills) 以获取完整目录。 ## 何时使用 当用户： - 要求一个可分享和导出的 UI 模拟、原型、着陆页、仪表板、微站点、注册流程或设置屏幕。 - 提到 **"Claude Design"**。 - 希望输出通过 **设计系统继承** 与他们的品牌匹配。 - 需要可导出为 PPTX 或传递给 Canva 的幻灯片。 - 希望进行 **视觉迭代**，包括内联评论、画布上的调整或直接属性编辑。 - 希望将设计交给 Claude Code 进行实现。 - 询问如何 **设置一个组织范围内的设计系统**。 - 遇到 Claude Design 问题（消失的评论、保存错误、“聊天上游错误”）。 当用户希望在聊天中获取单个一次性视觉（纯 Artifacts 更好）或询问没有具体 Claude Design 任务的通用设计理论时，请跳过。 ## 操作方式 ### 输入 | 输入 | 来自哪里 | |---|---| | 用户的设计概述 | 对话文本；通过 `build-prompt.ts` 结构化 | | 品牌资产（标志、截图、产品照片） | 用户在 Claude Design 中首次提示之前附加的文件 | | 设计系统令牌 | 在 https://claude.ai/design 配置的组织级设计系统 | | 代码库/组件库 | 附加的子目录（不是整个 monorepo——见注意事项） | | 兄弟项目名称 | 在提示中命名以继承跨项目的视觉上下文 | | Chrome MCP 连接 | `mcp__Claude_in_Chrome__list_connected_browsers` → 用户选择哪个浏览器选项卡 | | `SKILL.md` + `references/*.md` | 代理按需读取；无需环境变量 | 不需要环境变量。脚本仅使用 Node 内置的 `process.argv` —— 无 `.env`、无秘密、无网络调用。 ### 输出 | 输出 | 路径/格式 | 备注 | |---|---|---| | 组装好的提示文本 | `stdout`（纯文本或 `--json`）来自 `build-prompt.ts` | 传递给 Claude Design 的聊天输入 | | 提示分数/差距报告 | `validate-prompt.ts` 的 `stdout` | 列出缺失的四部分公式组件 | | 项目类型推荐 | `pick-project-type.ts` 的 `stdout` | 其中之一：原型（高保真/线框）、幻灯片、从模板、其他 | | 导出格式推荐 | `pick-export.ts` 的 `stdout` | 其中之一：PDF、PPTX、.zip、独立 HTML、Canva、Claude Code 交接 | | 模型推荐 | `pick-model.ts` 的 `stdout` | 初始生成：Opus 4.7；迭代：Sonnet/Haiku | | 错误分类 | `triage-error.ts` 的 `stdout` | 从 `references/known-issues.md` 匹配的解决方案 | | DOM 探测结果 | 来自 Chrome MCP `javascript_tool` 的 JSON | 页面状态：文件树、运行指示器、共享菜单项、模型列表 | | 设计文件 | Claude Design 项目（浏览器） | Claude Design 在画布上编写的 `.html` 页面和 `.jsx` 组件 | | 导出工件 | 用户的下载文件夹（用户必须批准） | `.zip` (~5–50 KB，即时），PDF/HTML (~5–10 分钟子生成)，PPTX | ### 外部命令和 MCP 代理按顺序调用这些命令——本地脚本首先，Chrome MCP 用于 UI 操作，没有其他网络调用： | 命令 | 目的 | |---|---| | `npx tsx scripts/build-prompt.ts --goal … --layout … --content … --audience …` | 组装一个良好的四部分提示 | | `npx tsx scripts/validate-prompt.ts ""` | 评分用户提供的提示；在提交之前显示差距 | | `npx tsx scripts/pick-project-type.ts --deliverable "…"` | 推荐选择器选项卡 | | `npx tsx scripts/pick-export.ts --recipient "…" --intent "…"` | 推荐共享菜单导出 | | `npx tsx scripts/pick-model.ts --phase iterate --complexity simple --cost low` | 根据阶段推荐模型 | | `npx tsx scripts/triage-error.ts ""` | 匹配症状 → 在询问用户之前提供已记录的解决方案 | | `npx tsx scripts/chrome-snippets.ts get ` | 获取一个命名的 JS 片段以进行注入 | | `mcp__Claude_in_Chrome__javascript_tool` | 在连接的浏览器选项卡中执行 JS 片段 | | `mcp__Claude_in_Chrome__navigate` | 打开 https://claude.ai/design（或项目 URL） | | `mcp__Claude_in_Chrome__find` / `form_input` / `shortcuts_execute` | 在聊天输入中键入；使用 `⌘+Return` 提交 | | `mcp__Claude_in_Chrome__read_page` / `get_page_text` | 读取画布或项目状态 | 所有 TypeScript 脚本都是纯逻辑——它们接受 CLI 输入，运行决策树，并输出 JSON 或可读文本。没有网络，脚本内部没有 Chrome MCP 调用。 ### 副作用 - **浏览器导航：** 代理在连接的 Chrome 选项卡中打开并驱动 Claude Design 网页应用。用户必须在 claude.ai 上打开并登录。 - **画布写入：** Claude Design 在每次生成时将 `.html` 页面和 `.jsx` 组件写入项目。这些位于 Claude Design 的云存储中，而不是本地文件系统。 - **下载：** 代理必须在用户批准之前请求下载。用户点击“下载项目为 .zip”或批准导出；文件将落在浏览器默认的下载文件夹中。 - **共享/访问更改：** 代理永远不会自主切换访问控制或共享权限。首先与用户确认。 - **模型选择器：** 代理可以通过 `chrome-snippets.ts get list-models` 读取模型下拉菜单，但不会在没有用户意识的情况下切换模型。 ### 模式切换 | 标志 | 影响 | |---|---| | `--json`（任何脚本） | 可解析的 JSON 而不是可读文本 | | `--variations one` | `build-prompt.ts` 追加 "Just give me a single design — no variations." | | `--design-system off` | 从组装的提示中省略设计系统令牌行 | | `--mode dark` | 将深色模式美学添加到提示 | | `--device mobile` | 追加移动宽度约束 | ## 操作流程 ``` flowchart TD A([User request]) --> B{Trigger check\nSKILL.md} B -- skip --> Z([Use plain Artifacts]) B -- trigger --> C[Verify facts\nWebSearch any named product/version] C --> D[Gather brand assets\nlogo · screenshots · design tokens] D --> E[Check Chrome MCP\nlist_connected_browsers\nnavigate to claude.ai/design] E --> F[pick-project-type.ts\nPrototype · Deck · Template · Other] F --> G[build-prompt.ts\ngoal · layout · content · audience] G --> H[validate-prompt.ts\nfour-part score · gap report] H -- gaps found --> G H -- valid --> I[Submit to Claude Design\nChrome MCP form_input\nsubmit with Cmd+Return] I --> J[Poll generation\nchrome-snippets.ts get is-generation-running\njavascript_tool loop] J -- still running --> J J -- done --> K[Verify output\ncheck Design Files panel\nopen standalone HTML in browser] K -- errors / blank canvas --> L[triage-error.ts symptom\nworkaround from known-issues.md] L --> M{Iterate?} K -- ok --> M M -- Chat / Tweaks / Edit --> I M -- export --> N[pick-export.ts\nrecipient · intent] N --> O[User approves export\nDownload · PDF · PPTX · Canva · Claude Code] O --> P([Artifact delivered]) ``` ## 布局 ``` . ├── SKILL.md ← entry point, with YAML frontmatter ├── references/ ← topic docs the skill loads on demand │ ├── overview.md ← what Claude Design is, who it's for, models │ ├── ui-and-workflows.md ← picker, project view, every project type │ ├── prompting-and-iteration.md ← Chat vs. Comments vs. Tweaks vs. Edit │ ├── exports-and-sharing.md ← Share menu, three export categories │ ├── design-systems-and-pricing.md ← design system setup, plan allowances │ ├── known-issues.md ← research-preview bugs and workarounds │ ├── canvas-reference.md ← every UI control catalogued │ ├── export-decision-guide.md ← pick the right export format │ └── prompt-templates.md ← reusable prompts by use case └── scripts/ ← TypeScript helpers for agentic use ├── README.md ├── build-prompt.ts ← assemble a well-formed prompt ├── validate-prompt.ts ← score a prompt against the four-part formula ├── pick-project-type.ts ← Prototype / Slide deck / Template / Other ├── pick-export.ts ← which Share-menu option, given recipient ├── pick-model.ts ← which Claude model, given task phase ├── triage-error.ts ← symptom → documented workaround └── chrome-snippets.ts ← JS to inject via Chrome MCP javascript_tool ``` ## 快速入门 ``` # 克隆技能 git clone https://github.com/gg-skills/claude-designer.git ~/.claude/skills/claude-designer # 为仪表板组装提示（纯本地，无需 Chrome） npx tsx ~/.claude/skills/claude-designer/scripts/build-prompt.ts \ --goal "executive dashboard" \ --layout "3-col KPI strip on top, chart row below, table at the bottom" \ --content "MRR, churn rate, NPS — each as a card with sparkline + delta" \ --audience "CEO weekly review" \ --dimensions "1440x900" \ --palette "minimal monochrome with one warm accent" \ --variations one # 验证用户已编写的提示 npx tsx ~/.claude/skills/claude-designer/scripts/validate-prompt.ts "Make me a dashboard" # 设计批准后选择正确的导出 npx tsx ~/.claude/skills/claude-designer/scripts/pick-export.ts \ --recipient "CEO" --intent "sign-off" ``` 有关完整的脚本清单和示例，请参阅 [scripts/README.md](./scripts/README.md). ## 资源 - [Claude Design](https://claude.ai/design) — 工具本身 - [references/overview.md](./references/overview.md) — 模型、计划、与 Artifacts 的区别 - [references/ui-and-workflows.md](./references/ui-and-workflows.md) — 选择器、画布、每个项目类型 - [references/prompting-and-iteration.md](./references/prompting-and-iteration.md) — 四部分公式、四种迭代模式 - [references/exports-and-sharing.md](./references/exports-and-sharing.md) — 每个共享菜单项 - [references/known-issues.md](./references/known-issues.md) — 研究预览错误和已确认的解决方案 - [scripts/README.md](./scripts/README.md) — 所有 TypeScript 辅助工具和示例 ## 注意事项 - **研究预览。** Claude Design 处于研究预览阶段。UI 表面、模型列表和导出选项将发生变化。在依赖特定细节之前，请重新验证。 - **Cmd+Return 提交。** 纯 Return 插入换行符。该技能对此有特殊要求。 - **三种“导出”类别。** `Download project as .zip` 是即时下载 (~5–50 KB)。`Export as PDF` 和 `Export as standalone HTML` 是子 Claude 生成，需要 5–10 分钟，并在项目中生成新文件。`Send to Canva` 和 `Handoff to Claude Code` 推送到外部工具。 - **跨项目上下文。** 在提示中提及兄弟项目名称，Claude Design 将读取其文件以保持视觉一致性。未记录，但可靠。 - **Monorepos。** 仅附加组件库或设计-tokens 子目录——链接整个 monorepo 会导致浏览器卡顿或挂起。 - **Cowork 安全规则适用** 当代理代表用户操作 Claude Design 时：下载需要明确用户批准，共享/访问更改是禁止的。 ## 已验证的内容 该技能是通过实际操作实时工具构建的，然后在涵盖基于聊天迭代、基于调整迭代、兄弟项目上下文继承和 `.zip` 导出的四个真实 Claude Design 项目中进行测试。该练习的结果被反馈到技能中——请参阅提交历史。 ## 许可证和归属 MIT —— 请参阅 [LICENSE](./LICENSE). 工艺层的大部分内容（事实核查、设计原则、品牌资产协议、渲染后验证、命名设计样式）改编自 [jiji262/claude-design-skill](https://github.com/jiji262/claude-design-skill)（也是 MIT）。每个改编文件都包含一个内联归属页脚；完整的映射在 [ATTRIBUTIONS.md](./ATTRIBUTIONS.md). ## 原产地 在 2026-04-26 上针对 Claude Design v(research preview)、模型 Claude Opus 4.7（默认）/ Sonnet 4.6 / Haiku 4.5 / 及更早版本进行构建和验证。与 [references/overview.md](./references/overview.md) 中链接的官方帮助中心文章进行了交叉检查。 欢迎提出问题、修复和提示模式贡献。

标签：Chrome 扩展, Git 版本控制, MITM代理, 交互设计, 人工智能, 代码实现, 原型设计, 后端开发, 品牌设计, 导出功能, 微站, 技术支持, 技能使用, 技能安装, 技能插件, 演示文稿, 用户体验, 用户模式Hook绕过, 用户界面, 设计协作, 设计工具, 设计系统, 迭代模式, 问题排查