Dishain

Shain Design System Skill — AI skill for Claude Code

AI community

Claude skill for token-based design systems in Figma — three-tier architecture, Light/Dark modes, BEM-style component specs.

How to install Shain Design System Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Dishain/Shain-Design-System-Skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Shain Design System Skill does

Claude skill for token-based design systems in Figma — three-tier architecture, Light/Dark modes, BEM-style component specs. Used as supplementary material for the AI for Designers praktikum.

Alternatives in AI

Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Architecture Diagram Generator — Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files 7k ★
Cc Mini — Ultra-light Harness scaffolding for AI agents, a mini version of claude code 825 ★

README

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)

Download shain-dls.zip from the latest release
Open claude.ai → Settings → Capabilities → Skills
Click + Create skill and upload the zip
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: