In partnership with
What usually goes wrong when you design with AI?
WTF is reference-first design?: You decide what the product should communicate, collect a few visual references, and explain what each reference is for.
AI then builds from visible decisions instead of guessing what words like "premium" or "modern" mean.
Ask AI to make a "modern premium landing page."
You can already predict the result: dark navigation, a large headline, purple glow, three feature cards, and a shiny button.
Nothing is technically broken. The page could belong to a finance app, an AI note-taker, or a protein powder company.
The prompt gave the model a mood, but no design direction.
Designing with AI needs a better process: decide the meaning, collect references, map the screen, and build one component at a time.
The model matters less here than the number of design decisions it has to guess.
I am Alex, welcome to ShortCu8 by Innov8.
Lets Dive Deep 🐰
⭐Today's Shortcut
Treat AI like the person building from your art direction.
Give it four things before asking for a screen:
who the product is for
what the screen must help them do
what it should feel like
references with a reason for each one
Then build and review the design in pieces.
Start with a one-page design brief
Before opening Codex, Claude Code, Cursor, or another builder, write five lines:
Product:
User:
Main action on this screen:
Feeling:
Avoid:
Example:
Product: an invoicing app for freelancers
User: people who hate accounting software
Main action: create and send an invoice in under two minutes
Feeling: calm, direct, trustworthy
Avoid: banking-dashboard density, gradients, playful illustrations
If you cannot fill this in, the model will make those decisions for you. That is usually where the generic design begins.
Build a six-reference board
Do not send AI a folder of 40 screenshots and ask it to "take inspiration."
Collect six references:
two for page structure
two for typography and colour
two for components or interaction
Use Mobbin for real app and product screens. Use Awwwards when you need more expressive web references. Keep the final six together in Cosmos, Figma, or a simple folder.
Add one note under every screenshot:
Use this reference for the compact navigation and spacing.
Do not copy its colours or illustrations.
That sentence matters. Without it, the model has to decide which part of the image you liked.
Map the screen before styling it
List the sections in order and give each one a job.
Navigation: get existing users to login
Hero: explain the product and start an invoice
Demo: show the three-step invoice flow
Proof: answer whether clients need an account
Pricing: make the free-plan limit clear
Final CTA: create the first invoice
This stops the model from adding sections because landing pages are "supposed" to have them.
You can browse Component Gallery when you know the job of a component but need to compare established ways of presenting it.
Build one decision at a time
Do not ask for the full polished site in the first run.
Start with the structure and one important section:
Read DESIGN-BRIEF.md and the notes in /references.
Build only the navigation and hero.
Reference 01 controls layout and spacing.
Reference 03 controls typography.
Keep the primary action visible without scrolling.
Do not add sections, colours, or decorative effects that are not supported by the brief.
Review it while the scope is still small. Fix hierarchy, spacing, copy length, and mobile behaviour. Then move to the next section.
This takes longer than one-shot generation. It also prevents a weak decision in the hero from spreading across the whole page.
Review the complete experience
A collection of good sections can still make a bad page.
When everything is assembled, ask the agent to review the page without changing it:
Audit this page as one experience.
Check visual hierarchy, repeated styles, spacing rhythm, mobile layout, contrast, button consistency, and whether each section moves the user toward the main action.
Return a short list of specific problems with file and component names. Do not edit yet.
Read the list. Reject changes that erase the personality you chose. Approve the useful fixes, then run the page again on desktop and mobile.
Now go and create some slop🙂🙂
The ShortList
🛠️Cool Tools of the Week:
Microsoft 365 Copilot: GPT-5.6 is now the preferred model in Microsoft 365 Copilot
GPT-5.6 Sol: OpenAI's new model with reset limits across ChatGPT Work and Codex
Reve 2.1: The 4K image model got upgrades, including greater prompt understanding
ChatCut: Agentic video editor got a new plug-in, the Codex app
Google AI Studio: Rolling out; developers can now get pretty URL
📩 Innathe Shortcu8 engane undarunnu 👇️?
We read every reply - just reply to this email and let us know how we can improve !
Appo adutha Shortcu8il kanaam bie…👋
If you read till here, you might find this interesting
#AD1
Cut Lead Review From Hours To Minutes
Sign up for a free trial of Attio, the agentic CRM.
Ask Attio to build a daily workflow that surfaces the deals that need your attention today, like anything with a stage change, a recent reply, or a new signal in the last 24 hours.
Review your pipeline in Claude, synced live from Attio via MCP.
That's it.
#AD2
Hampton took $440K in planned hires off the calendar
Hampton co-founder Joe Speiser had three roles budgeted: a data engineer, an ops manager, a PM. $440K. He installed Viktor on April 12. Forty-four days later, none are on the calendar, and 18 of his team work with Viktor daily. His VP: we are editors now, not creators.