The guideStart here

Design with AI.Without looking AI-made.

Here is a practical workflow for creating 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.

Watch the workflow

From visual references to a working page

The proofFour different designs

Same workflow.Four different designs.

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

1References2Concept3Refine4Build5Launch

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

Live HTMLOpen full page

Step 01Set the direction

Build your visual language.

Start on Pinterest. Find 3–4 references that feel like they belong to the same world—websites, posters, packaging, photography, fashion, or architecture.

ColorThe colors, contrast, and mood

TypographyHow the text looks: size, weight, and personality

ImageryThe kind of visuals: photos, 3D, illustration, or textures

LayoutWhere things sit, what feels important, and what you see first

Follow the feeling.

Search for anything and take inspiration from anywhere. References that simply capture the mood or visual language you want to create are completely valid. The only thing that matters is that the references you choose make sense together.

Do not ask AI to copy. Explain what to learn from each reference: the typography, meaning how the text looks; the color palette, meaning the main colors; and the layout, meaning where things sit on the page.

Step 02Generate concepts

Give ChatGPT the full picture.

For this stage, use ChatGPT in your browser. You can view several images side by side, discuss each reference, and keep refining the concept in one conversation.

A useful brief answers four questions:

01What are we designing, and who is it for?
02What should the visitor understand or do?
03What should the design make people feel?
04What should we borrow from each reference?

Show ChatGPT the range you want, not only one polished answer. These two Meraki directions communicate two useful boundaries: a clean orbital composition and a richer product-system layout.

Context direction 01Clean, focused, and orbital

Context direction 02Rich, detailed product system

Prompt to copy

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.

Step 03Refine the concept

One direction. Two iterations.

Now the goal changes: we are no longer exploring unrelated variations. We take the clean direction from the previous stage and improve the same idea twice, until it becomes the final concept.

Be specific

“Too busy” is vague. “Remove the two background cards and enlarge the main character” gives a clear next step.

Protect what works

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

Compare versions

Note what improved and what was lost before asking for the next change.

Useful correctionsKeep 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 reveal a better direction.

Starting directionThe clean variation chosen in the previous stage

Iteration 01More depth, context, and product cues

Iteration 02 · FinalClearer story, focus, and visual journey

Step 04Build in Codex

Turn the image into a blueprint.

Now move from ChatGPT to Codex. Use the Image to Code skill: if it is not available, open Plugins and install it. Then attach the final concept image and send the build prompt.

Create and open a new project folder in Codex.

Open Image to Code. If it is missing, find and install it from Plugins.

Attach the final concept image.

Ask for the closest possible visual match, with every asset created separately.

Run it locally and compare it with the image.

Request precise fixes, then test tablet and mobile.

The first build may get close, but the final quality comes from comparison. Review spacing, scale, image crops, typography, and responsive behavior one detail at a time.

localhost:5173 / heroLIVE

The implemented blue duck hero previewed locally

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.

DesktopTabletMobile

Step 05Extend the system

Repeat the workflow. Keep the visual language.

Return to the ChatGPT conversation where you created the first concept. Design each new section there, one at a time, so the visual context stays intact.

Add section referencesGenerate 3 optionsBuild and compare

For functional sections, add UX references too.

For features, pricing, customer stories, forms, navigation, or onboarding, collect examples from strong websites and relevant competitors. Use familiar patterns so people understand the interface quickly, while keeping your own brand, content, and visual language.

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

Next section · same chat

About, customer testimonials, capabilities, and process sections designed as a continuation of the blue duck hero

Next-section template

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.

Your turnKeep the workflow

Design it.Build it. Put it live.

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

Collect 3–4 cohesive references.Generate three distinct concepts.Refine with specific visual feedback.Build the chosen direction in Codex.Repeat the workflow for every section.

4 HEROESONE WORKFLOW

Contact usItamar Katan on LinkedIn Learn more about Meraki MindFrom expertise to a tested digital product ITAMAR KATANMy portfolioThis guide, written up on my portfolio