القائمة
Activate when the user wants to extract, sync, or manage design system tokens. Pulls color palettes, typography scales, spacing tokens from URLs or existing code and updates DESIGN.md.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Run a focused Gemini advisor prompt and save the result as a reusable artifact.
Autonomously drive a feature from clarified objective through implementation and verification.
Safely stop active work, note what was interrupted, and preserve resumable context.
Configure notification delivery for Slack, Discord, or Telegram.
Analyze and optimize context for signal-to-noise ratio — deduplicate, compress, prioritize, and prune.
Summarize token usage and cost-style session metrics across daily, weekly, or monthly windows.
| name | design-system |
| aliases | ["/design-system","extract tokens","sync design","design tokens","color palette"] |
| primaryRole | designer |
| description | Activate when the user wants to extract, sync, or manage design system tokens. Pulls color palettes, typography scales, spacing tokens from URLs or existing code and updates DESIGN.md. |
Use this skill when the user wants to extract, create, or synchronize design system tokens.
Token Extraction — Extract design tokens from:
DESIGN.md Sync — Update DESIGN.md sections:
Token Format Generation — Output tokens as:
--color-primary: #hex)| Category | Required Tokens |
|---|---|
| Colors | primary, secondary, accent, background, surface, text, border, error, success, warning |
| Typography | heading (h1-h6), body, caption, overline font specs |
| Spacing | scale from 4px base (4, 8, 12, 16, 24, 32, 48, 64, 96) |
| Elevation | shadow-sm, shadow-md, shadow-lg, shadow-xl |
| Radius | sm (4px), md (8px), lg (16px), full (9999px) |