mcpField
U
ui-craft

ui-craft

github.com/podo设计与 UI29234 次安装4 天前更新
代码仓库

关于 ui-craft

ui-craft 是一组面向 AI 编码 Agent 的设计技能，涵盖布局、排版、色彩、动效、无障碍和界面打磨。主技能可按构建、评审或审计任务分流，另有三种风格变体。

主要功能

  1. 01界面设计指导与项目令牌发现
  2. 02构建、动效、评审和审计分流
  3. 03极简、编辑式与仪表盘变体
  4. 04布局、排版、色彩和动效指导
  5. 05无障碍与界面打磨

适用场景

  1. 01按项目现有令牌构建界面
  2. 02评审或打磨界面
  3. 03制作编辑式或长篇页面
  4. 04设计数据密集型管理仪表盘

MCP 相关

Claude Code 插件安装方式会捆绑 ui-craft-mcp 质量门 MCP 服务。通过 skills CLI 安装时不包含该服务。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill ui-craft

安装后在 Claude Code 中输入/ui-craft确认已加载。

附带文件stub.yaml

详细介绍

ui-craft

目录占位条目 — 完整软件包：educlopez/ui-craft

决策树

  1. 是否已安装完整技能？ 此软件包会安装 4 个技能（ui-craft、ui-craft-minimal、ui-craft-editorial、ui-craft-dense-dashboard）；此处检查第一个。

    • 全局：f=~/.agents/skills/ui-craft/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/ui-craft/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已作为 ui-craft 安装，调用它并继续
    • pointer → 转到第 2 步

  2. 检测范围，然后安装：

    [ -e ~/.agents/skills/ui-craft ] && echo "global" || echo "project"

    全局：

    npx skills add educlopez/ui-craft --skill ui-craft ui-craft-minimal ui-craft-editorial ui-craft-dense-dashboard -g -y

    项目：

    npx skills add educlopez/ui-craft --skill ui-craft ui-craft-minimal ui-craft-editorial ui-craft-dense-dashboard -y

    Claude Code： 发送以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行命令。

Claude Code 插件方式：

/plugin marketplace add educlopez/ui-craft
/plugin install ui-craft@ui-craft

注意事项

  • 要求： 仅适用于插件方式：包含 ui-craft-mcp 质量门禁 MCP 服务，Claude Code 会通过 npx 启动它（下载并运行 npm 软件包）
  • 许可证： MIT

安装后调用

  • 技能名称：ui-craft、ui-craft-minimal、ui-craft-editorial、ui-craft-dense-dashboard
  • 触发短语："ui-craft"、"anti-slop"、"design engineering"、"slash commands for design"

功能说明

UI Craft 为 AI 编码 Agent 补足其欠缺的设计知识：提供的不是模板或组件库，而是有关布局、排版、颜色、动效、无障碍、仪表板、表格、着陆页、主题和润色的工艺规则，还包含一个探索步骤，会在构建前读取项目现有的设计令牌。主技能 ui-craft 会根据意图（构建、制作动画、审查、润色、审计）进行路由，并针对每个 UI 检查“有人会相信这是 AI 做出来的吗？”。三个变体会锁定某种风格的参数：ui-craft-minimal（简洁、留白充足，类似 Linear/Notion）、ui-craft-editorial（杂志和长篇内容）以及 ui-craft-dense-dashboard（数据密集型管理工具）。

skills CLI 方式仅安装技能及其变体。上游还提供独立的命令直通技能，名称通用（craft、critique、polish、audit、animate、brief、tokens 等）、Go CLI、审查 Agent 和 MCP 质量门禁服务（Claude Code 插件包含这些 Agent 和服务）。默认安装不会包含命令直通技能，因为它们的短名称可能与不相关的技能冲突（例如 animate）；如果需要，可在 --skill 后按名称添加。

不适用场景

  • 不涉及 UI 组件的后端、API 或数据任务
  • 只需要单个专用技能时（如需更轻量的体验，可考虑 taste-skill）

评论

支持 Markdown