ilandahan

Design System — Design skill for Claude Code

Design community

Build a complete design system from Figma using Atomic Design methodology.

How to install Design System

Installs to ~/.claude/skills/ilandahan-aid-design-system/SKILL.md

Terminal

mkdir -p ~/.claude/skills/ilandahan-aid-design-system && curl -fsSL https://raw.githubusercontent.com/ilandahan/AID/HEAD/commands/design-system.md -o ~/.claude/skills/ilandahan-aid-design-system/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Design System does

description: "Build a complete design system from Figma using Atomic Design methodology"

/design-system Command

Build a complete design system from Figma using Atomic Design methodology.

Usage

/design-system [figma-link]

What It Does

**Extracts Design Tokens**
- Colors (primitives + semantic)
- Typography (fonts, sizes, weights)
- Spacing scale
- Effects (shadows, borders, radii)
**Generates Components**
- Atoms → Molecules → Organisms → Templa

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★