← ClaudeAtlas

design-interfacelisted

Design, implement, redesign, or visually review production-quality websites, apps, dashboards, flows, pages, and UI components. Use when visual direction, usability, responsive behavior, accessibility, interaction states, information hierarchy, or design-system fit materially affect the result, especially when extending an existing product without breaking its visual language. Do not use for backend-only work, mechanical CSS edits with no design judgment, or non-interface artifacts.
dayfinggg/claude-code-codex-skills · ★ 1 · Web & Frontend · score 74
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