Portfolio & Landing Page Generator — 10 Claude Artifact Prompts

Complete Websites — Generated Inside Claude in One Prompt

Need a landing page fast? These 10 prompts generate complete, multi-section websites as Claude Artifacts — hero sections, feature grids, testimonials, pricing, footers, and more. Each produces a fully responsive, beautifully designed page you can preview in Claude and deploy immediately. Perfect for MVPs, freelance projects, or personal sites.

What's Inside — 10 Landing Page Prompts

• Developer Portfolio Dark Theme — Complete developer portfolio website. Tech: React + custom CSS. Sections: Dark hero with typing animation, about me with tech stack icons, project showcase grid with hover effects, skills radar chart, experience timeline, GitHub stats section, contact form, social links footer. Fully responsive.
• Startup Landing Page — SaaS/startup product landing page. Tech: React + modern CSS. Sections: Hero with product screenshot, "How It Works" 3-step section, feature grid with icons, social proof logos, testimonial carousel, pricing table, FAQ accordion, CTA section, footer. Conversion-optimized layout.
• Restaurant Website — Restaurant/cafe website with menu. Tech: React + warm design. Sections: Hero with food photography background, about the chef, menu with categories and prices, special dishes carousel, reservation form, location map placeholder, hours of operation, Instagram feed grid, footer.
• Photography Portfolio — Visual-first photography portfolio. Tech: React + CSS grid. Sections: Full-screen hero image, masonry gallery grid with lightbox, categories filter (portrait, landscape, wedding, street), about photographer, client testimonials, booking inquiry form, Instagram integration, minimal footer.
• Agency Services Page — Creative/digital agency website. Tech: React + bold design. Sections: Bold hero with reel/showreel area, services grid with hover reveals, case study cards, team section with fun bios, client logo wall, process timeline, contact with multiple offices, animated stats counter.
• SaaS Pricing Page — Dedicated SaaS pricing page with comparison. Tech: React + clean design. Sections: Hero with value proposition, pricing toggle (monthly/annual), 3-4 tier cards with feature lists, feature comparison table, enterprise CTA, FAQ about pricing, customer quotes, trust badges.
• Personal Blog Layout — Clean blog/writing website. Tech: React + typography-focused. Sections: Minimal hero with author info, featured post large card, recent posts grid, category sidebar, newsletter signup, about the author, popular posts, reading time estimates, archive by month, clean footer.
• Event Registration Page — Conference/event registration landing page. Tech: React + energetic design. Sections: Event hero with date/venue, countdown timer, speaker cards with bios, schedule/agenda timeline, ticket tiers with pricing, sponsor logos, venue information, registration form, social sharing.
• E-Commerce Product Page — Single product detail page. Tech: React + e-commerce patterns. Sections: Product image gallery with zoom, price with discount, size/color selectors, add to cart with quantity, product description tabs, specification table, customer reviews with ratings, related products carousel.
• Nonprofit Donation Page — Charity/nonprofit website with donation. Tech: React + heartfelt design. Sections: Emotional hero with impact stats, mission statement, impact stories with images, donation amount selector with custom, progress bar toward goal, volunteer signup, newsletter, partner logos, transparent footer with financials.

How to Use

1. Open Claude and paste any landing page prompt
2. Claude generates a complete multi-section website as an Artifact
3. Preview the full page — scroll through all sections, test responsive design
4. Replace placeholder content with your own text, images, and branding
5. Export the React code and deploy to Vercel, Netlify, or any hosting

Works With

Claude (Anthropic) with Artifacts. All pages are React components — deploy with Next.js, Vite, or export as static HTML. No external dependencies required.

Tags: Landing Page, Portfolio, Claude Artifacts, Website Generator, React Website, Startup, Restaurant, Photography, Blog, E-Commerce, Nonprofit