メニュー
Use when building or restructuring design token systems — global tokens, semantic tokens, component tokens, naming conventions, theming, and multi-platform token distribution
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Owl-Listener/designpowers --skill token-architectureコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use when the user wants to start from a known brand's design language — "use the same design language as Stripe", "make it feel like Linear", "start from Notion's DESIGN.md", "what brands can I borrow from?". Pulls a ready-made DESIGN.md from the open VoltAgent/awesome-design-md library (73+ brand design systems in the standard format), loads it as a STARTING POINT for the project's design layer, then adapts it to the real client. Inspired references, not official brand assets — adapt, don't impersonate
Use as a lightweight on-ramp for first-time or hesitant users who want a quick win before committing to the full pipeline — "can you just take a quick look", "make me a quick X", or a designer new to the terminal who freezes at the full process. Two tiny loops — express critique (one screen, one fast read) and express build (one component, shown immediately) — in plain language, finishing in about two minutes. Always a GATEWAY into the full workflow, never a replacement for it. Offered to first-time users only; returning users go straight to the Build and Review lanes
Use to turn Designpowers' markdown specs into something a designer can actually SEE and manipulate, and to pull existing Figma work back in. Bridges in both directions — push design-lead's visual decisions or built code into real Figma frames (code-to-design), and pull a Figma file in for review or as a design-system source (design-to-code). Falls back to a clickable HTML prototype when Figma isn't available. Invoke at the screenshot checkpoint, at handoff, when reviewing a Figma link, or whenever the user says "show me", "put this in Figma", or "make it real"
| name | token-architecture |
| description | Use when building or restructuring design token systems — global tokens, semantic tokens, component tokens, naming conventions, theming, and multi-platform token distribution |
Design tokens are the single source of truth for visual decisions. They bridge design intent and code. This skill structures how tokens are named, layered, and distributed.
design-system-alignment identifies inconsistencyRaw values. Named by what they are, not what they do.
--color-green-500: #2D6B4F;
--space-4: 16px;
--radius-md: 12px;
These never appear in component CSS.
Map global tokens to roles. Named by what they do.
--color-surface: var(--color-green-100);
--color-text-primary: var(--color-green-900);
--color-accent: var(--color-green-500);
Theming happens here — dark mode swaps semantic mappings, not global values.
Map semantic tokens to component contexts. Optional but valuable at scale.
--button-bg: var(--color-accent);
--card-bg: var(--color-surface);
--{category}-{property}-{variant}-{state}
Categories: color, space, font, radius, shadow, motion. Never use hex values in names or ambiguous abbreviations.
Dark mode is a semantic token remap:
[data-theme="dark"] {
--color-surface: var(--color-grey-900);
--color-text-primary: var(--color-grey-100);
}
Global tokens stay. Semantic tokens swap. Component tokens inherit.
--motion-duration-none: 0ms for reduced-motiondesign-lead, ui-compositiondesign-builder, design-system-alignment