work-with-design-systems

work-with-design-systems

目录条目 — 完整技能：natdexterra/work-with-design-systems

决策树

1. 是否已安装完整技能？ 检查此位置的技能是否仍包含 das: 块：

   • 全局：grep -q "^das:" ~/.agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • 项目：grep -q "^das:" .agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • 不含 das: 块 → 已安装完整技能，调用它并继续
   • 含有 das: 块 → 转到第 2 步

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

   检测范围：

   [ -e ~/.agents/skills/work-with-design-systems ] && echo "global" || echo "project"
   

   全局（使用 -g 安装）：

   npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -g -y
   

   项目（未使用 -g 安装）：

   npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -y
   

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

安装后调用

• 技能名称：work-with-design-systems
• 触发词："work with design systems"、"Figma inspect mode"、"build design system Figma"、"WCAG component audit"

功能

提供两种 Figma 设计系统操作模式。检查模式：只读分析，包括 WCAG 无障碍审计、组件质量评分，以及开发者交接文档生成。构建模式：通过六个引导阶段创建设计系统，涵盖变量绑定、组件插槽架构和描述，并可选择导出为 tokens.css 和 AI 可读的规则文件。

不适用场景

• 不需要系统架构的单个组件工作
• 不涉及设计系统的一般设计工作 — 使用 mobile-app-design 或 ui-craft
• 在 Figma 写入过程中强制执行令牌 — 使用 claude2figma