Delightful Frontend Brief Template

Use this before writing code. Fill the blanks explicitly when the user brief is vague.

1) Visual thesis

Describe the desired feel in one sentence.

Template: <brand/product> should feel <mood> with <materials/textures>, <color energy>, and <overall pace>.

Example: The landing page should feel cinematic and tactile with warm grain, deep charcoal surfaces, one coral accent, and slow confident motion.

2) Design system constraints

Define the system in plain language.

• Typography:
• Accent color:
• Background/surface colors:
• Radius policy:
• Shadow policy:
• Spacing tone:
• Border usage:
• Allowed components:
• Forbidden patterns:

Good defaults:

• max 2 typefaces
• 1 accent color
• cardless unless interaction requires a card
• one primary CTA above the fold

3) Narrative structure

Decide what each section must do.

• Hero:
• Support:
• Detail/story:
• Proof:
• Final CTA:

Rule: one section = one job.

4) Imagery plan

Decide what the dominant visual must show.

• Use uploaded images? yes/no
• If no uploaded images: generate moodboard first? yes/no
• Main visual subject:
• Crop/composition notes:
• Safe text area:
• Atmosphere references:

5) Interaction thesis

Pick 2-3 motions that materially improve the design.

• Hero entrance:
• Scroll/depth behavior:
• Hover/reveal/layout transition:

Rule: motion must improve hierarchy or affordance, not add noise.

6) Verification targets

Set the review targets before coding.

• Desktop viewport:
• Mobile viewport:
• Key user path:
• Must-pass first viewport checks:
• Accessibility/readability concerns:

Prompt scaffold

Use or adapt this block:

Design and implement a visually distinctive frontend.

Visual thesis:
<fill in>

Design system:
<fill in>

Narrative:
<fill in>

Imagery plan:
<fill in>

Interaction thesis:
<fill in>

Hard rules:
- first viewport reads as one composition
- brand/product is unmistakable without relying on nav text
- no generic SaaS card-grid hero
- cards only when interaction requires them
- keep copy short and believable
- verify desktop and mobile before finishing

Deliver:
- working implementation
- 2-3 intentional motions
- brief summary of what was verified