Repolode
提交项目
educlopez

educlopez/ui-craft

为 AI 编程助手提供设计工程知识与 CLI，让其生成可直接上线的高质量界面。

在 GitHub 查看官网
Star
435
Fork
23
未关闭 Issue
3
最近提交
24小时前

这是什么？

UI Craft 是面向 AI 编程助手的设计工程体系，把一套有明确取向的界面设计规则、用于构建、评审和打磨界面的斜杠命令，以及识别常见 AI 生成界面痕迹（如紫色渐变、弹跳缓动、整齐雷同的卡片网格）的确定性检查打包在一起。它与技术栈无关，可适配 Tailwind、CSS Modules、styled-components、原生 CSS 以及单文件组件样式。

安装方式包括跨平台 Go 命令行工具（`ui-craft install`）、Claude Code 插件、Cursor 插件，以及基于 Agent Skills 规范的通用安装。CLI 会把技能、命令、MCP 质量门禁和评审代理写入各工具的原生配置，并在写入前备份、失败时回滚。仪表盘、落地页、登录页等界面可通过命名的构图方案和验收清单来引导完成。

配套的 `ui-craft-detect` 是零依赖扫描器，内置 43 条规则，覆盖反模式、无障碍、表单和占位文案等问题。它可以扫描本地源码、线上页面，或只检查变更行，也能为 Claude Code 和 Cursor 安装编辑时钩子，并配置 pre-commit 与 GitHub Actions 工作流。

核心功能

  • 01设计规则引导 AI 助手建立视觉层级、克制动效并使用项目自定义的设计令牌。
  • 02提供斜杠命令，用于构建、评审、打磨和动效化单个界面。
  • 03为仪表盘、落地页和登录页提供命名构图方案和交付前验收清单。
  • 04跨工具安装器支持 Claude Code、Cursor、Codex、Gemini 和 OpenCode，安装前自动备份并可回滚。
  • 05零依赖检测器包含 43 条反模式、无障碍和文案规则，可用于 CI 或 git 钩子。

适用场景

  • 让 AI 编程助手一次生成可直接上线的仪表盘或营销页面。
  • 在合并前检查现有前端代码中的通用 AI 设计痕迹和无障碍问题。
  • 在 CI 中仅针对本次变更引入的 UI 反模式阻止合并。
  • 通过持久化的设计简报和设计令牌，在多次会话中保持设计决策一致。

快速上手

  1. 1

    用 Homebrew 安装 ui-craft CLI（macOS）

    brew install --cask educlopez/tap/ui-craft
  2. 2

    运行 README 中适用于你系统的官方安装脚本（macOS/Linux 或 Windows）

  3. 3

    检测你的 AI 编码工具并配置技能、命令和质量门禁

    ui-craft install
  4. 4

    在你的智能体中使用 craft 命令请求生成界面

使用前须知

  • macOS Intel 版本已构建发布，但从未经过测试。
  • Linux arm64 和 Windows arm64 版本已构建，但 CI 中未实际运行。

收录于专题

Claude Code 和 Codex 技能包AI 编程智能体的 UI 设计技能Claude Code 工具、技能与插件AI 编程助手与编码 AgentAI Agent 技能包前端框架与界面组件

标签

#agent-skills#design-system#frontend#css#claude-code#cursor#accessibility#ui-review#anti-slop#codex

常见问题

ui-craft 是什么？
为 AI 编程助手提供设计工程知识与 CLI，让其生成可直接上线的高质量界面。 UI Craft 是面向 AI 编程助手的设计工程体系，把一套有明确取向的界面设计规则、用于构建、评审和打磨界面的斜杠命令，以及识别常见 AI 生成界面痕迹（如紫色渐变、弹跳缓动、整齐雷同的卡片网格）的确定性检查打包在一起。它与技术栈无关，可适配 Tailwind、CSS Modules、styled-components、原生 CSS 以及单文件组件样式。
ui-craft 可以免费使用吗？用的什么许可证？
ui-craft 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
ui-craft 还在维护吗？
活跃维护中。ui-craft 最近一次提交是在 2026年11月6日。
ui-craft 适合用来做什么？
让 AI 编程助手一次生成可直接上线的仪表盘或营销页面。 在合并前检查现有前端代码中的通用 AI 设计痕迹和无障碍问题。 在 CI 中仅针对本次变更引入的 UI 反模式阻止合并。 通过持久化的设计简报和设计令牌，在多次会话中保持设计决策一致。
ui-craft 怎么安装和运行？
用 Homebrew 安装 ui-craft CLI（macOS）: brew install --cask educlopez/tap/ui-craft 运行 README 中适用于你系统的官方安装脚本（macOS/Linux 或 Windows） 检测你的 AI 编码工具并配置技能、命令和质量门禁: ui-craft install 在你的智能体中使用 craft 命令请求生成界面
在哪里获取 ui-craft？
源代码和安装说明在 GitHub 上：https://github.com/educlopez/ui-craft

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目