Frontend Design

Frontend Design

Create an interface with a clear point of view that serves its users and works in the existing product. Do not default to fashionable AI-generated aesthetics, decorative effects, or a familiar component-library layout when they are not justified by the brief.

1. Establish the brief

Before changing code, identify or explicitly state:

• Subject: What is being designed?
• Audience: Who uses it and what do they need to understand or do?
• Primary job: What is the one most important outcome for this page or flow?
• Context: Is this a new surface, an extension of an established product, or a redesign?
• Constraints: Existing design system, brand rules, framework, content, assets, browser support, and deadline.

For an existing product, inspect the relevant routes, components, styles, tokens, assets, and UI conventions first. Preserve purposeful conventions; do not introduce a parallel design system merely to make the page look new.

If a decision is genuinely blocked by missing product information, ask one focused question. Otherwise, make a stated, reversible assumption and proceed.

2. Set a deliberate visual direction

Write a compact design plan before implementation. Include:

• Concept: One sentence that ties the design to the subject, not a visual trend.
• Hierarchy: What a person sees first, second, and next.
• Tokens: A restrained palette (4–6 named colors), type roles, spacing rhythm, radii, borders, and shadows.
• Layout: Content regions, reading order, breakpoints, and an ASCII wireframe when the page is structurally complex.
• Signature: One memorable but useful element—such as a data treatment, interaction, visual metaphor, or editorial composition.
• Motion: The few interactions or transitions that clarify state or add atmosphere. Respect prefers-reduced-motion.

Choose typography for role and readability. Pair display, body, and utility styles intentionally; establish a type scale and use it consistently. Use familiar defaults only when they suit the product and audience, not because they are easy.

Avoid making every brief converge on cream-and-serif editorial layouts, dark pages with neon accents, gradients, floating glass cards, excessive rounded rectangles, or generic hero-stat layouts. Use any of these only when the content and brand support the choice.

3. Design the complete experience

Model the real content and task flow before polishing the happy path.

• Put the primary action where it is expected and describe it with a specific verb.
• Use labels and headings that reflect user language, not implementation language.
• Make structure carry meaning: use groups, dividers, labels, tabs, timelines, and numbered steps only when they represent real relationships.