Distinctive Frontend Design Brief
By alex m · Published · Updated
Gives a web interface a deliberate visual direction, with type, colour, motion, and layout choices that make it look designed for its purpose instead of like…
Prompt template
## Distinctive Frontend Design Brief Write a design direction for this interface that avoids the generic template look. - What is being built: [textarea: Product and page and its main job] - Audience: [text: Who uses it and in what setting] - Personality: [multi: Calm, Bold, Playful, Technical, Editorial, Luxurious, Warm, Raw] - Reference points: [textarea: Sites or objects whose feel is wanted] - Things to avoid: [text: e.g. purple gradients or stock icons] - Stack constraints: [text: e.g. Tailwind or plain CSS] Pick one clear concept first and state it in a sentence; every later choice should serve it. Choose a type pairing with a reason: a distinctive display face for headings and a readable text face for body, with sizes on a scale and a clear weight contrast. Build a palette of a dominant colour, one sharp accent, and neutrals, with contrast ratios that meet accessibility minimums. Define layout with intent: a grid, a deliberate use of space, and one place where the rule is broken for emphasis. Specify motion sparingly: one orchestrated entrance and meaningful hover and focus states, respecting reduced-motion settings. Add texture or detail (borders, shadows, imagery treatment) that fits the concept. Return the concept, the type, colour, layout, and motion specs as tokens a developer can paste into code, and three things that would make the result look generic if done by default.