Design agents can do real art direction now
Most frontier coding assistants now ship a fast, creative-mode model built for exactly this: bold visual decisions made quickly, not cautious incremental edits. Claude Code calls its version Fable. ChatGPT/Codex has its own equivalent in Sol. Different labs, same idea — a model tuned for layout, type, motion, and art direction rather than just working code.
But here's the part most people miss: these models perform in direct proportion to what you hand them. Point one at a page with no context and no assets, and you'll get a competent reskin. Give it eyes, a design guide, your real product, and explicit permission to go big — and it will produce something you'd pay an agency for. Same model. Completely different output. Everything below applies whichever one you're driving.
Six things that make it perform
None of these are complicated. All of them get skipped.
Give it eyes
Connect an image-generation API — Replicate or kie.ai both work — with a key it can actually call. Without one, every hero image is either a stock photo or a plain box. With one, it can generate real, on-brand product visuals while it builds.
Give it a design guide
Hand it your brand colours, typography direction, and 3-5 words for how the thing should feel. Just as important: tell it what to avoid — "no generic SaaS gradients," "no plastic 3D," whatever your specific ick is.
Give it your product
Real photos, screenshots, logos, 3D models — anything it can reuse or draw from. Grounded beats generic every time. An agent staging your actual product looks nothing like one inventing a placeholder.
Say the words "creative freedom"
Explicitly tell it not to lightly restyle the existing page. Give it permission to use scroll animation, cinematic imagery, 3D, generated video — whatever makes it better. These models default conservative unless told otherwise.
Make it critique its own work
Ask for iteration passes before it calls the job done: a design critique, a brand/story critique, and a craft/polish pass. This is the single biggest lever — first drafts are fine, third drafts are the ones people screenshot.
Isolate the risk
Build it as a new route or branch, not an overwrite. "Do not touch the live homepage" removes the fear of a bad first draft and lets you actually give it creative freedom in the first place.
case study
Grolia: one prompt, one weekend
Grolia's old homepage was a functional Shopify page: a plain product render on a black background, a generic hero, a simple nav. It did its job and nothing else. I wrote the prompt below, pointed Claude's Fable at the live theme with a Replicate key and the brand guidelines attached, and let it run three self-critique passes before I looked at it.
Before
- Plain product render on black
- Generic feature-grid layout
- No motion, no product story
- Felt like a template
After
- Cinematic, staged product scenes generated on-brand
- Editorial layout with scroll-driven storytelling
- Motion that explains the product, not decorates it
- Felt like Grolia, not a theme
It was built on a separate route so the live store was never at risk, reviewed, and shipped. One prompt. Three critique passes. No design agency involved. See it live at grolia.com.au.
The exact prompt I used
Word for word, nothing trimmed. Notice how much of it is context and permission, not instructions.
I want you to create a completely new, highly polished version of the Grolia landing page for Flush. Do not replace the current homepage. Build this as a separate experimental route, for example /pages/landing, so we can review it safely while keeping the existing site live. The goal is to show what Grolia can become as a premium, organic, beautiful product website. I want this to feel calm, intelligent, tactile, and aspirational: a clean branded website for a compact mushroom growing cabinet that helps people grow gourmet mushrooms at home. You have creative freedom. Do not just lightly restyle the current page. Create a genuinely new concept that demonstrates excellent web design taste, strong art direction, and modern frontend craft. You can use advanced visual techniques if they make the page better: immersive product scenes, tasteful 3D, scroll animation, cinematic image treatment, elegant typography, soft motion, rich product storytelling, or generated visuals. Use the existing Grolia brand guidelines as your foundation: - Brand: Grolia - Product: Flush - Feeling: organic, calm, refined, premium, natural, beautiful, quietly technical - Use the existing Grolia logo - Use the current brand colours and typography direction where appropriate - Do not make it feel generic SaaS, crypto, AI, or sterile tech - Avoid loud gradients, plastic-looking UI, random blobs, and stock-photo energy You may inspect the current landing page and reuse anything worthwhile: copy, structure, product positioning, existing photos, icons, social proof, Kickstarter messaging, or product assets. But you are not required to preserve the current layout. You may also use the 3D unit model if useful, but make it feel significantly more premium than the current plain white box. For example, you could stage it beautifully, show mushrooms growing inside, use it as part of a scroll-driven product reveal, or combine it with generated imagery. If using generated imagery would improve the page, use Replicate with Google Nano Banana 2 to create strong branded product visuals. Generated images should feel realistic, warm, and relevant to the product, not decorative filler. You may also use Replicate for video generation, image-to-video, texture generation, product staging, or any other AI model that helps create a stronger result. If a short looping video, animated product scene, generated mushroom growth sequence, or cinematic background moment would make the landing page more compelling, create it and use it thoughtfully. Any AI-generated media should feel believable, premium, and directly connected to Flush or mushroom growing. Do not add AI media just because it is possible; use it only where it materially improves the brand story or visual quality. Suggested content to communicate: - Grow gourmet mushrooms at home with less effort - Flush controls the growing environment so mushrooms can thrive - Compact enough for the home, refined enough to leave out - Designed for repeat harvests, not one-off grow kit novelty - Choose gourmet varieties and harvest fresh mushrooms at home - Explain the value simply: better growing conditions, less misting, less guesswork, more reliable results - Include a strong Kickstarter / preorder CTA if appropriate - Include sections for how it works, why Flush exists, what you can grow, key features, and FAQs if they help the story Important design expectations: - The first viewport should immediately communicate Grolia and Flush, with the product or growing experience visible - The page should feel editorial and premium, not like a template - Typography should be beautiful, readable, and controlled - Use generous spacing, but keep the page purposeful - Motion should support understanding, not just decorate - Make mobile excellent, not an afterthought - Avoid overcrowded cards and generic feature grids unless they are genuinely useful - Every section should have a reason to exist Implementation expectations: - Build this as production-quality code in the existing Shopify/theme structure or the project structure available to you - Keep the current homepage intact - Put the new page at /pages/landing or the closest safe equivalent - Reuse existing assets where useful - Add any new assets cleanly - Keep the page performant - Make sure links, buttons, forms, and responsive behaviour work Before you consider it done, complete at least three iteration passes: Pass 1: Design critique Review the page as if it will be seen by a large audience. Look for weak visual hierarchy, generic sections, awkward spacing, boring imagery, poor mobile layout, weak CTAs, and anything that feels unfinished. Pass 2: Brand and story critique Check whether it truly feels like Grolia: organic, premium, calm, useful, and beautiful. Improve copy, imagery, rhythm, and product storytelling. Pass 3: Craft and polish critique Fix details: typography, alignment, responsive spacing, animation timing, image quality, contrast, hover/focus states, loading behaviour, and any rough edges. After the three passes, give me: 1. The route where I can review the new page 2. A short summary of the concept 3. What assets you created or reused 4. Anything you deliberately chose not to do and why Go big creatively, but keep it elegant and on-brand. I want to see a version of the Grolia landing page that feels significantly more beautiful, confident, and memorable than the current one.
Steal this template
Same structure, generalised. Works whether you're driving Fable, Sol, or whatever ships next. Fill in the brackets for your own product and keep everything else — the permission-giving and the three critique passes are doing most of the work.
I want you to create a completely new, highly polished version of the [BRAND] [homepage / landing page] for [PRODUCT]. Do not replace the current [homepage / page]. Build this as a separate experimental route, for example [SAFE ROUTE, e.g. /pages/landing or /preview], so we can review it safely while keeping the existing site live. The goal is to show what [BRAND] can become as a [premium / playful / editorial / whatever fits] product website. I want this to feel [3-5 FEELING WORDS, e.g. calm, intelligent, tactile, aspirational]: [ONE SENTENCE describing what the product/site actually is and who it's for]. You have creative freedom. Do not just lightly restyle the current page. Create a genuinely new concept that demonstrates excellent web design taste, strong art direction, and modern frontend craft. You can use advanced visual techniques if they make the page better: immersive product scenes, tasteful 3D, scroll animation, cinematic image treatment, elegant typography, soft motion, rich product storytelling, or generated visuals. Use the existing [BRAND] brand guidelines as your foundation: - Brand: [BRAND] - Product: [PRODUCT] - Feeling: [FEELING WORDS] - Use the existing [BRAND] logo - Use the current brand colours and typography direction where appropriate - Do not make it feel [CATEGORY TO AVOID, e.g. generic SaaS, crypto, AI, sterile tech] - Avoid [SPECIFIC VISUAL CLICHÉS YOU HATE, e.g. loud gradients, plastic UI, random blobs, stock-photo energy] You may inspect the current page and reuse anything worthwhile: copy, structure, product positioning, existing photos, icons, social proof, or product assets. But you are not required to preserve the current layout. You may also use [ANY EXISTING 3D MODEL / KEY VISUAL ASSET] if useful, but make it feel significantly more premium than it currently does. For example, stage it beautifully, show it in use, or combine it with generated imagery as part of a scroll-driven reveal. If using generated imagery would improve the page, use [Replicate — pick a strong current image model — or kie.ai] to create strong branded visuals. Generated images should feel realistic, warm, and relevant to the product, not decorative filler. You may also use [Replicate / kie.ai] for video generation, image-to-video, texture generation, product staging, or any other AI model that helps create a stronger result. Any AI-generated media should feel believable, premium, and directly connected to the product. Do not add AI media just because it is possible; use it only where it materially improves the brand story or visual quality. Suggested content to communicate: - [KEY MESSAGE 1] - [KEY MESSAGE 2] - [KEY MESSAGE 3] - [WHY THIS PRODUCT EXISTS / WHAT PROBLEM IT SOLVES] - [WHAT MAKES IT DIFFERENT FROM ALTERNATIVES] - Include a strong [PRIMARY CTA, e.g. preorder / signup / demo] if appropriate - Include sections for how it works, why it exists, what you get, key features, and FAQs if they help the story Important design expectations: - The first viewport should immediately communicate [BRAND] and [PRODUCT], with the product or experience visible - The page should feel editorial and premium, not like a template - Typography should be beautiful, readable, and controlled - Use generous spacing, but keep the page purposeful - Motion should support understanding, not just decorate - Make mobile excellent, not an afterthought - Avoid overcrowded cards and generic feature grids unless they are genuinely useful - Every section should have a reason to exist Implementation expectations: - Build this as production-quality code in [YOUR STACK / PROJECT STRUCTURE] - Keep the current page intact - Put the new page at [SAFE ROUTE] - Reuse existing assets where useful - Add any new assets cleanly - Keep the page performant - Make sure links, buttons, forms, and responsive behaviour work Before you consider it done, complete at least three iteration passes: Pass 1: Design critique Review the page as if it will be seen by a large audience. Look for weak visual hierarchy, generic sections, awkward spacing, boring imagery, poor mobile layout, weak CTAs, and anything that feels unfinished. Pass 2: Brand and story critique Check whether it truly feels like [BRAND]: [YOUR FEELING WORDS AGAIN]. Improve copy, imagery, rhythm, and product storytelling. Pass 3: Craft and polish critique Fix details: typography, alignment, responsive spacing, animation timing, image quality, contrast, hover/focus states, loading behaviour, and any rough edges. After the three passes, give me: 1. The route where I can review the new page 2. A short summary of the concept 3. What assets you created or reused 4. Anything you deliberately chose not to do and why Go big creatively, but keep it elegant and on-brand. I want to see a version of the [BRAND] page that feels significantly more beautiful, confident, and memorable than the current one.
Filling it in
- •Feeling words should be adjectives, not features — "organic, calm, refined" steers taste; "fast, secure, scalable" doesn't.
- •The image model matters. Get a Replicate API token (replicate.com) or a kie.ai key before you start, not after the agent asks for one.
- •Clichés to avoid is the highest-leverage line in the whole prompt. Be specific about what you've seen too much of.
- •Keep the safe route instruction even if you're confident — it's what lets you say "creative freedom" and mean it.
Three Claude Code skills worth installing
None of these replace the prompt above — they just give the agent better raw material to work from.
UI/UX Pro Max
Design intelligence built in — 50+ styles, colour palettes, and UX guidelines the agent can pull from instead of guessing.
Power Design
Brand DNA × 20 codified design principles, so the output stops looking like "AI made this" and starts looking on-brand.
Agent Room
A private local meeting room where Claude Code, Codex, and other agents compare notes. Point a second agent at the first one's draft for an adversarial critique pass.
