frontend-design

Frontend Design

Create interfaces that make a real task easy to understand and complete. Make visual choices serve the product and its users; do not treat a collection of components as a finished design.

Design Consultation

When consulted before implementation, establish the few decisions that coding cannot safely infer. Do not block a small, reversible change for a full brief; use repository evidence and state reasonable assumptions. Ask only when an unknown would materially change the workflow, content priority, or visual direction.

Treat DESIGN.md in the target project as the durable record of design knowledge. Look for it before making a material design decision. At the first substantive design consultation, create it if it does not exist. Update it when user feedback, repository evidence, testing, or a design review changes an assumption, constraint, priority, or decision. Record the decision and its reason, not a transcript of the conversation.

Capture these decisions when the work is substantial, likely to span multiple sessions, or needs handoff to another implementer:

• Outcome and success: the user outcome, the primary action or decision, and how the team will know the design worked.
• Audience and context: who uses it, their familiarity and urgency, the device or environment, and any access needs that shape the interaction.
• Primary workflow: entry point, happy path, key alternatives, and the feedback or recovery needed after success, failure, or interruption.
• Content and data: the real information, its relative importance, expected density, long or empty values, and any content that must remain visible.
• States and rules: permissions, validation, loading, empty, error, destructive, selected, and time-sensitive states that change what a person can see or do.
• Constraints: existing design system or product conventions, technical limits, supported viewports and input methods, accessibility requirements, brand constraints, and licensed assets or fonts.
• Visual direction: a few concrete adjectives, comparable product references, and anti-references that clarify the desired character without copying another product.
• Scope and tradeoffs: what is deliberately out of scope, what can be a sensible default, and which unresolved questions need a prototype or user decision.