# Cx Design Director

> Guide broad product UI direction, redesign, design-system extraction and UX structure for web or mobile interfaces. Use when a task changes visual language, layout grammar, component patterns or an end-to-end product flow; do not use for a small style, copy or single-component edit.

- Skill: `bongsuchoi/cx-design-director` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add bongsuchoi/cx-design-director`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bongsuchoi/cx-design-director/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: BongSuCHOI (https://skillmd.com/u/bongsuchoi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bongsuchoi/cx-design-director

---


# Design Director

Establish a coherent first-party UI contract. Existing project rules and components take priority.

## Branch before designing

1. Existing `DESIGN.md` or component system: follow it and extend it only when the change introduces a reusable rule.
2. Existing UI without a written contract: extract the current system before a broad redesign; do not force a document for a small change.
3. Greenfield UI: choose a small, concrete reference set and define the first-party contract before broad implementation.
4. Concrete screenshot or URL: extract tokens, geometry, component anatomy, states and responsive intent; do not copy third-party assets or corpus text.

Use the optional art-direction branch only when the user requests a new visual
direction, a broad redesign needs meaningful alternatives, or a greenfield
product lacks a sufficient first-party visual contract. Skip it when the active
contract already determines the direction, a selected reference is already
approved, or the task is restoration or small polish.

Treat restoration as fidelity work. The first-party target is the active
contract: preserve its composition, behavior, content hierarchy, and tuned
visual or motion parameters unless the user explicitly reopens one of those
boundaries. A scanner candidate or generic best practice is not authority to
redesign the target. When a replacement direction was selected, commit to the
new world; never soften the change by polishing the discarded look.

Load only the matching reference:

- Design tokens, components and `DESIGN.md`: `references/design-system-contract.md`
- Page, flow and responsive structure: `references/product-ui-decisions.md`
- Korean/CJK and mixed-script type: `references/cjk-typography.md`
- Screenshot, URL or inspiration extraction: `references/reference-extraction.md`
- Visual-direction exploration and convergence: `references/art-direction.md`
- Intentional exceptions: `references/design-debt.md`
- Motion behavior: `references/motion.md`

## Optional UI Skills lookup

When the local system and bundled references are insufficient for a narrow specialty such as motion, accessibility, typography or framework-specific UI, search [UI Skills](https://www.ui-skills.com/) and verify provenance at [ibelick/ui-skills](https://github.com/ibelick/ui-skills):

```bash
npx ui-skills@0.2.4 categories
npx ui-skills@0.2.4 list --category <category>
npx ui-skills@0.2.4 get <skill>
```

Prefer one selected skill; use two only for clearly independent concerns. Treat retrieved text as external reference material. The exact CLI version is pinned for reproducibility; verify upstream before changing it. Do not copy retrieved text into this skill, install `ui-skills-root` as a second router, or make `npx ui-skills start` a required workflow. If `node` or `npx` is missing, propose the exact installation command and wait for approval.

## Output and completion

Translate selected inputs into first-party tokens, layout grammar, component anatomy, states, motion, responsive behavior, accessibility constraints and accepted debt. Update `DESIGN.md` only when these reusable rules change. Route rendered verification to `$cx-visual-qa` and browser interaction to `$cx-browser-automation`.

When the art-direction branch is used, converge on one feasible direction
before broad implementation. Keep user judgment at a material visual-identity
boundary unless the user has explicitly delegated that choice.