design-plugin
一款通过快速迭代生成和优化UI设计的Claude Code插件。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design-plugin。 它的用途是：一款通过快速迭代生成和优化UI设计的Claude Code插件。 完整的 Skill 内容见：https://321skill.com/skills/design-plugin/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘/design-and-refine:start UserProfileCard’，它会首先分析你的项目框架和样式系统，然后通过几个问题了解你的设计意图，随后生成5个不同的用户卡片UI变体。你可以在本地打开‘/__design_lab’页面并排查看它们，点击元素添加反馈，告诉AI你喜欢哪个版本的布局和配色，AI会综合你的反馈生成一个更优的合成版本，如此反复直到你满意为止。
介绍
Design and Refine 是一款专为Claude Code设计的插件，它解决了开发者在UI设计决策中反复猜测、效率低下的核心痛点。它通过AI生成多个真实的、可工作的UI代码变体，帮助开发者快速探索不同设计方案，从而做出更自信的设计决策。
使用该插件时，开发者只需通过简单的命令启动设计会话。插件会自动分析项目框架（如Next.js、Vite）和样式系统（如Tailwind、MUI），并读取现有的设计令牌。随后，它会通过对话了解设计目标，并生成5个在信息层级、布局、密度和交互模式上各不相同的UI变体。开发者可以在本地开发服务器的专属页面（/__design_lab）上并排查看所有方案，并通过交互式反馈工具（类似Figma）或直接描述来提供偏好反馈，插件会根据反馈综合出新的优化版本，实现快速迭代。
该工具非常适合前端开发者、全栈工程师以及需要快速原型验证的产品经理。无论是从零开始设计一个新组件，还是对现有界面进行重设计，当开发者不确定最佳方案或需要向利益相关者展示具体选项时，这个插件都能显著提升效率。
与同类AI设计工具相比，它的核心优势在于深度集成到开发工作流中。它不是生成静态图片或脱离上下文的代码片段，而是直接在开发者的代码库中生成真实、可运行的组件代码，并智能地复用项目已有的设计系统（如Tailwind配置、CSS变量），确保产出与项目风格一致，且能无缝集成。
核心特点
深度集成开发工作流，直接生成符合项目现有设计系统的真实、可运行代码，而非脱离上下文的图片或代码片段；提供交互式反馈和并排对比功能，支持类似Figma的精准评论，实现真正的快速迭代。
注意事项
不适合需要高度定制化艺术设计或完全脱离现有设计系统的全新视觉语言创作场景。
常见问题
Design and Refine 支持哪些前端框架？
支持 Next.js、Vite、Remix、Astro、Create React App 等主流框架。
它和直接用Figma设计有什么区别？
它直接在代码库中生成可运行的真实组件，能智能复用项目设计系统，并支持在浏览器中实时对比和迭代，设计结果可直接用于开发，减少了从设计稿到代码的转换环节。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-plugin/raw/index.md 读取 design-plugin 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-plugin/raw/index.md（查看排版版本）