mcpField
U
ui-craft

ui-craft

github.com/pedronauck设计与 UI647293 次安装1 周前更新
代码仓库

关于 ui-craft

UI Craft 是用于按项目设计规则、现有组件和运行时行为实施或审查界面改动的 Skill，提供无障碍、交互、视觉系统、文案和性能参考。

主要功能

  1. 01复用设计令牌和基础组件的指引
  2. 02无障碍及键盘焦点检查
  3. 03组件状态与交互模式参考
  4. 04文案、动效、暗色模式和性能参考
  5. 05用于对比度和令牌偏差检查的可选脚本

适用场景

  1. 01修改现有界面组件
  2. 02设计新的界面区域
  3. 03检查交互的无障碍表现
  4. 04审查视觉一致性和令牌使用

安装

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

$npx skills add https://github.com/pedronauck/skills --skill ui-craft

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/
pre-ship-checklist.md
state-matrix.md
ui-audit-template.md
references/
accessibility-floor.md
ai-slop-patterns.md
anti-defaults.md
archetypes.md
component-patterns.md
dark-mode.md
design-system-integration.md
human-ai-ux.md
microcopy-quality.md
motion-patterns.md
performance.md
usability-foundations.md
visual-craft.md
scripts/
check-contrast.mjs
detect-token-drift.mjs
validate-metadata.py

详细介绍

UI Craft

使用项目的视觉与文案规范、已发布的基础组件清单，以及真实的运行时行为。保留键盘/焦点操作、受支持的状态、有意义的标签、对比度、减少动态效果的设置，以及设计令牌的归属。

对于小幅修改，检查受影响的组件/状态，并复用现有决策。新界面或大幅改版可能需要简短说明用户任务、场景、语气或视觉调节项，前提是这些内容能解决实际设计选择；并非每次微调都需要产出这些内容。

  • 阅读相关的设计/令牌/文案规范。当生成的文档与运行时令牌不一致时，遵循项目的规范来源规则，并通过负责该规范的工具重新生成。
  • 复用现有基础组件和受支持的状态。不要为了满足原型需求而臆造控件、指标、辅助文案、品牌变体或宿主界面元素。
  • 根据交互/视觉行为的变更调整验证方式：渲染受影响的状态，在交互发生变化时检查键盘/焦点操作，并在要求时对照明确指定的参考。复用现有证据；全面界面矩阵和所有断点的完整检查应与相应范围相匹配。
  • 检查实际层级、溢出、令牌偏差、误导性交互和无障碍缺陷。避免使用僵化的评分表，将主观偏好变成普遍的合并阻碍。
  • 仅在令牌/模式确实变更时更新设计规范；若由代码生成工具负责，则通过该工具更新。缺少可选参考不构成搭建新设计系统的理由。

按需查阅

根据需要查阅对应章节及其必要依赖。此表用于查找，而非要求全部加载。对于较大型的设计／审计任务，可选用 assets/state-matrix.md、assets/pre-ship-checklist.md 和 assets/ui-audit-template.md 作为工作格式；常规改动可使用简洁的证据。

何时文件涵盖内容
设计新颖界面／审计可用性references/usability-foundations.mdNielsen 10、UX 定律、渐进式披露、心智模型
任何交互式组件（对话框、菜单、组合框、选项卡、滑块）references/accessibility-floor.mdWCAG 2.2 AA 不可妥协的要求、ARIA 模式、验证方法
按钮／输入框／对话框／导航／表格／卡片／下拉菜单／选项卡／Toastreferences/component-patterns.md各组件的状态、键盘交互规范、无障碍性和粗糙感
撰写或审阅用户可见文本references/microcopy-quality.md禁用词汇、各界面语气、错误／空状态／CTA 模板
审计 AI 生成的界面references/ai-slop-patterns.md14 种模式的改进前后对比与修正方法、检测提示词
设计决策需要重新考虑references/anti-defaults.md针对层级、易读性和交互的情境化替代方案
构建 AI／Agent 界面references/human-ai-ux.mdMicrosoft 18 项 + IBM 4 大支柱、流式输出／引用／置信度界面
阅读／扩展 DESIGN.md、设计令牌、shadcn/Radix、代码生成规则references/design-system-integration.mdDESIGN.md 章节、令牌规范、Figma/Code Connect
没有令牌系统，或需要扩展一组取值references/visual-craft.md字体／颜色／间距／圆角／层级／动效默认值
添加或审阅动画references/motion-patterns.md时长范围、缓动、CSS/Framer/@starting-style、减少动态效果
实现或审阅深色模式references/dark-mode.md表面明度层级、强调色降低饱和度、危险配色组合
已观察到性能变慢、进行性能敏感的改动，或收到审计请求references/performance.md测量、加载反馈、相关优化、项目预算
“我们需要一个类似 [Linear/Notion] 的 X”references/archetypes.md7 种界面原型，每种都有六槽位特征规范

辅助工具

从实际技能目录（<ui-craft-dir>）解析这些工具；仅针对当前问题运行：

  • node <ui-craft-dir>/scripts/check-contrast.mjs — 只读计算已更改的渲染颜色对比度。
  • node <ui-craft-dir>/scripts/detect-token-drift.mjs — 只读扫描令牌偏移；若项目已有 lint／代码生成流程负责维护该约束，则使用其证据。
  • python3 <ui-craft-dir>/scripts/validate-metadata.py — 验证创作元数据。

在权衡取舍时，遵循用户明确的决定和项目规范。如实记录重要限制；不要仅仅因为使用了此技能，就强行安排情境访谈、设计审计或其他审批。

评论

支持 Markdown