词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code design-system for project token conventions

Use a template to document brand colors, type, spacing, forms, and responsive conventions so components share a system.

中文

Install in Claude Code

Open the project in Claude Code with its existing colors and component library. Resolve template placeholders to actual tokens and use applicable WCAG criteria for formal accessibility decisions.

  1. Review `.claude/skills/design-system/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/design-system/` in your project and save the reviewed file as `.claude/skills/design-system/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/design-system` in the slash menu.

Example task

Fixture tokens-29 uses {action: 'brand-primary', surface: 'page-canvas'}. The Email field currently has only placeholder text.

What to check

Record {action: 'brand-primary', surface: 'page-canvas', emailLabel: 'visible'}. Verify the existing tokens and check control name and focus during keyboard testing.

Original SKILL.md on GitHub · Updated

Frequently asked question

Are template numeric values formal criteria?

Use template sizes, spacing, and interactions as configurable examples. For formal review, check the applicable WCAG and platform criteria for the current control.