🎨
Design Director
10yAwwwards Jury • Design System
Build the design system: Tailwind tokens, shadcn/ui, dark mode only, Linear-like density, command palette, keyboard-first. Describe wireframes for the 3 critical flows.
WEB & MOBILE5 experts5 features8-step Mega Chain
Master build prompt for a landing page or portfolio
A build prompt for a conversion-focused landing page or a personal portfolio, with copy, design, animation, SEO and form flows.
Built for: Founders launching a product, freelancers and anyone building a personal brand
A one-page site does one job: getting the visitor to act. The order of headline, proof, objection handling and CTA — plus speed and analytics — matters as much as the code.
The prompt combines the Conversion Copywriter, Design Director, Motion & 3D Designer and Performance Marketer personas: section-by-section copy, an interaction and animation budget, the form and email flow, and GA4 / Pixel events.
The experts who write this prompt
Each expert adds its own task block, constraints and success criteria to the prompt. Default selection for Landing Page / Portfolio:
✍️
Conversion Copywriter
8yYC Top Writer • Landing & UX
Landing page copy: hero (headline + subheadline + CTA), 3 benefit blocks, social proof, objection handling, pricing page copy, onboarding email sequence (5 emails), UX microcopy (empty states, errors).
🌀
Motion & 3D Designer
9yAwwwards SOTD • Three.js & GSAP
Design the motion and 3D experience: Three.js / React Three Fiber scenes, GSAP and ScrollTrigger transitions, micro-interactions. A performance budget (60 fps, lazy-loading that doesn't hurt LCP, GPU cost), mobile fallbacks and accessibility via prefers-reduced-motion. List every animation's purpose, duration and trigger in a table.
🎯
Performance Marketer
9y$5M+ Ad Spend • Paid Acquisition & CRO
Set up performance marketing: GA4 + Meta Pixel + Conversions API (server-side), an event schema and UTM rules, consent-aware tagging. The first Google / Meta campaign structure (audiences, budget, creative angles), a landing-page CRO checklist, an A/B test plan and CAC / ROAS targets.
🔍
SEO/AEO Strategist
7yAI Search Pioneer • Perplexity Ranking
AEO + SEO: programmatic SEO pages, schema.org, optimization for Perplexity / ChatGPT Search, internal linking, waitlist -> launch playbook.
Recommended stack
Preloaded in step 2 of the Studio; change any of the 7 layers.
- Astro 6
- Hono + CF Workers
- Resend
Payments & revenue model
- One-time + Lifetime
- Stripe2.9% + 30¢
- LemonSqueezy5% + 50¢
Compliance
- KVKK/GDPR
Features in the prompt
Every feature appears in the prompt as a "Spec + API + UI + Tests" line.
- Contact Forms & Lead Capture
- SEO Pages & Sitemap
- CMS & Blog
- Multi-language (i18n)
- Analytics Charts
Sample prompt (shortened)
Sample idea: "An animated personal portfolio that wins work for a UI designer". Below are the master prompt's header and the first expert's block; the Studio generates the full text as 5 experts × 8 steps.
LANDING PAGE / PORTFOLIO — MASTER BUILD PROMPTClaude XML • EN
# Landing Page / Portfolio - MASTER BUILD PROMPT Stack: Astro 6, Hono + CF Workers Goal: An animated personal portfolio that wins work for a UI designer This prompt builds a full-stack Landing / Portfolio in 8 steps. Each step consumes the previous step's output. 5 experts' knowledge combined. Steps: 1. PRD & User Stories 2. Design System (Figma tokens) 3. DB Schema & API Contract 4. Auth & Billing Implementation 5. Core Features Build 6. AI Integration (RAG + Agents) 7. SEO/AEO & Analytics 8. Launch & Growth Checklist --- <prompt> <role name="Design Director" org="Awwwards Jury" specialty="Design System" experience="10y"> You are a Design Director with 10 years of experience. Specialty: Design System. You have shipped world-class products at the level of Stripe, Linear and Vercel. </role> <context> Project: Landing Page / Portfolio - An animated personal portfolio that wins work for a UI designer Type: Landing / Portfolio Vision: A hero with a short value proposition and featured work, case studies, client testimonials, a services and pricing section, a contact form and calendar link. Smooth scroll-linked animations, a 95+ Lighthouse score, English and Turkish. Target user: Founders launching a product, freelancers and anyone building a personal brand - Pain: - Budget: Competitors: USP: Monetization: One-time + Lifetime | Payments: Stripe, LemonSqueezy Tech Stack: Astro 6, Hono + CF Workers, Resend Features: Contact Forms & Lead Capture, SEO Pages & Sitemap, CMS & Blog, Multi-language (i18n), Analytics Charts Compliance: KVKK/GDPR Lang: EN </context> <task> Build the design system: Tailwind tokens, shadcn/ui, dark mode only, Linear-like density, command palette, keyboard-first. Describe wireframes for the 3 critical flows. General: production quality, copy-paste ready level of detail. </task> <technical_architecture> - Frontend: Astro 6 - App Router, Server Components, partial prerendering - Backend: Hono + CF Workers - Edge runtime, RPC, zod validation - DB: - pgvector for semantic search, type-safe ORM, RLS policies - Auth: - Passkeys first, org/team model - Search: - typo-tolerant, faceted - Realtime: Resend - presence, CRDT-ready Payment flow: Stripe, LemonSqueezy -> Webhook -> Background job -> Entitlement update -> Audit log </technical_architecture> <feature_matrix> - [ ] Contact Forms & Lead Capture -> Spec + API + UI + Tests - [ ] SEO Pages & Sitemap -> Spec + API + UI + Tests - [ ] CMS & Blog -> Spec + API + UI + Tests - [ ] Multi-language (i18n) -> Spec + API + UI + Tests - [ ] Analytics Charts -> Spec + API + UI + Tests …
The rest is in the Studio: every expert block, the feature matrix and the Mega Chain.Generate the full prompt
Mega Chain: a full-stack Landing Page / Portfolio in 8 steps
- 1. PRD & User Stories
- 2. Design System (Figma tokens)
- 3. DB Schema & API Contract
- 4. Auth & Billing Implementation
- 5. Core Features Build
- 6. AI Integration (RAG + Agents)
- 7. SEO/AEO & Analytics
- 8. Launch & Growth Checklist
FAQ
Which tech should it use?
The prompt assumes static generation such as Astro for speed, with a small server function and Resend for the form and email.
Won't animations slow it down?
The Motion & 3D Designer gives every animation a purpose and a duration, asks for lazy-loading that doesn't affect LCP and makes prefers-reduced-motion support mandatory.
Which tools can I paste the generated prompt into?
Claude Code, Cursor, Windsurf, v0, Lovable, Bolt and ChatGPT. You pick the output format (Claude XML, ChatGPT Markdown, Cursor Rules, v0, Lovable/Bolt) in step 4 of the Studio, and you can also download it as .cursorrules or CLAUDE.md.
Is it free?
Yes. On the Free plan you generate unlimited prompts with 3 experts and 2 formats — no card required. 18 experts, the Mega Chain and Export to Builders come with Monster Pro ($29/mo).
Similar project types
WordPress / Elementor Site
A build prompt that gets Claude Code to set up a business WordPress and Elementor site with a theme, page structure, SEO, forms, speed and security.
Mobile App (iOS/Android)
A build prompt for an iOS and Android app with Expo / React Native: push notifications, offline mode, in-app purchases and app store optimization.
Internal Tool / Admin Panel
A build prompt for an internal tool or admin panel with role-based permissions, bulk actions, an audit log and reporting.
AI SaaS Wrapper
A build prompt for an LLM-powered SaaS (chat, RAG, agents) with credit quotas, streaming and cost control. Claude, GPT, Gemini, Groq and vector DB picks included.
PLG Product
The build prompt for a PLG product that grows through no-signup trials, self-serve onboarding, referrals and usage-based upgrade flows.
Chrome Extension + App
A build prompt that ships a Manifest V3 Chrome extension together with its companion web app: accounts, sync and billing.
Turn your Landing Page / Portfolio idea into a master prompt in 4 steps.
Experts, stack and features come preloaded like on this page — you add the name and the idea. Free, no card required.