179 lines
5.3 KiB
Markdown
179 lines
5.3 KiB
Markdown
# 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) 制作 |