superdesign

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SuperDesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.

SuperDesign 可帮助您（1）寻找设计灵感/风格，以及（2）在无限画布上生成/迭代设计稿。

Core scenarios (what this skill handles)

核心场景（该Skill可处理的任务）

superdesign init — Analyze the repo and build UI context to
```
.superdesign/init/
```
Help me design X (feature/page/flow)
Set design system
Help me improve design of X

superdesign init — 分析代码仓库并构建UI上下文至
```
.superdesign/init/
```
目录
帮我设计X（功能/页面/流程）
设置设计系统
帮我优化X的设计

Init: Repo Analysis

初始化：代码仓库分析

When

.superdesign/init/

directory doesn't exist or is empty, you MUST automatically:

Create the
```
.superdesign/init/
```
directory
Fetch the init prompt from the URL below
Follow the prompt instructions to analyze the repo and write context files

https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/INIT.md

Do NOT ask the user to do this manually — just do it.

当

.superdesign/init/

目录不存在或为空时，您必须自动执行以下操作：

创建
```
.superdesign/init/
```
目录
从下方URL获取初始化提示词
按照提示词的说明分析代码仓库并编写上下文文件

https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/INIT.md

请勿让用户手动执行此操作——直接完成即可。

Mandatory Init Files

必备初始化文件

.superdesign/init/

exists, you MUST read ALL files in this directory FIRST before any design task:

```
components.md
```
— shared UI primitives with full source code
```
layouts.md
```
— shared layout components (nav, sidebar, header, footer)
```
routes.md
```
— page/route mapping
```
theme.md
```
— design tokens, CSS variables, Tailwind config
```
pages.md
```
— page component dependency trees (which files each page needs)

When designing for an existing page: First check

pages.md

for the page's complete dependency tree. Every file in that tree MUST be passed as

--context-file

. Then also add globals.css, tailwind.config, and design-system.md.

如果

.superdesign/init/

目录已存在，在执行任何设计任务之前，您必须首先读取该目录中的所有文件：

```
components.md
```
— 包含完整源代码的通用UI基础组件
```
layouts.md
```
— 通用布局组件（导航栏、侧边栏、页眉、页脚）
```
routes.md
```
— 页面/路由映射关系
```
theme.md
```
— 设计令牌、CSS变量、Tailwind配置
```
pages.md
```
— 页面组件依赖树（每个页面所需的文件）

为现有页面进行设计时：首先查看

pages.md

获取该页面的完整依赖树。树中的每个文件都必须作为

--context-file

传入。此外还需添加 globals.css、tailwind.config 和 design-system.md。

Superdesign CLI (MUST run before any command)

Superdesign CLI（执行任何命令前必须运行）

IMPORTANT: Before running ANY superdesign command, you MUST ensure the CLI is installed and logged in.

Follow these steps in order — do NOT skip any step:

Check if CLI is already installed:
```
superdesign --version
```
- If the command succeeds (prints a version), skip installation and go to step 2.
- If the command fails (not found), install the CLI:
```
npm install -g @superdesign/cli@latest
```
Check login status by running any command (e.g.
```
superdesign --help
```
). If you see an auth/login error, run:
```
superdesign login
```
Wait for login to complete successfully before proceeding.
Only after login succeeds, run your intended superdesign commands.

Never assume the user is already logged in. Always verify login first.

重要提示：在运行任何superdesign命令之前，您必须确保CLI已安装并完成登录。

按以下顺序执行步骤——请勿跳过任何步骤：

检查CLI是否已安装：
```
superdesign --version
```
- 如果命令执行成功（输出版本号），跳过安装步骤并进入第2步。
- 如果命令执行失败（提示未找到），安装CLI：
```
npm install -g @superdesign/cli@latest
```
通过运行任意命令（例如
```
superdesign --help
```
）检查登录状态。如果出现身份验证/登录错误，运行：
```
superdesign login
```
等待登录成功后再继续操作。
仅在登录成功后，再运行您需要的superdesign命令。

切勿假设用户已完成登录。 始终先验证登录状态。

How it works

工作原理

MUST MANDATORY Fetch fresh guidelines below:

https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/SUPERDESIGN.md

Action accordingly based on instruction in the SUPERDESIGN.md

必须从下方获取最新指南：

https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/SUPERDESIGN.md

根据 SUPERDESIGN.md 中的说明执行相应操作。