WSS WEBSITE BRIEF GENERATOR

Full-pipeline intake → Compound Build Prompt, Fidelity Budget, Conversion, QA & Handoff outputs
Not saved yet
  1. Fill out the 8 sections on the left, top to bottom — each feeds a specific part of the final prompt.
  2. Watch the right panel update live as you type. Switch between its 6 tabs to see the different outputs this tool builds.
  3. Resolve any warnings in Section 6 (Fidelity Budget) before you copy anything — a red warning there means you're about to promise the client something the build can't actually deliver.
  4. Copy each block with its Copy button and paste it into Claude Design, Claude Code, or whichever platform you're building in for this client.
1 Business 2 SEO 3 Design direction 4 Sitemap & scope 5 Migration destination 6 Fidelity budget 7 Third-party assets 8 QA & handoff

1 Business info

Feeds the Business Info block of the build prompt. Thin answers here produce filler copy.

This is the single highest-leverage section in the whole form. Whatever the AI doesn't know about the business, it invents — and invented copy reads as generic filler that has to be rewritten later. Answer every field even if it feels obvious; specificity here is what makes the generated site sound like this business instead of any business.
A secondary CTA is a lighter-commitment fallback for visitors not ready for the primary action — e.g. primary "Book a free consult", secondary "Call us with questions".

2 SEO & content

Feeds the SEO block. Aim for 3–8 phrases, service + location style.

Keywords tell the AI what a real customer types into Google before finding this business — usually a service plus a location ("dog grooming las vegas", not just "grooming"). Skip this section and the generated copy will read fine but rank for nothing.
Anything factual that must appear correctly — hours, license numbers, guarantees, pricing caveats. Without this, the AI will either omit these facts or invent plausible-sounding wrong ones.

3 Design direction

The Compound Directive — one choice per dimension. Pick a vertical preset to auto-fill, then override anything.

Vague prompts ("make it modern") produce the generic AI-website look because the AI has to guess on four separate axes at once — how the page is laid out, what its surfaces feel like, how it moves, and what philosophy it's built to. Naming one choice per axis removes the guessing. If any of the terms below are unfamiliar, open the glossary — don't skip a dimension because the label is unclear.
What do these terms mean? (click to expand)
A — Structural / layout — how content is arranged on the page.
Bento/Modular: rounded container cards of varying sizes, like an Apple or Linear product page. Asymmetric: intentionally unbalanced, broken-grid composition. Anti-grid/Fluid: off-axis, overlapping elements instead of rigid boxes. Editorial: high-fashion magazine layout, dramatic type, deliberate spacing. Layered/Depth-driven: stacked, overlapping cards with a clear foreground/background.
B — Textural / visual — what surfaces look and feel like.
Glassmorphic: translucent cards with a background blur, like frosted glass. Neobrutalist/Tactile Brutalist: hard black borders, flat bold color, zero shadows — raw and engineered-looking, not soft. Tactile/Organic: earthy tones, paper or grain texture, soft rounded edges. Technical Mono/Console: monospaced type, dark terminal-style backgrounds. Monochromatic-accented: mostly black and white, broken by one bright accent color. Spatial/WebGL 3D: real 3D objects rendered in the browser. Chromatic/Saturated: bold, high-impact color instead of safe pastels. Neo-Nostalgic/Analog: retro type and vintage color paired with modern interaction.
C — Motion / interactivity — how the page responds to the user.
Kinetic typography: text that visibly morphs or changes weight on scroll or hover. Scroll-driven/Parallax: content reveals itself as the user scrolls, telling a visual story. Micro-interactive: small feedback moments — a button that reacts to the cursor, a toggle that springs. Skeletal/Progressive: a soft shimmer placeholder while content loads, instead of a spinner.
D — AI-native / functional philosophy — what the site is optimized to do.
Adaptive/Hyper-personalized: content or layout shifts based on who's visiting. Clarity-first/Calm: zero friction, fast load, lots of whitespace, nothing fighting for attention. Conversational/Agentic: built around a chat or natural-language input instead of menus and forms. Semantic/AI-readable: code structured cleanly enough that search engines and AI crawlers can parse it accurately — see Section 8 for more on this.
The name of a pre-built WSS color/type/component system, if one already exists for this direction. Leave as "new" and the AI will build one from scratch based on the choices above.
What's OKLCH? A newer way of specifying color that produces cleaner, perceptually even light/dark variations than a hex code — worth specifying by name so the AI doesn't default to muddy interpolated tones. A reference shapes the output — it does not get copied. Never reference a competitor's site or another agency's commissioned work without the right to do so.

4 Sitemap & scope

Name every page and its distinct job. Feeds the Scope block.

A page count alone ("5 pages") often produces near-duplicate pages or silent omissions once the AI is generating under its own momentum. Naming each page's specific job — what it has to accomplish that no other page does — is what keeps a multi-page site coherent instead of repetitive.
PAGE
PURPOSE
+ Standard 5-page set + Service business set
Say what NOT to build. AI site generators default to adding a blog and portfolio unless told otherwise — cheap to prevent here, tedious to delete later.

5 Migration destination & constraints

Determines whether the Constraints block enforces the Elementor conversion rules.

WordPress/Elementor means the site gets converted afterward into Elementor, a page builder the client can edit without touching code. That destination limits which visual effects are safe to build (see Section 6). Standalone hosted HTML skips that conversion entirely — full creative freedom, but the client can't self-edit without a developer.
Largest Contentful Paint — seconds until the biggest visible element (usually the hero image or headline) finishes loading. 2.5s or under is the standard target; slower than that and visitors perceive the site as slow even if it eventually works.
Cumulative Layout Shift — a score for how much the page jumps around while loading (images popping in without reserved space, fonts swapping late). 0.1 or lower is the target; anything higher means visitors misclick because the page moved under them.

6 Fidelity budget & delivery tier

Classify every effect before it enters the prompt. Selecting an effect above your tier shows a warning — resolve it before you build.

Why this section exists: Claude Design can build effects that Elementor cannot hold. If an effect is designed and shown to the client before this triage happens, the choice becomes "quietly rebuild it for free" or "hand over something worse than what was shown." Classify everything here first, and that choice never has to happen.

Survives = converts to Elementor with no extra work. Degrades = works but needs manual rebuild time in Elementor — real, billable hours. Rebuild = needs custom code Elementor can't hold natively; only build it as a paid, separate deliverable.
What do these technical terms mean? (click to expand)
Backdrop-filter (glassmorphism): a CSS effect that blurs whatever sits behind an element, producing the frosted-glass look.
Container queries: lets a component restyle itself based on the width of its own container, not the whole screen — needed for bento-grid cards that get reused at different sizes.
Staggered scroll reveals: elements animating into view one after another, slightly offset in time, as the user scrolls.
Variable-font typography: using a font file that can smoothly animate its own weight or width, rather than swapping between separate bold/regular files — the mechanism behind "kinetic type."
Scrollytelling (pinned/scrubbed): a section that locks in place while the user scrolls, playing an animation tied directly to scroll position.
Skeleton loading states: a soft gray shimmer placeholder shaped like the real content, shown while the page loads.
WebGL / Three.js / shaders: technology for rendering real 3D graphics in a browser — the most expensive and least portable effect on this list.
Survives — always safe
Degrades — needs Signature tier or higher
Rebuild — needs Showpiece tier, budget separately

7 Third-party creative assets

Only relevant if the build needs bespoke imagery/video beyond what Claude Design generates natively.

Only fill this out if the brief needs something a design tool can't generate well on its own — photorealistic product shots, brand video, or a consistent illustration style repeated across many pages. Leave it blank for most builds; Claude Design's native output covers everything else.
Commercial-use terms vary by tool and subscription tier and change over time. Note what you confirmed and when — this is the record you'd want if a client ever asks where an asset's usage rights came from.

8 QA & handoff preferences

These answers shape the Conversion, Cowork, QA, and Handoff tabs on the right — the parts of the pipeline that happen after the design itself is approved.
WCAG = Web Content Accessibility Guidelines, the standard rulebook for making a site usable by people with visual, motor, or cognitive disabilities. AA is the level almost every business site should meet and is what most legal/compliance standards reference. AAA is a stricter level — higher contrast, more constraints — appropriate for government, healthcare, or education clients, but it will visibly limit some design choices (e.g. low-contrast text-on-color combinations). Draft fidelity is a cheaper, lower-detail first pass used to validate direction before spending full generation credit. Keeping this checked prevents paying for a polished build of a direction the client hasn't seen yet.
Six outputs, built from the same answers. Build prompt goes to Claude Design. Fidelity budget is your internal check — resolve red warnings before you build. Conversion goes to Claude Code once the design is approved. Cowork setup configures the WordPress environment. QA pass runs the pre-handoff checklist. Handoff is the boundary document you give the client.
Build prompt
Fidelity budget
Conversion
Cowork setup
QA pass
Handoff

Master build prompt


    

    

      
Fidelity budget summary

      

    

    

      
Elementor conversion prompt

      

    

    

      
Cowork environment setup recipe

      

    

    

      
QA pass prompt

      

    

    

      
Handoff boundary document