Claude Design Prompt Examples — Spec-Style Prompting (Viktor Oddy / motionsites.ai)

Source: Viktor Oddy X tweet — motionsites.ai marketing template prompt

A public example of the “spec-prompt” prompting pattern for Claude Design and Claude Code — one ultra-detailed React + TypeScript + Vite + Tailwind email-style marketing template specified down to pixel values, exact hex codes, font weights, and CDN asset URLs. Viktor Oddy published it as a free sample from the motionsites.ai paywalled prompt library. The prompt itself is the lesson: it demonstrates how much structure is needed to get production-ready single-shot output.

Key Takeaways

• “Spec-prompt” is a distinct pattern. Not “design me a landing page” — the prompt encodes every visual decision. Pixel values, exact hex, font weights, exact CSS variable names, CDN URLs for video assets, exact lucide-react icon imports.
• It targets Claude Design / Claude Code natively. Dependency list (react, react-dom, lucide-react, @supabase/Bolt Database-js, Tailwind, Vite, TypeScript) and the file structure assumptions match Claude’s default stack.
• “No other UI libraries” is explicit in the prompt. Spec-prompts exclude as aggressively as they include.
• Reusable components are named upfront. Step, Divider, PrimaryButton, SolidButton. This matches the refactor Claude Code would produce anyway — pre-naming them just aligns the output.
• motionsites.ai is a paywalled prompt library. Tweet is the free sample. Viability of the paid catalog cannot be verified from this source alone.
• The prompt’s target aesthetic is “Anthropic-green CTA + serif headlines + dark cards.” Lemon-yellow #DCFF00 / #D8F90A CTA pills against #111111 cards, with Instrument Serif for display and Inter for body — an aesthetic that maps cleanly onto “Cult-Indie” families.

Why This Prompt Pattern Matters

Most prompts sit on a vagueness spectrum:

Vagueness tier	Example	Claude Design behavior
Vibe prompt	”Design a marketing page for an AI course”	Generic AI-slop baseline output
Structure prompt	”Hero, 4-step list, 2 video sections, CTA callout, footer with social icons”	Usable draft, needs comment-tool edits for polish
Spec prompt (this example)	Every pixel, every hex, every font, every CDN URL, every component name	Single-shot production-ready output

The tradeoff: spec-prompts are ~5× the writing effort but produce ~5× less re-work. For repeat-use templates (email layouts, component patterns, brand collateral) this is worth it. For exploratory work it’s overkill — spec-prompt an asset once you’ve validated the structure with vibe-prompting.

What the Prompt Actually Builds

A React + TypeScript + Vite + Tailwind single-page email-style marketing template with:

• Page shell: Full-page dark background #050505, centered 640px-wide card with shadow-2xl and ring-1 ring-white/5.
• Hero section (aspect 640/820): Autoplay looped video background from a specific Cloudfront CDN URL, gradient fade to dark, “Design Rocket / CERTIFICATES” brand block, “NOW AVAILABLE” tagline, 58px Instrument Serif headline, #D8F90A pill CTA “Enroll Now” with lucide-react ArrowRight.
• Intro paragraph block — 18px body copy, primary rectangular CTA button “Get Started”.
• Divider — 1px × 24w white-20% line.
• Section 2 (“Transform how you lead with AI”) — 46px H2 + 370px video card (specific Cloudfront URL) + 4-step numbered list (7×7 yellow squares + 17px body) + solid white button “Enroll Now”.
• Divider.
• Section 3 (“Build your AI transformation roadmap”) — 46px H2 + video card (different Cloudfront URL) + 18px paragraph + solid white button “Learn More”.
• CTA callout card — #D8F90A background, 52px Instrument Serif H2 “Ready to lead AI at work?”, PrimaryButton.
• Footer — #080808 background, brand link, Microsoft disclaimer, 6 lucide-react social icons (Facebook, Twitter, Instagram, Youtube, Linkedin, Music2), unsubscribe text, Support | Privacy | Terms | Unsubscribe link row, copyright.
• Reusable components: Step, Divider, PrimaryButton, SolidButton. Transitions duration-200 default; video hover scale is 700ms.

The 4 Non-Obvious Techniques in This Prompt

1. Lock fonts in CSS variables, not arbitrary class names. --font-display: 'Instrument Serif', serif and --font-body: 'Inter', sans-serif. Downstream refactors don’t touch the prompt.
2. Specify the exclusions. “No other UI libraries” appears in the dependency list explicitly. Without it, Claude is prone to reaching for shadcn/ui or Radix by default.
3. Use absolute pixel padding for sections that need rhythm. px-[78px], px-[42px], px-[76px] — odd values chosen to produce specific visual rhythm. A spec-prompt rule of thumb: if you’d fight Tailwind’s scale anyway, write the arbitrary value.
4. Preload all video assets via literal CDN URLs. The prompt references 3 specific Cloudfront MP4 URLs as backgrounds / content videos. Not placeholders — actual assets. This is what makes the prompt single-shot.

Try It

1. Copy the prompt verbatim into Claude Design. Run it as-is once with no design system. Note whether the output matches the spec on first pass.
2. Run it again with a design system loaded. Compare — does the design system override the explicit hex codes in the prompt, or do the explicit hex codes win?
3. Adapt the spec-prompt pattern to one of your own templates. Take an existing one-pager or landing page that you know works, and translate every visual decision into prompt specification.
4. Measure re-work. Count comment-tool edits needed to ship a spec-prompt output vs. a structure-prompt output of similar complexity.
5. Evaluate motionsites.ai critically. If the free sample is representative, the paid library is valuable. If the free sample is the best of 100 prompts, it’s noise.

Implementation Notes for Claude Design

• Spec-prompt prompts work best as a single large chat message, not iterative refinement. Paste the whole thing.
• Claude Design’s inline comment tool is the right corrective surface for any spec-prompt gap — don’t edit the prompt, edit the output.
• Design system vs spec-prompt hex conflict: unresolved from this source alone. Test with your own design system to find out which wins.
• The prompt asks for @supabase/Bolt Database-js as a dependency — unusual choice for a static marketing page. ^[inferred — this looks like a quirk of Viktor Oddy’s specific toolchain rather than a necessary dependency; evaluate before copying.]

Related

• MotionSites — Premium Hero Prompts — the full motionsites.ai product entity (catalog, pricing, founder, workflow). This article covers the single free sample prompt; that one covers the paid library it advertises.
• Claude Design (Anthropic Labs) — entity page
• Claude Design — 10 Use Cases and Pro Tips — the leopardracer prompt-recipes playbook (vibe-tier recipes) — this article shows the spec-tier equivalent
• awesome-claude-design (aesthetic family prompts) — the library of aesthetic-family prompts; this article shows one brand-specific spec that happens to match Editorial Minimalism
• Frontend Design Deep Dive — the Claude Code skill for authoring this kind of output natively in your repo
• Anti-AI Slop Guide — counterpoint: what to ban
• awesome-design-md (DESIGN.md format) — the natural evolution of spec-prompting into a project-level file

Open Questions

• Is spec-prompting at this level of detail cost-effective in Claude Design’s weekly usage pool? (See usage-limits observation — a heavy user hit the weekly cap in ~2 hours.)
• Does the @supabase/Bolt Database-js dependency in the prompt have a reason, or is it a paste artifact?
• The 3 Cloudfront video URLs are specific to Viktor Oddy’s account — they will likely be removed or expire. Does Claude Design gracefully degrade when referenced video assets return 404?
• Is motionsites.ai’s paid library actually curated, or AI-generated bulk prompts? Source material quality not verifiable from a single free sample.