ui-craft
为AI编码智能体注入设计品味，一键生成可直接上线的UI界面。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-craft。 它的用途是：为AI编码智能体注入设计品味，一键生成可直接上线的UI界面。 完整的 Skill 内容见：https://321skill.com/skills/ui-craft/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“/craft 一个包含用户增长图表、最近活动和待办事项的运营仪表盘，使用深色主题。” 它会引导你确认几个关键设计点（或使用默认值），然后生成一个布局清晰、视觉层次分明、通过了10项可用性验收的生产级仪表盘代码。或者，当你对AI直接生成的UI不满意时，可以说“/critique 这个登录页面的设计”，它会给出基于设计法则的具体改进建议。
介绍
UI Craft 旨在解决AI编码智能体普遍缺乏设计品味的问题，它不是一个模板库，而是一个设计工程系统。它能将模糊的UI需求（如“做一个仪表盘”）转化为符合生产级设计规范、经过严格验收的界面，避免生成那些充满渐变卡片和弹跳动画的“AI味”设计。
使用方式非常直接：安装后，只需向你的AI助手（如Claude、Cursor）发出 /craft 命令并描述想要的界面（如“/craft 用户管理后台”），UI Craft便会介入，通过几个关键问题（或使用其强大的默认值）来明确设计意图，然后生成一个必须通过包含10项可用性启发式法则等严格验收标准的界面。如果任何一项不达标，它会继续优化。
它非常适合希望快速获得高质量UI、但又缺乏专业设计资源或知识的前后端开发者、全栈开发者和产品经理。无论是构建内部工具、管理后台还是需要专业外观的MVP，都能从中受益。
建议新用户从 /start 命令开始，它会分析你的项目（框架、设计令牌、需求简报等），并为你推荐最适合的下一步。大多数用户停留在“零层”即可获得巨大提升，即安装后照常提出UI需求，但获得的结果质量截然不同。当需要更精细的控制或跨会话的一致性时，再探索更高的层级。
核心特点
核心区别在于其内置了一套可量化、可辩护的设计批判体系，基于尼尔森十大可用性原则和六大经典设计法则，为生成的UI提供带业务影响标签（如“阻碍转化”、“增加摩擦”）的评分卡，而不仅仅是提供组件或模板。
注意事项
不适合追求完全自由、不受任何设计规则约束的创意原型设计场景。
常见问题
UI Craft 和普通的组件库有什么区别？
它不是提供代码组件，而是提供设计规则和验收标准，指导AI如何组合和呈现元素，确保结果符合设计原则，避免AI的典型设计缺陷。
需要学习很多设计知识才能用吗？
完全不需要。安装后，你只需像往常一样向AI描述UI需求，UI Craft会在后台自动应用设计规则，让你零成本获得更好的结果。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-craft/raw/index.md 读取 ui-craft 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-craft/raw/index.md（查看排版版本）