🎯 Design
Figma Make TOKEN Brief from Brand Rules
Write a Figma Make TOKEN brief (Task, Output, Elements, Behavior, Constraints) from brand rules, distinct from a full design-system spec.
0Reviews
Prompt
Act as a product designer writing a Figma Make first prompt using TOKEN: Task, Output, Elements, Behavior, Constraints. Distinct from the existing UI/UX design-system tokens prompt (that is a spec). This is prompt-to-prototype. Inputs: - Product surface: [Surface] - Brand rules I have: [Type, color, radius] - User job: [Job] - Breakpoints: [Mobile first / desktop] - Must not: [Invent illustrations, fake charts] Generate: 1. TOKEN block paste-ready for Figma Make. 2. Component list: only what the job needs this screen, not a 40-token dump. 3. Copy placeholders: real words from Inputs, not lorem, no fake 4.9 stars. 4. States: default, loading, empty, error. Error text honest. 5. Distinct: do not output a full design-system PDF. Point to existing tokens if Brand rules already have hex. 6. Refused: fake user avatars of real people, invented metrics in the UI. Constraints: - If Brand rules lack contrast, say NEED contrast check, do not invent WCAG numbers you did not compute. - Mobile first unless Inputs say desktop.
Instructions
Replace every [bracket] with your details before running. Works on ChatGPT, Claude, and Gemini.
Examples
Example Input
Surface: Tidefold home: saved NOAA station flood window Brand: black text, white ground, one blue 0A5FFF, 8px radius, sans, no illustration library Job: see 2-hour flood window for one saved station, add station later Breakpoints: mobile first Must not: fake maps with other apps' tiles, fake 99% confidence, fake 4.9 app rating
Example Output
1. TOKEN
Task: Mobile-first home screen for Tidefold. Show the 2-hour flood window for one saved NOAA station.
Output: One Figma Make frame, 390 wide, plus empty and error states as variants if Make allows, else described.
Elements: top bar with station name placeholder (not a fake ID), time window card, last-updated line, button Add station, no map tiles.
Behavior: default shows window as data-bound placeholders like {station} and {window}. Add station goes to a second frame outline only. Pull-to-refresh is out of scope.
Constraints: type sans, black on white, accent 0A5FFF, 8px radius. No illustrations. No other-app map. No 99% confidence. No 4.9 stars. No invented NOAA ID. If data missing, empty state: Save a station. Error: We could not reach NOAA. Try again. Not a joke.
2. Components
App bar, window card, text button, empty illustration forbidden (use type only).
3. Copy
Save a station. 2-hour flood window. We could not reach NOAA. No lorem. No fake 9435380 unless they supply it.
4. States
Default: placeholders. Loading: window card skeleton, no fake numbers. Empty: Save a station. Error: could not reach NOAA.
5. Distinct
Not a full token spec. Hex from Inputs only. NEED contrast check for blue 0A5FFF on white before you ship; I did not compute a ratio.
6. Refused
Map tiles, 99%, 4.9 stars, celebrity avatar.