Itamar Katan
HomeProjects Chat
Guide · AI design workflow

Design with AI.
Without looking AI-made.

This is the workflow I use to make AI-assisted designs that still feel original and intentional. No coding experience, no Figma, no endless prompts. Just ChatGPT, Pinterest, Codex and your own taste.

AI slop is what you get when the tool makes the design decisions for you. The fix isn't a better prompt. It's a process where your taste leads and the AI does the production work.

Interactive version on Meraki Mind
From visual references to a working page
The proof

Four different designs.

The same workflow produced four completely different hero sections: bold, minimal, sculptural and playful.

Colorful illustrated hero with a blue duck
Colorful illustrated world
Clean sculptural hero composition
Clean sculptural composition
Bold neon hero section
Bold neon look
Soft playful hero with a character
Soft playful character

There is no single "AI aesthetic" to discover. Your taste is what steers the tools toward a clear, distinctive direction.

Step 01 · Set the direction

Build your visual language.

Color
The colors, contrast and mood.
Typography
How the text looks: size, weight and personality.
Imagery
The kind of visuals: photos, 3D, illustration or textures.
Layout
Where things sit, what feels important and what you see first.

Follow the feeling. Search for anything and take inspiration from anywhere. A reference that only captures the mood you want is completely valid. What matters is that the references you pick make sense together. I usually collect 3-4.

A Pinterest board of visual references for the hero
Pinterest inspiration references
Don't ask AI to copy. Tell it what to learn from each reference: the typography (how the text looks), the color palette (the main colors) and the layout (where things sit on the page).
Step 02 · Generate concepts

Give ChatGPT the full picture.

I use ChatGPT in the browser for this stage. You can see several images side by side, talk through each reference and keep refining the concept in one conversation. A useful brief answers four questions:

  1. What are we designing, and who is it for?
  2. What should the visitor understand or do?
  3. What should the design make people feel?
  4. What should we borrow from each reference?
Concept prompt
Use the brief below:
[Paste information about yourself, your business, or your product]

Design a hero section inspired by the attached references. Draw from their mood, color palette, typography, and energy, but do not copy any one reference.

Create an original, unexpected design in a 16:9 format. Keep the hierarchy clear and the composition focused; avoid unnecessary detail.

Create 3 genuinely different directions. Vary the layout, focal point, and visual approach - not just the colors.

Show ChatGPT the range you want, not one polished answer. In the Meraki Mind example, two directions mark the edges: a clean orbital composition and a richer product-system layout.

Meraki concept: clean, focused, orbital composition
Clean, focused and orbital
Meraki concept: rich, detailed product system
Rich, detailed product system
Step 03 · Refine the concept

One direction. Two iterations.

Now the goal changes. You stop exploring unrelated options, take the clean direction from the last step and improve the same idea twice until it's the final concept.

Starting direction
Start · the clean variation
Iteration 01 with more depth and product cues
01 · more depth and product cues
Final iteration with a clearer story and focus
02 · final: clearer story and focus
Protect what works

Name the colors, character, typography or layout decisions that have to stay.

Useful corrections
  • "Keep the idea. Make it brighter and cleaner."
  • "Make the character the clear focal point."
  • "Try three layouts without changing the visual language."
Still stuck? Start a new chat with the same prompt and references. A fresh result can show you a better direction.
Step 04 · Build in Codex

Turn the image into a blueprint.

Now move from ChatGPT to Codex and use the Image to Code skill. If it isn't there, install it from Plugins.

  1. Create and open a new project folder in Codex.
  2. Open Image to Code (install it from Plugins if it's missing).
  3. Attach the final concept image.
  4. Ask for the closest possible visual match, with every asset created separately.
  5. Run it locally and compare it with the image.
  6. Ask for precise fixes, then test tablet and mobile.
Codex build prompt
Use the Image to Code skill to rebuild the attached hero section with the highest possible visual accuracy.

Use the technologies already in the project and make the page fully responsive.

Break the design into separate assets and components. Create every visual asset separately - illustrations, images, icons, and backgrounds - rather than baking them into one flat image, so each part can be edited or animated later. Preserve its hierarchy, spacing, colors, typography, and proportions. Add only subtle motion that fits the visual language.

Make every button and interaction work. Keep all copy as live text rather than baking it into images, and make sure the page looks and works well on desktop, tablet, and mobile.

When you are done, run the project and show me the result so I can compare it with the reference.
The built blue duck hero running locally
localhost:5173 / hero

The first build can get close, but the quality comes from comparing. Check spacing, scale, image crops, typography and responsive behavior one detail at a time.

Step 05 · Extend the system

Repeat the workflow. Keep the visual language.

Go back to the ChatGPT conversation where you made the first concept and design each new section there, one at a time, so the visual context stays intact.

Next-section prompt
Great. Now design the next section of the page: [Features / Customer stories / About / Call to action].

Keep the same visual language: typography, colors, materials, and rhythm. Do not reuse the hero layout. Create a new composition that suits this section's purpose while still feeling like part of the same website.

Use the attached references to guide the structure and user experience, but do not copy their content, branding, or design.

Create 3 genuinely different directions to choose from.
About, testimonials, capabilities and process sections designed to continue the blue duck hero
From the hero to the next section

For functional sections, add UX references too. For features, pricing, customer stories, forms, navigation or onboarding, collect examples from strong websites and competitors. Familiar patterns help people understand the interface fast, while your brand, content and visual language stay yours.

This takes time. There's no magic prompt. Repeating the loop for every section is what turns one striking hero into a coherent, usable website.
Your turn

Build it. Put it live.

  1. 01
    Collect 3-4 cohesive references.
  2. 02
    Generate three distinct concepts.
  3. 03
    Refine with specific visual feedback.
  4. 04
    Build the chosen direction in Codex.
  5. 05
    Repeat for every section.

AI makes production faster. Your taste, clear decisions and willingness to refine are what make the result feel like yours.

Try the interactive guide, with live hero previews, on Meraki Mind
Questions people ask

Designing with AI, without the slop.

What is AI slop in design?

AI slop is design that looks generated: generic gradients, the same stock layouts, random 3D blobs and copy baked into images. It happens when the tool makes the decisions instead of the designer.

How do you design with AI without it looking AI-made?

Start from your own taste, not from a prompt. Collect 3-4 references that fit together, tell ChatGPT what to learn from each one, generate three genuinely different directions, refine one of them with specific feedback, then rebuild it in Codex with every asset as a separate, editable piece.

Which tools does this workflow use?

Pinterest for references, ChatGPT in the browser for concepts and iterations, and Codex with the Image to Code skill to turn the final image into a responsive page.

Do I need to know how to code or use Figma?

No. The workflow was written for people without coding or Figma experience. You need taste and patience to compare the build with the concept and ask for precise fixes.

Is there a magic prompt?

No. The prompts help, but the quality comes from repeating the same loop for every section: references, three options, specific feedback, build, compare.

Who wrote this guide?

Itamar Katan, an EdTech product designer and AI builder. It's a companion to the interactive AI design guide on Meraki Mind.