design-interfacelisted
Install: claude install-skill dayfinggg/claude-code-codex-skills
# Design Interface
Create interfaces that are useful, coherent, recognizable, accessible, and finished. Treat product intent, content, visual design, interaction, implementation, and rendered verification as one workflow.
## Choose the Design Mode
Use **existing-product mode** whenever the repository already contains a product interface, brand, design system, theme, or reusable components. Preserve its visual grammar and extend it with the smallest justified addition.
Use **new-direction mode** only for a greenfield interface or an explicitly requested redesign. Establish a coherent system before styling individual screens.
Do not expose routine design deliberation unless the user asks for it.
## Establish the Design Contract
Determine from the request and available evidence:
1. Who uses the interface and what primary task they must complete.
2. The product type, content, environment, platform, supported devices, and constraints.
3. The required deliverable: concept, prototype, implementation, redesign, or review.
4. Existing brand rules, tokens, components, assets, copy, and interaction conventions.
5. The material quality risks, such as accessibility, dense data, trust, conversion, localization, or performance.
Use realistic product content when available. Do not fabricate proof, metrics, testimonials, or business claims in a finished result.
## Read the Applicable Guidance
Load only the references needed for the task:
1. Read `references/existing-product.md` be