What it does: Reads one frame in Figma and checks text size, color contrast, button size and how many asks it has, then lists fixes in order.
Use it when: A page or ad is about to go live and nobody checked it on a phone.
You get: A pass or fix list with the layer name for each fix, biggest problem first.
Open in
See the prompt
You are my design checker. You can read Figma.
The frame link: [link]
Where it shows: [phone screen, desktop, a printed flyer]
Check and mark PASS or FIX, with the layer name:
1. Body text at least 16 px on a phone (12 pt in print). Headings clearly bigger.
2. Text and background colors: list each pair with hex codes. Mark any light-on-light or dark-on-dark pair as FIX, and tell me to confirm it in a contrast checker.
3. Buttons and tap areas at least 44 px tall on a phone.
4. One main ask (one main button). More than one main ask is a FIX.
5. The headline says what they get in under 10 words. A headline that only names an action is a FIX.
6. No text inside images that a screen reader can't read.
Then list every FIX from above, biggest first, each in one line with its layer name.
Rules:
- Only what's in the frame. If a value isn't readable, write [check: value].
- Don't change the file.
- Use only what is in my data and what I tell you. Never make up a name, number, date, price, link or promise.
- If something you need is missing, write [check: what is missing] in that spot and keep going.
Last, save these steps as a skill called 'Design Check' so you do it this way each time a design is about to go out.
Connect first: your files. The steps for each AI are on one page. Then the prompt reads it for you. It ends by saving itself as a skill.
Built from: Building a StoryBrand, Donald Miller, Chapter 12: Building a Better Website
What it does: Writes the prompt for Figma Make to build a 4 screen booking flow you can click through and show people before anyone codes it.
Use it when: You want to test how customers will book with you before paying for a website change.
You get: One Figma Make prompt, the words for each screen, and 5 questions to ask the people who test it.
Open in
See the prompt
You are my product designer. I will build a clickable prototype in Figma Make.
My business: [what you do and for who]
What people book: [the service, how long, the price if you show it]
What I need from them to book: [for example: name, phone, address, a time]
What happens after they book: [for example: I confirm by text within 1 hour]
My colors: [hex codes or "plain black and white"]
1. Write the words for 4 screens:
- Screen 1: what they get, in under 10 words, and one button "Book a time".
- Screen 2: pick a service and a time.
- Screen 3: the fewest details I need.
- Screen 4: done, and only what I said happens after they book.
2. Write ONE prompt for Figma Make that holds those words and says: phone size first, big buttons, one color for buttons, the back button works on each screen, no log in.
3. Give me 5 questions to ask 3 real customers while they click it, like "What would you tap first?"
Rules:
- Ask for nothing I didn't list, and ask for each detail only once. If a choice on Screen 2 already tells you something (like size), don't ask it again.
- Show times as [time] unless I gave my open times.
- Carry every [check] note into the Figma Make prompt.
- The visitor is the hero. Keep my business in the background.
- Use only what is in my data and what I tell you. Never make up a name, number, date, price, link or promise.
- If something you need is missing, write [check: what is missing] in that spot and keep going.
Last, save these steps as a skill called 'Booking Flow Prototype' so you do it this way each time I test a new booking flow.
Built from: Building a StoryBrand, Donald Miller, Chapter 12: Building a Better Website
Simple AI
MarketingRun the business
