메뉴
Use for UI, frontend, styling, landing page, or component creation; injects palettes, typography, layouts, motion, and anti-generic design rules.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use for project memory, decisions, handoffs, genome, knowledge index, changelog, and patterns that must persist across sessions.
Use for frontend, backend, mobile, debugging, security, or specialized engineering work that needs focused domain references and strict boundaries.
Use for prototype, MVP, fullstack feature, from-scratch feature, or multi-domain work that needs a SPEC.md before planning or implementation. Do not use for tiny one-file edits.
Use when code changes may require documentation updates; maps git diff to candidate docs without auto-editing documentation.
Use before completion, PR, deploy, handoff, or when verifying code changes. Runs advisory or blocking checks and reports evidence.
Use when the task involves reading, creating, or editing `.docx` documents, especially when formatting or layout fidelity matters; prefer `python-docx` plus the bundled `scripts/render_docx.py` for visual checks.
| name | codex-design-system |
| description | Use for UI, frontend, styling, landing page, or component creation; injects palettes, typography, layouts, motion, and anti-generic design rules. |
| load_priority | on-demand |
Load before any UI/frontend task. This skill brings 30 palettes, 21 free font pairings, 20 layout patterns, 15 micro-interactions, composition rules, current trends, and developer-UI anti-pattern fixes. Anti-generic rules: no default blue, no plain white card stacks, no bootstrap look.
$design or "make it look premium/modern/creative".frontend-specialist agent is active.codex-design-md when the project needs a durable DESIGN.md contract or token export.#007bff, #2196F3, #3B82F6) or default purple (#6C63FF, #7C3AED) unless the chosen palette in references/palettes.md explicitly uses it.border-radius: 8px and box-shadow: 0 2px 4px rgba(0,0,0,0.1).references/palettes.md before writing UI code.references/typography.md.references/composition.md.references/micro-interactions.md.references/palettes.md.references/typography.md.references/patterns.md.references/micro-interactions.md.references/anti-patterns.md before finalizing.references/palettes.md — 30 curated palettes with exact hex tokens, mood, app fit, and contrast ratios.references/typography.md — 21 free font pairings with imports, weights, style tags, and fallback stacks.references/patterns.md — 20 layout patterns with structure, responsive CSS, and usage boundaries.references/micro-interactions.md — 15 production-ready motion patterns with CSS or JS code.references/composition.md — Visual hierarchy, spacing, grids, storytelling flow, and emphasis rules.references/trends.md — Current design trends for 2025-2026 with code signatures and fit guidance.references/anti-patterns.md — 15 developer-UI mistakes with wrong/right code and violated principles.