memi-design

Atomic Design — Design skill for Claude Code

Design community

Atomic Design quick reference — levels, composition rules, tokens, naming.

How to install Atomic Design

Installs to ~/.claude/skills/memi-design-memi-atomic_design/SKILL.md

Terminal

mkdir -p ~/.claude/skills/memi-design-memi-atomic_design && curl -fsSL https://raw.githubusercontent.com/memi-design/memi/HEAD/skills/ATOMIC_DESIGN.md -o ~/.claude/skills/memi-design-memi-atomic_design/SKILL.md

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

What Atomic Design does

name: atomic-design description: Atomic Design quick reference — levels, composition rules, tokens, naming user-invocable: false

Atomic Design — Quick Reference

Level Decision Table

Level	Folder	Composes	Has State	Fetches Data	Real Content
Atom	`components/ui/`	Nothing	No	No	No
Molecule	`components/molecules/`	2–5 atoms	Maybe	No	No
Organism	`components/organisms/`

Alternatives in Design

Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Scaffold Project — Scaffold a new design-product project that matches the recommended Claude Code layout (the reference structure 781 ★