---
name: distinctive-frontend-design-brief
description: "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 a stock template. Use when a web page or app interface needs a distinctive visual direction covering type, colour, layout, and motion instead of a default template look. Do not use for implementing the front end or running a usability review of an existing design. Related topics: design, coding."
---

# Distinctive Frontend Design Brief

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 a stock template.

## When to use

Use this skill when a web page or app interface needs a distinctive visual direction covering type, colour, layout, and motion instead of a default template look. Do not use it for implementing the front end or running a usability review of an existing design.

## Workflow

1. Ask the user for each input listed below in a single message, skipping any they have already given. Where options are listed, offer them, but accept other answers too.
2. State one design concept in a sentence that follows from the product, the audience, and the chosen personality.
3. Choose a type pairing and size scale with a reason for each face, ensuring body text stays readable.
4. Build a palette of dominant colour, sharp accent, and neutrals, and check contrast ratios against accessibility minimums.
5. Define the layout grid, spacing rhythm, one deliberate rule-break, and a restrained motion plan that honours reduced-motion settings.
6. Output everything as paste-ready tokens and name three defaults that would make the result look generic.

## Inputs

- **What is being built** (longer free text)
- **Audience** (free text, e.g. "Who uses it and in what setting")
- **Personality** (choose any: Calm, Bold, Playful, Technical, Editorial, Luxurious, Warm, Raw)
- **Reference points** (longer free text)
- **Things to avoid** (free text, e.g. "purple gradients or stock icons")
- **Stack constraints** (free text, e.g. "Tailwind or plain CSS")

## Output

A one-sentence concept, then type, colour, layout, and motion specs as paste-ready tokens, and a list of three generic defaults to avoid.

## Prompt template

Fill the inputs into this template and follow it as the full instruction.

### Distinctive Frontend Design Brief

Write a design direction for this interface that avoids the generic template look.

- What is being built: {{What is being built}}
- Audience: {{Audience}}
- Personality: {{Personality}}
- Reference points: {{Reference points}}
- Things to avoid: {{Things to avoid}}
- Stack constraints: {{Stack constraints}}

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.

## Pitfalls

- Defaulting to a safe sans-serif and a purple gradient, which is exactly the look this brief exists to avoid.
- Choosing an accent colour that fails contrast on the background, so buttons look striking but read poorly.
- Adding motion everywhere, which feels busy and ignores people who set reduced motion.