Prompt Recipes

Do not ask for "a modern landing page." That is how you get the global average of training data wearing a blazer.

Figma vs Code-First

Both workflows are valid, but if you are going to use an agent you might as well have it write code directly. Building in Figma is too slow when the agent can produce a working implementation in the same time. Figma-first is still useful when exploring a visual direction you cannot articulate yet, but the default should be code-first with strong art direction in the prompt. Source: User, 2026-05-01

Core Rule

Ask for explicit art direction, explicit materials, explicit type choices, explicit motion budget, explicit banned defaults, and explicit component inventory.

Prompt Skeleton for Coding Agents

1. Product and audience
2. Art-direction thesis (archetype, palette, typography, material language)
3. Component inventory (navbar, hero, proof, product shot, sections)
4. Motion thesis (ambient, interaction, narrative)
5. Token constraints (no hardcoded hex, tokens for everything)
6. Runtime stack (Tailwind v4, Motion, GSAP, R3F, etc.)
7. Responsiveness and performance constraints
8. Banned defaults (generic shadcn, Inter/Roboto, random gradients, plain CSS as main motion arch)

Prompt-to-Hero Recipe

The Taskora bookmark is a compact example of an AI design prompt that is specific enough to produce a usable landing-page direction. The prompt names the fictional product, stack (React, Tailwind CSS, Framer Motion), responsive target, dark SaaS hero, conversion layout, background video, animated foreground cards, typography direction, section inventory, and exact copy fragments. That is the reusable pattern: give the agent a complete composition contract, not just a vibe. Source: X/@viktoroddy thread, 2026-02-02

Local video review shows a polished blue SaaS hero with "Simplify Your Workflow. Stay Focused.", "Taskora helps teams manage projects...", primary CTA, secondary CTA, and floating product/coin cards over a generated background. The durable lesson is not that Nano Banana, Google Flow, or Lovable are mandatory. It is that generated media plus a detailed implementation prompt can quickly produce a coherent hero candidate that still needs human taste review for brand originality, information hierarchy, accessibility, and generic-SaaS drift. Source: X/@viktoroddy visual artifact, 2026-02-02

Use this pattern for first-pass exploration, then harden the result through AI-Native Design Patterns and Interface Micro-Polish:

1. Keep the prompt's section inventory and motion budget.
2. Replace generic copy and interchangeable blue-card visuals.
3. Verify contrast, focus states, mobile text fit, and loading behavior.
4. Extract only reusable visual decisions into tokens or a DESIGN.md.

AI Video Background Hero Recipe

The second Viktor Oddy bookmark is the narrower version of the same pattern: generate a loop-friendly abstract video first, then prompt the coding agent to build a hero around it. The recipe works when the video is a background plate, not the composition itself. It should preserve negative space for copy, stay calm behind text, and avoid overlays that hide the generated material. Source: X/@viktoroddy, 2026-03-07

The exact prompt shape is useful: full-screen React hero, Tailwind CSS v4, custom typography, object-cover video, autoplay/loop/muted/playsInline, transparent nav, one badge, two-line headline with a sans/serif contrast, sharp low-radius button, and four small corner accents. Local video review shows a usable agency hero with a dark/navy field, blurred red/cyan light sweep, white nav/copy, and a restrained CTA. Source: local artifact review, 2026-07-01

Google's own Veo/Flow docs support the underlying workflow: Veo 3.1 is available in Google Flow and is positioned around prompt adherence, realism, audio/video generation, and "Frames to Video"/scene control. For landing pages, use those capabilities to make a quiet ambient loop; do not ask for a full UI screenshot from the video model and then fight its text artifacts in code. Source: Google DeepMind Veo docs, 2026-07-01; Source: Google Blog Flow/Veo 3.1 update, 2026-07-01

Hardening checklist:

1. Make the first frame work as the poster image.
2. Keep video motion below the reading layer.
3. Use poster, preload, reduced-motion handling, and a static fallback.
4. Test mobile cropping before accepting the prompt output.
5. Replace placeholder "agency" copy before treating it as design.

Ask for Proposals First

When the brief is fuzzy, ask for 3 directions: one safer, one bolder, one weird but plausible. Have the agent specify type pairing, palette, layout idea, motion idea, and reference sites. Then pick and deepen one.

Screenshot-First Workflow

When the user has references but not vocabulary: collect screenshots of hero/nav/CTA/background, decompose into layers (background, foreground UI, icons/logos, texture/lighting), recreate assets separately, recompose in code.

Asset Generation Prompts

Background-only: "Recreate only the environmental background in high resolution. Keep the exact material language, lighting, and spatial depth. Remove all text, logos, UI. Make it loop-friendly."

UI-only: "Recreate only the foreground UI on neutral background. Keep hierarchy, spacing intent, component structure. Generate three close variants with different type treatments."

Animation for backgrounds: "Animate as a smooth loop. Movement noticeable but calm. Preserve composition and lighting. Avoid sudden perspective changes."

Product Representation Recipe

For physical products, do not prompt for an attractive scene in isolation. Establish an exact product model and a reusable photographic world, then ask for controlled variations inside that system. Name invariant product details, set materials, light direction and softness, camera/lens, composition, palette, real-world scale, channel, and negative space. Use a real style reference or saved studio; do not make the model invent the product and the brand language in the same pass. Source: Kive; Kive Writing Prompts, AI Product Shots, and AI Studios docs, checked 2026-07-13; User request, 2026-07-13

Review the result as photography: reject altered silhouette or labels, impossible shadows/reflections, floating contact points, plastic material response, over-perfect symmetry, random luxury props, excessive bloom, and generic advertising color grades. The output should look commissioned for this product, not generated for the category average. Save the winning studio/reference/prompt combination and reuse it across the line.

Better Constraints for AI Visuals

First frame must work as a poster. Avoid noisy motion behind text. Leave negative space for copy. One material family. Limited palette.

Practical Archetype Recipes

Premium AI SaaS: "Quiet, expensive visual language. Dark carbon or warm parchment base. One restrained accent. Precise sans with mono labels. Subtle motion: one hero motif, soft reveals."

Editorial devtool: "Strong grid, figure labels, mono annotations, sharp grotesk. Favor layout rhythm over gradients. One signature technical graphic."

Architectural blueprint: "Off-white, deep ink, cobalt. Linework, measurements, labels, structured callouts. Diagrammatic motion."

Cinematic 3D: "Scene-led hero, environment not flat panel. Minimal UI chrome. Subtle camera drift, pointer parallax, ambient light motion."

Neo-brutalist: "Oversized typography, hard contrast, deliberate tension. Black/white plus one aggressive accent. Fast sharp motion, typography does the violence."

Banned-Tendency Block

"Do not use Inter, Roboto, default shadcn, generic purple gradients, emoji, interchangeable startup visuals, or plain CSS as the default motion architecture. Do not center everything by default. Do not add motion unless it supports hierarchy, depth, or product understanding."

The Vocabulary Unlock

The single biggest improvement for AI-generated frontends is learning what UI components are actually called. When you say "dropdown" the model picks the safest interpretation. When you say "combobox" or "command palette" or "sheet" the output jumps in quality. Specificity in component names beats vague descriptions every time. Source: User, 2026-05-01; see also Frontend and Design Skills