메뉴
Define or extract a design token system (color, type, spacing, radius, shadow) and output it as JSON/CSS variables. Use when setting up a design system or converting a Figma/brand palette to tokens.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Audit a palette or design for WCAG color contrast and legibility, and suggest compliant adjustments. Use when finalizing a palette, design tokens, or any text-over-color/imagery.
Produce a clean export/delivery spec - right formats, sizes, densities, naming, color profile, optimization - for a set of assets. Use when delivering assets to a client or developer.
Assemble or audit a brand kit - logo, colors, typography, spacing, usage rules - and pull real brand data via Brand.dev. Use when starting brand work, onboarding a client, or standardizing a brand.
Create or edit a branded layout in Canva via the connector - from a brand template, then export. Use for social posts, flyers, decks, and marketing collateral that should stay on-brand and fast.
Critique a design against craft principles - hierarchy, layout, type, color, spacing, accessibility, brand fit. Use when reviewing a draft, a generated image, or a layout before delivery.
Pull a Figma design via the Figma connector and produce a developer handoff - tokens, specs, redlines, asset list, and component notes. Use when handing a design to engineering or auditing a Figma file.
| name | design-tokens |
| description | Define or extract a design token system (color, type, spacing, radius, shadow) and output it as JSON/CSS variables. Use when setting up a design system or converting a Figma/brand palette to tokens. |
A single source of truth for visual values, so every asset and screen stays consistent.
--color-text, --color-bg, --color-brand, success/warn/danger).contrast-guard hook checks CSS; aim >= 4.5:1).tokens.json and/or CSS custom properties / Tailwind @theme.