educlopez/ui-craft

它解决的问题

UI Craft 解决了前端开发中的“AI 垃圾”问题，即 AI 编码代理经常生成通用、粗糙或视觉上不吸引人的用户界面。它为 AI 代理提供专业的设计知识、有主见的规则和验证工具，以确保生成的 UI 达到生产级质量，并遵循既定的设计法则和可用性启发式。

工作原理

UI Craft 作为一个设计工程系统，可以作为技能或通过 CLI 安装。它集成到 AI 编码工具（如 Cursor 或 Claude Code）中，引导代理通过一个结构化的设计成熟度“阶梯”：

• 第 0 级（询问）： 基本安装允许代理使用现有提示生成更好的 UI。
• 第 1 级（直接）： 提供特定的斜杠命令（例如 /craft、/polish、/animate）用于对特定表面进行聚焦处理。
• 第 2 级（持久化）： 通过存储在项目中的简报和令牌建立持久的设计上下文。
• 第 3 级（强制）： 实施质量门禁、审查代理和 CI 检查，以防止设计回归。

该系统使用发现阶段来分析现有项目风格，并采用“旋钮”（工艺级别、运动强度、视觉密度）来调整输出。它还包括一个基于 Nielsen 启发式和经典设计法则的确定性评分系统，以客观地评判 UI。

适用人群

它专为使用 AI 编码代理的开发者设计，他们希望交付高质量、设计师级别的用户界面，而无需每次迭代都依赖专业设计师。

亮点

• 确定性评判： 基于 10 条可用性启发式和 6 条设计法则生成可评分的记分卡。
• 跨工具支持： 兼容 Claude Code、Cursor、Codex、Gemini 和 OpenCode。
• 设计记忆： 使用 .ui-craft/ 在会话之间持久化设计简报和令牌。
• 质量门禁： 包括 MCP 门禁和 ui-craft-detect，用于 CI/CD 集成，确保 UI 不退化。
• 风格变体： 提供针对极简、编辑和密集仪表盘美学的专业预设。