mc-skills/catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
catalog/repos/0xdesign--design-plugin.md

5.3 KiB
Raw Blame History

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 制作