메뉴
Design color systems — palettes, contrast, semantic mapping, dark mode — use when: pick colors, build a palette, semantic tokens, dark mode pairings, brand color, accent color
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Add reference material to a project — use when: add a reference, save inspiration, attach examples, link this site as reference, drop in a moodboard
Craft ASCII art interactively — you direct, the artist creates — use when: make ASCII art, terminal art, decorative banner, splash screen, hero ASCII
Audit an existing brand before evolving it — use when: audit our brand, what do we have, before a rebrand, brand health check, current brand state, brand inventory
Sync brand to match a project's shipped state — tokens, voice, visual patterns, personality — use when: brand drifted from the app, reverse-engineer the brand, the code is ahead of the brand docs, sync brand to shipped, update brand from production
Design icon systems — library selection, sizing, containers, custom SVG direction — use when: pick an icon library, icon sizing rules, icon containers, custom SVG direction, swap icons, icon strategy
Design logo directions — concepts, variations, usage rules, and clear space — use when: design the logo, logo concepts, logo variations, lockups, wordmark vs mark, clear space rules, logo usage
| name | gsp-color |
| description | Design color systems — palettes, contrast, semantic mapping, dark mode — use when: pick colors, build a palette, semantic tokens, dark mode pairings, brand color, accent color |
| user-invocable | true |
| allowed-tools | ["Read","Write","AskUserQuestion","Glob","Grep","WebFetch"] |
This is a standalone composable skill. It works two ways:
/gsp-color directly for palette exploration, contrast checking, or full system design/gsp-color --enrich to add technical precision to creative color choices
Input: Hex colors, --preview, --enrich, or interactive
Output: color-system.md chunk + palettes.json (OKLCH scales)
Agent: None — inline skill, deterministic palette generation + contrast math
<execution_context> @${CLAUDE_SKILL_DIR}/chunk-format.md </execution_context>
- Always use `AskUserQuestion` for user interaction — never prompt via plain text - One decision per question — never batch multiple questions in a single message - Every palette gets the full 11-stop OKLCH scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 - Color names must be semantic (primary, secondary, accent, neutral) not literal (red, blue) - All foreground/background pairs must report WCAG AA contrast ratios - Dark mode mapping must maintain equivalent contrast relationships - Foundation chunks follow chunk-format.md format exactly ## Step 0: Parse mode| Input | Mode | Domain |
|---|---|---|
/gsp-color #hex [#hex...] --preview | Preview scales | palette |
/gsp-color #hex [#hex...] | Generate from hex | palette |
/gsp-color --enrich | Enrich existing system | system |
/gsp-color | Interactive full system | system |
Read the domain file for the detected mode:
${CLAUDE_SKILL_DIR}/domains/palette.md${CLAUDE_SKILL_DIR}/domains/system.mdFor system mode, also read ${CLAUDE_SKILL_DIR}/references/color-composition.md.
Follow the loaded domain file's complete workflow — it contains all generation logic, API calls, output formats, and completion steps.
Write color-system.md + palettes.json to the resolved output path (skip if --preview).
Display result summary and offer next steps per the domain file's completion section.