The $5,000 Website Stack
9 High-End Prompts for Claude 3.5 Sonnet + Figma Dev Mode
SaaS / Startup
The "Unicorn" Landing Page
CLAUDE PROMPT
"Act as a Senior Product Designer. Create a landing page for a B2B SaaS tool using React, Tailwind CSS, and Framer Motion.
Design Requirements:
1. Hero section with a glassmorphism effect and a glowing gradient background.
2. A 'Social Proof' ticker showing logos of companies (use placeholders).
3. A 3-column feature grid using Bento-box style layout.
4. A pricing table that highlights the 'Pro' plan with a scale-hover effect.
Code Requirements:
- Use Lucide-React for icons.
- Ensure fully responsive mobile-first design.
- Export as a single file component structure."
Workflow: Generate design in Figma AI -> Export to Dev Mode -> Paste code structure into Claude -> Refine.
E-Commerce
The Luxury Fashion Store
CLAUDE PROMPT
"Build a high-conversion e-commerce product page for a luxury watch brand.
Tech Stack: Next.js 14, Tailwind CSS, Shadcn UI.
Key Elements:
1. A split-screen layout: Left side is a sticky image gallery, right side is scrollable product details.
2. An 'Add to Cart' button with a micro-interaction animation.
3. A 'You might also like' carousel at the bottom.
4. Typography should be elegant (Serif headers, Sans-serif body).
Functionality:
- Include a size selector and color swatches.
- Implement a 'Quick View' modal logic."
Workflow: Use Figma 'Wireframe' plugin -> Generate layout -> Ask Claude to code the interactive components.
Agency / Portfolio
The Award-Winning Portfolio
CLAUDE PROMPT
"Create a brutalist, high-impact portfolio website for a creative director.
Style:
- High contrast (Black background, Neon Green text).
- Large, oversized typography (Clamp functions for font sizing).
- Horizontal scrolling sections instead of vertical.
Content:
1. A massive hero text that says 'WE BUILD DIGITAL'.
2. A case study section where hovering over a project title reveals the project image.
3. A contact form that looks like a terminal input.
Code:
- Use GSAP for scroll-triggered animations.
- Ensure accessibility (ARIA labels) despite the avant-garde design."
Workflow: Sketch rough layout in Figma -> Use 'Anima' plugin to get base HTML -> Feed to Claude for GSAP integration.
Dashboard / SaaS
The Fintech Dashboard
CLAUDE PROMPT
"Generate a complex admin dashboard for a Crypto Trading platform.
Layout:
- Sidebar navigation (collapsible).
- Top bar with user profile and notifications.
- Main content area with a grid of widgets.
Widgets to build:
1. A line chart showing price history (use Recharts library).
2. A 'Recent Transactions' table with status badges (Success/Pending).
3. A 'Wallet Balance' card with a gradient background.
Theme: Dark mode by default. Use a slate/blue color palette."
Workflow: Design the grid in Figma Auto-layout -> Copy CSS properties -> Ask Claude to build the React components.
Restaurant / Local
The Michelin Star Menu
CLAUDE PROMPT
"Code a single-page website for a high-end Italian restaurant.
Visuals:
- Full-screen video background (muted, looping pasta making).
- Overlay text with a parallax effect.
Sections:
1. 'The Story': Text heavy, elegant serif font, centered.
2. 'The Menu': A tabbed interface (Starters, Mains, Desserts) that filters items without reloading.
3. 'Reservations': A styled form integrating with OpenTable (placeholder link).
Tech: HTML5, CSS Grid, Vanilla JS for the tabs."
Workflow: Find a Figma Restaurant template -> Export assets -> Ask Claude to write the Vanilla JS logic for tabs.
Real Estate
The Property Listing Engine
CLAUDE PROMPT
"Build a real estate listing page with advanced filtering.
Features:
1. A sticky search bar at the top with dropdowns for 'Price', 'Beds', 'Baths'.
2. A masonry grid layout for property cards.
3. Property Card details: Image, Price, Address, and a 'Heart' icon for favorites.
Interactivity:
- When a filter is selected, the grid should animate (fade out/in) to show results.
- Use Tailwind CSS for all styling."
Workflow: Use Figma to design the 'Card' component perfectly -> Ask Claude to replicate it and build the grid logic.
Blog / Content
The Minimalist Newsletter
CLAUDE PROMPT
"Create a Substack-style blog template focused on readability.
Design Philosophy:
- Max-width 700px for text content.
- Beautiful typography hierarchy (H1, H2, Blockquotes).
- No distractions, no sidebars.
Components:
1. A 'Subscribe' box that sticks to the bottom of the screen on mobile.
2. A 'Reading Progress' bar at the very top of the viewport.
3. A 'Table of Contents' that auto-generates based on H2 tags (simulate this structure)."
Workflow: Focus on Figma Typography styles -> Export styles -> Ask Claude to implement the progress bar logic.
Event / Conference
The Tech Conference Site
CLAUDE PROMPT
"Design a landing page for a 3-day AI Conference.
Sections:
1. Countdown Timer to the event start date.
2. 'Speaker Lineup': Circular avatars with hover effects showing their bio.
3. 'Schedule': A vertical timeline view of events.
4. 'Tickets': 3 distinct cards (Early Bird, Standard, VIP).
Style: Cyberpunk / Futuristic. Use neon borders and dark backgrounds."
Workflow: Design the Timeline in Figma -> Ask Claude to convert the visual timeline into a responsive CSS flexbox layout.
Personal Brand
The 'Link-in-Bio' Pro
CLAUDE PROMPT
"Build an advanced 'Link in Bio' page that replaces Linktree.
Features:
1. Profile header with a verified badge.
2. Links should be large, touch-friendly buttons with icons on the left.
3. Include an embedded Spotify 'Now Playing' widget placeholder.
4. Include a 'Share' button that uses the Web Share API.
Styling:
- Allow for a dynamic background image with a blur overlay.
- Use CSS variables for easy color theming."
Workflow: Keep Figma design simple -> Ask Claude to add the Web Share API JavaScript functionality.
Comments