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 and verify provenance at ibelick/ui-skills:

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.