1# Delightful Frontend Brief Template
2 
3Use this before writing code.
4Fill the blanks explicitly when the user brief is vague.
5 
6## 1) Visual thesis
7 
8Describe the desired feel in one sentence.
9 
10Template:
11`<brand/product> should feel <mood> with <materials/textures>, <color energy>, and <overall pace>.`
12 
13Example:
14`The landing page should feel cinematic and tactile with warm grain, deep charcoal surfaces, one coral accent, and slow confident motion.`
15 
16## 2) Design system constraints
17 
18Define the system in plain language.
19 
20- Typography:
21- Accent color:
22- Background/surface colors:
23- Radius policy:
24- Shadow policy:
25- Spacing tone:
26- Border usage:
27- Allowed components:
28- Forbidden patterns:
29 
30Good defaults:
31 
32- max 2 typefaces
33- 1 accent color
34- cardless unless interaction requires a card
35- one primary CTA above the fold
36 
37## 3) Narrative structure
38 
39Decide what each section must do.
40 
41- Hero:
42- Support:
43- Detail/story:
44- Proof:
45- Final CTA:
46 
47Rule: one section = one job.
48 
49## 4) Imagery plan
50 
51Decide what the dominant visual must show.
52 
53- Use uploaded images? yes/no
54- If no uploaded images: generate moodboard first? yes/no
55- Main visual subject:
56- Crop/composition notes:
57- Safe text area:
58- Atmosphere references:
59 
60## 5) Interaction thesis
61 
62Pick 2-3 motions that materially improve the design.
63 
64- Hero entrance:
65- Scroll/depth behavior:
66- Hover/reveal/layout transition:
67 
68Rule: motion must improve hierarchy or affordance, not add noise.
69 
70## 6) Verification targets
71 
72Set the review targets before coding.
73 
74- Desktop viewport:
75- Mobile viewport:
76- Key user path:
77- Must-pass first viewport checks:
78- Accessibility/readability concerns:
79 
80## Prompt scaffold
81 
82Use or adapt this block:
83 
84```text
85Design and implement a visually distinctive frontend.
86 
87Visual thesis:
88<fill in>
89 
90Design system:
91<fill in>
92 
93Narrative:
94<fill in>
95 
96Imagery plan:
97<fill in>
98 
99Interaction thesis:
100<fill in>
101 
102Hard rules:
103- first viewport reads as one composition
104- brand/product is unmistakable without relying on nav text
105- no generic SaaS card-grid hero
106- cards only when interaction requires them
107- keep copy short and believable
108- verify desktop and mobile before finishing
109 
110Deliver:
111- working implementation
112- 2-3 intentional motions
113- brief summary of what was verified
114```
115