How to Design better with AI using @paper, @figma and @gmi_cloud https://x.com/i/article/2110444849614950400
I stopped asking AI to design my websites. I built a workflow that gives it taste.
theMost AI-built websites have the same problem.
The code works. The animations run. The layout is responsive.
But something feels off.
The typography is generic. The sections feel predictable. The imagery doesn't belong together. And no matter how many times you prompt the model to make it look better, you end up with another version of the same AI-generated website.
I realized I was asking AI to solve the wrong problem.
I was giving it a product idea and expecting it to make all the design decisions for me.
So I changed the process.
Instead of starting with a coding agent, I built a workflow that gives it the research, visual references, design context, and assets it needs before it writes a single line of code.
Here's the entire system.
01. Research the product before designing the website
Before touching the UI, I want to understand what I'm building.
What does the product do? Who is it for? What alternatives already exist? What should a visitor understand within the first few seconds? And what action should they take?
I research the market, competitors, positioning, user expectations, and the pages the website actually needs.
Then I turn the findings into Markdown files:
- research.md — market, audience, and competitor findings.
- strategy.md — positioning, messaging, and what the website needs to communicate.
- structure.md — pages, sections, and their intended purpose.
- constraints.md — requirements, restrictions, and implementation decisions.
Everything lives inside /docs.
The goal isn't to produce a massive research report. It's to give the coding agent enough context to make informed decisions instead of inventing its own assumptions for this I use pstack (by @poteto).
02. Build a visual vocabulary, not a moodboard full of pretty pictures
This is where I spend most of my time.
I explore multiple sources because each one reveals a different kind of inspiration.
- Pinterest: unexpected visual directions, color palettes, textures, typography, and art direction.
- Behance: complete brand identities, creative direction, and cohesive visual systems.
- Layers: modern website interfaces and individual UI sections.
- Recent.design: contemporary websites and digital design.
- Details.so: website references organized around specific sections and interactions.
I don't look for one website to copy.
I look for individual decisions worth learning from.
One website might have an incredible hero composition. Another might handle typography beautifully. A third might have the perfect transition between sections.
I collect these ideas independently and ask a simple question about every reference:
What exactly makes this work?
Is it the hierarchy? The spacing? The contrast? The composition? The interaction?
That answer matters more than the screenshot itself.
For each important section, I aim to collect three to five strong references. Enough to explore different directions without creating a board so large that everything becomes noise.
03. Turn inspiration into usable design context with Paper.design
Collecting references is only half the job.
The real challenge is turning them into something the coding agent can actually use.
I use the Paper.design app as the central design workspace, with the Paper Snapshot Chrome extension to capture references from live websites.
Instead of leaving inspiration scattered across browser tabs, I bring the relevant references into one place.
I organize them around the actual website:
- Hero and first impression.
- Navigation and header.
- Typography and hierarchy.
- Feature sections and product demonstrations.
- Cards, components, and layouts.
- Animations, transitions, and interactions.
- Pricing, social proof, and footer.
Each reference gets a source URL and a short explanation of what I want to learn from it.
Then I use Paper.design's MCP integration as part of the handoff to my coding agent, so the design workspace can contribute context to implementation.
The important distinction is that the agent shouldn't just receive a collection of images. It needs to understand why those images were selected.
I maintain two documents:
/docs/reference-board.md
Contains the individual references, their source URLs, and what to learn from each.
/docs/moodboard.md
Contains the synthesized design direction: typography, spacing, layout, colors, imagery, and motion.
The reference board preserves the individual ideas. The moodboard turns them into a coherent system.
04. Explore and generate visuals with GMI Cloud MCP
A website can have excellent layouts and still feel generic because its imagery is an afterthought.
Random AI-generated images don't automatically belong together. Different lighting, compositions, colors, and levels of detail can make one website feel like several unrelated designs.
I use GMI Cloud MCP (gmicloud.ai/en/mcp) for image generation and visual exploration.
The process starts with the approved reference board and moodboard.
First, I explore visual directions. Then I select the strongest direction and generate the assets needed for the website.
For every image, I define:
- What the image needs to communicate.
- Which section it belongs to.
- Its aspect ratio and composition.
- The visual direction it should follow.
- Where negative space is needed for text.
- How it should relate to the other images.
I organize the final assets inside /assets/images.
I also keep track of which section each image belongs to, so the coding agent doesn't have to guess where everything should go.
The point isn't to generate the largest number of images.
It's to create a small, coherent visual library that makes the entire website feel intentional.
05. Create a few original graphics
I also want the website to have something that doesn't come directly from a reference or an image-generation prompt.
For this, I use Figma/Paper shaders to create two or three foundational graphics.
They might be custom icons, shapes, patterns, or small illustrations.
I export them as SVGs and store them inside /assets/graphics.
These graphics establish a visual language the rest of the website can build on.
When I need another graphic, I can give the coding agent the originals and ask it to extend the same style while preserving the stroke widths, corner radii, proportions, and colors.
Small details like these help a website feel designed rather than assembled.
06. Give Codex or Claude Code the complete context
Only now do I start building.
By this point, the project contains the research, page structure, reference board, moodboard, generated images, and custom graphics.
I open the project in Codex or Claude Code and give the agent a clear set of instructions.
My project structure looks something like this:
website/
├── AGENTS.md # Codex instructions
├── CLAUDE.md # Claude Code instructions
├── docs/
│ ├── research.md
│ ├── strategy.md
│ ├── structure.md
│ ├── constraints.md
│ ├── reference-board.md
│ └── moodboard.md
├── assets/
│ ├── images/
│ └── graphics/
└── src/
I use the appropriate instruction file for whichever agent I'm running. Both should direct the agent to read the project documentation before implementation.
Here's the core build prompt:
Read the project instructions and every file in /docs
before writing any code.
Study the reference board and moodboard carefully.
Build the website according to /docs/structure.md.
Follow /docs/moodboard.md for visual direction,
including layout, typography, spacing, colors,
imagery, and motion.
Use the approved assets in /assets/images
and /assets/graphics.
Do not invent new sections or introduce a different
visual direction without asking.
Prioritize visual fidelity, responsive behavior,
accessibility, and working interactions.
When finished, run the website locally,
check the implementation, and share the result.
The model still has to make implementation decisions, but it no longer starts from a blank slate.
It has a defined direction to follow.
07. Iterate like a designer, not a prompt collector
The first version is never the finished product.
I review the website section by section and compare the implementation against the references.
I look for differences in spacing, typography, hierarchy, alignment, composition, imagery, and motion.
Then I make one correction at a time.
For example:
In the hero section, the headline is too close
to the supporting text.
Set the gap to 24px and keep the supporting
text at 60% opacity.
Do not change anything else.
This makes each iteration easier to evaluate.
If I bundle ten unrelated changes into one prompt, I lose control over what changed and why. A focused correction creates a cleaner feedback loop.
I also make straightforward code changes myself when that's faster. The goal is to improve the result, not to force every decision through the agent.
If a section still doesn't match its reference, I compare screenshots and identify the exact differences rather than repeatedly asking the model to make it look better.
Specific feedback beats vague direction.
The complete workflow
Here's the system in one line:
Research → Visual discovery → Reference capture → Moodboard → Visual exploration → Asset creation → AI implementation → Design iteration.
The tools have distinct roles:
- Research establishes what the website needs to communicate.
- Pinterest, Behance, Mobbins, Layers.to, Recent.design, and Details.so provide visual inspiration, or you can look up at other resources as well.
- Paper.design organizes the references and makes the design direction explicit.
- GMI Cloud MCP supports visual exploration and image generation.
- Figma/Paper provides original graphics.
- Codex or Claude Code implements the website and iterates on it.
Each phase produces something concrete that the next phase can use.
That's what makes this a workflow instead of a collection of tools.
End Notes
AI coding agents are becoming increasingly capable of implementing complex interfaces. But implementation capability alone doesn't guarantee good design.
If you give an agent a vague brief, it has to invent the missing decisions.
If you give it research, specific references, a coherent moodboard, original assets, and clear constraints, you reduce the amount of invention required.
You also make the result easier to evaluate because you have something concrete to compare it against.
I don't want AI to make every design decision for me.
I want it to execute a direction that I've thought through.
The goal isn't to get better at prompting AI to make beautiful websites. It's to build a process that gives AI fewer opportunities to make generic ones.
That's the workflow I'm building with, and the system I'll keep refining.