# UI设计快速迭代插件

`Claude Code` `UI设计` `组件生成` `设计系统` `前端工具`

# 设计与精炼

一款 Claude Code 插件，通过快速迭代帮助你自信地做出 UI 设计决策。

## 功能介绍

设计与精炼可以为任意组件或页面生成多个差异化的 UI 变体，让你在浏览器中并排对比，收集你对每个方案的反馈，并综合生成精炼版本——如此循环，直到你对结果满意为止。

无需在设计上反复猜测或来回修改，你可以直接看到真实选项，选出有效方案，快速迭代。

## 适用场景

- **新建组件或页面** — 在确定方向前探索不同思路
- **重新设计现有 UI** — 查看当前方案的替代选项
- **设计方向陷入困境** — 在没有明确想法时生成备选方案
- **获取利益相关方认可** — 用具体变体替代口头描述
- **学习什么有效** — 在实际代码库中感受不同布局、密度和设计模式的效果

## 使用理由

1. **使用你现有的设计系统** — 自动从 Tailwind 配置、CSS 变量或组件库中推断颜色、字体、间距
2. **生成真实代码** — 不是线框图，而是在你的框架中实际可运行的组件
3. **并排对比** — 在开发服务器的 `/__design_lab` 路径查看所有变体
4. **迭代精炼** — 告诉它你喜欢每个方案的哪些地方，获得综合版本
5. **干净交付** — 完成后输出 `DESIGN_PLAN.md`，包含实现步骤
6. **不留痕迹** — 自动清理所有临时文件

---

## 安装配置

### 1. 添加插件市场

在 Claude Code 中运行：

```
/plugin marketplace add 0xdesign/design-plugin
```

### 2. 安装插件

```
/plugin install design-and-refine@design-plugins
```

完成。插件现在可在任意项目中使用。

---

## 使用方法

### 开始会话

```
/design-and-refine:start
```

或指定目标：

```
/design-and-refine:start ProfileCard
```

### 后续流程

1. **预检** — 检测你的框架（Next.js、Vite 等）和样式系统（Tailwind、MUI 等）

2. **样式推断** — 从 Tailwind 配置、CSS 变量或主题文件中读取现有设计令牌

3. **访谈** — 询问以下内容：
   - 你在设计什么（组件还是页面，新建还是重设计）
   - 痛点及需要改进的地方
   - 视觉与交互灵感
   - 目标用户和核心任务

4. **生成** — 创建 5 个差异化变体，探索不同的：
   - 信息层级
   - 布局模型（卡片、列表、表格、分栏）
   - 密度（紧凑 vs 宽松）
   - 交互模式（弹窗、内联、抽屉）
   - 视觉表现

5. **预览** — 打开 `http://localhost:3000/__design_lab`（或你的开发服务器端口）并排查看所有变体

6. **反馈** — 使用交互式反馈浮层或直接描述你的喜好：
   - 点击 **"添加反馈"** 进入反馈模式
   - 点击任意元素留下评论（类似 Figma 风格）
   - 点击 **"提交反馈"** 复制到剪贴板，再粘贴到终端
   - 或直接在聊天中描述你喜欢每个变体的哪些地方

7. **迭代** — 重复上述过程，直到满意为止

8. **定稿** — 所有临时文件被删除，生成包含实现步骤的 `DESIGN_PLAN.md`

### 手动清理（如有需要）

```
/design-and-refine:cleanup
```

---

## 支持的框架

- Next.js（App Router 和 Pages Router）
- Vite（React、Vue）
- Remix
- Astro
- Create React App

## 支持的样式方案

- Tailwind CSS
- CSS Modules
- Material UI（MUI）
- Chakra UI
- Ant Design
- styled-components
- Emotion

---

## 交互式反馈

设计实验室包含类 Figma 风格的反馈浮层，支持精准评论：

1. **进入反馈模式** — 点击右下角的"💬 添加反馈"按钮
2. **点击任意元素** — 在点击位置附近弹出评论面板
3. **输入反馈** — 例如"把这个按钮做大一点"或"这个间距很好"
4. **保存** — 点击保存或按 ⌘+Enter
5. **继续添加** — 对不同变体的多个元素添加评论
6. **提交** — 填写"总体方向"并点击"提交反馈"
7. **粘贴** — 格式化后的反馈已复制到剪贴板，粘贴到终端即可

Claude 会收到包含元素选择器的结构化反馈，能精确知道你在指代哪些元素。

---

## 最佳实践

**访谈阶段尽量具体。** 关于痛点、目标用户和灵感来源提供的上下文越多，生成的变体就越有差异性、越实用。

**参考你欣赏的产品。** "像 Linear 那样的密度"或"像 Stripe 那样清晰"能给 Claude 明确的方向。

**不要在第一轮就将就。** 综合步骤才是精华所在——描述你喜欢每个变体的哪些地方，让它融合优点。

**保持开发服务器运行。** 插件不会自动启动（那样会造成阻塞），请在另一个终端中提前启动。

**查看 DESIGN_PLAN.md。** 定稿后，该文件包含实现步骤、组件 API、无障碍检查清单和测试指导。

---

## 临时生成的文件

会话期间：
- `.claude-design/` — 变体、预览、设计简报
- `app/__design_lab/` 或 `pages/__design_lab.tsx` — 对比路由

定稿或中止时，以上内容全部删除，不留任何痕迹。

## 永久生成的文件

定稿后：
- `DESIGN_PLAN.md` — 所选设计的实现计划
- `DESIGN_MEMORY.md` — 保存的样式决策（加速后续会话）

---

## 许可证

MIT

---

由 [0xdesigner](https://github.com/0xdesigner) 制作