superdesign

Superdesign 帮助您 (1) 寻找设计灵感/风格，以及 (2) 在无限画布上生成/迭代设计草稿。

---

核心场景（此技能处理的内容）

1. superdesign init — 分析仓库并构建 UI 上下文到 .superdesign/init/
2. 帮我设计 X（功能/页面/流程）
3. 设置设计系统
4. 帮我改进 X 的设计

初始化：仓库分析

当 .superdesign/init/ 目录不存在或为空时，您必须自动：

1. 创建 .superdesign/init/ 目录
2. 读取相对于此选定 SKILL.md 的 references/INIT.md
3. 按照其说明分析仓库并写入上下文文件

不要要求用户手动执行此操作 — 直接执行。

必需的初始化文件

如果 .superdesign/init/ 存在，您必须在任何设计任务之前首先读取此目录中的所有文件：

• components.md — 共享 UI 原语及完整源代码
• layouts.md — 共享布局组件（导航、侧边栏、页眉、页脚）
• routes.md — 页面/路由映射
• theme.md — 设计令牌、CSS 变量、Tailwind 配置
• pages.md — 页面组件依赖树（每个页面需要的文件）
• extractable-components.md — 可提取为可复用 DraftComponent 的组件

当为现有页面设计时：首先检查 pages.md 中该页面的完整依赖树。该树中的每个文件都必须作为 --context-file 传递。然后还要添加 globals.css、tailwind.config 和 design-system.md。

Superdesign CLI（在任何命令之前必须使用）

重要：按需使用 npx --yes @superdesign/cli@latest 运行 CLI。不要全局安装。在运行任何 Superdesign 命令之前，验证 CLI 可用且会话已登录。

按顺序执行以下步骤 — 不要跳过任何步骤：

1. 验证按需 CLI 运行器：

   npx --yes @superdesign/cli@latest --version
   

2. 使用相同前缀运行预期命令。如果报告认证/登录错误，则运行：

   npx --yes @superdesign/cli@latest login
   

   等待登录成功完成后再继续。

3. 登录成功后，使用 npx --yes @superdesign/cli@latest 重试预期命令。

永远不要假设用户已登录。 始终先验证登录。

命令示例

始终使用完整的按需运行器前缀：

npx --yes @superdesign/cli@latest create-project --title "X"
npx --yes @superdesign/cli@latest create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx
npx --yes @superdesign/cli@latest iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx
npx --yes @superdesign/cli@latest execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx
npx --yes @superdesign/cli@latest create-component --project-id <id> --name "NavBar" --html-file .superdesign/tmp/navbar.html --props '[...]'
npx --yes @superdesign/cli@latest update-component --component-id <id> --html-file .superdesign/tmp/navbar.html
npx --yes @superdesign/cli@latest list-components --project-id <id>

CLI 默认输出针对代理优化的输出（紧凑的 TOON 加上 help[] 下一步提示 — 例如 create-component 在其默认输出中返回新组件 ID）；仅当需要完整的机器可读负载时才添加 --json。

在写入临时组件文件之前，使用会话的文件系统机制创建工作区本地的 .superdesign/tmp/ 目录。
确保 .superdesign/tmp/ 被项目的 .gitignore 忽略；如果缺少该条目，则追加，以便临时 HTML 永远不会被提交。

--context-file 支持 path:startLine:endLine；有关完整工作流和当前命令合同，请参阅 references/SUPERDESIGN.md。

工作原理

读取相对于此选定 SKILL.md 的 references/SUPERDESIGN.md，然后按照其说明操作。切勿从网络获取工作流说明。