Shain Design System Skill

Claude skill for working with a token-based design system. Covers Figma variables, component architecture, semantic tokens, dark mode, accessibility, and design-to-code handoff.

Used as supplementary material for the AI for Designers praktikum by Dmytro Legkov.

What's inside

.
├── SKILL.md                              Core skill definition
└── references/
    ├── figma-best-practices.md           Figma structure, components, export
    └── token-improvements.md             How to evolve the token system over time

How to install

Option 1 — claude.ai (recommended for designers)

1. Download shain-dls.zip from the latest release
2. Open claude.ai → Settings → Capabilities → Skills
3. Click + Create skill and upload the zip
4. Enable the skill — done

Option 2 — Claude Code / Cowork (for CLI users)

Clone the repo into your skills directory:

cd ~/.claude/skills
git clone https://github.com/Dishain/Shain-Design-System-Skill.git shain-dls

Claude will auto-discover the skill on next launch. Update later with git pull.

Using the skill

Claude triggers this skill automatically when you mention design systems, Figma variables, component specs, token naming, dark mode, or related topics. You can also invoke it explicitly:

skill: shain-dls

What the skill covers

• Three-tier token hierarchy (Primitive → Semantic → Component-specific)
• Naming conventions for variables, layers, and components
• Light / Dark mode infrastructure
• BEM-style CSS classes (shain-[component])
• Theme config pattern for variant styling
• Accessibility baseline (WCAG AA)
• Figma best practices (auto layout, variants, properties, export)
• Token system evolution (adding modes, migrating, deprecating)

License

MIT — see LICENSE.