@Suryanshti777: BREAKING: AI can now build you...
@Suryanshti777
24 views
Apr 06, 2026
Advertisement
2
I just built a $5,000 client website in 118 minutes.
The stack:
- Claude Opus 4.6 for architecture, logic & complex reasoning
- Figma Make for pixel-perfect UI, interactions & deployment
I tested 100+ prompts, so you don't have to.
Here are the 9 prompts that actually work:
The stack:
- Claude Opus 4.6 for architecture, logic & complex reasoning
- Figma Make for pixel-perfect UI, interactions & deployment
I tested 100+ prompts, so you don't have to.
Here are the 9 prompts that actually work:
3
PROMPT 1: The Architecture Strategist
You are a Principal Architect at Vercel. I need to build a [WEBSITE TYPE: portfolio/saas/e-commerce].
Requirements:
- Target audience: [DESCRIBE]
- Key features: [LIST 3-5]
- Tech considerations: [RESPONSIVE/SEO/PERFORMANCE]
Deliver:
1. Site map (all pages with hierarchy)
2. User flows (3 primary journeys)
3. Data models (if dynamic content)
4. API requirements (if applicable)
5. Component inventory (30+ components needed)
6. Page templates (wireframe descriptions)
7. Technical stack recommendation
8. Performance budgets (load time targets)
9. SEO structure (meta templates, URL patterns)
Format as a technical specification I can hand to Figma Make.
You are a Principal Architect at Vercel. I need to build a [WEBSITE TYPE: portfolio/saas/e-commerce].
Requirements:
- Target audience: [DESCRIBE]
- Key features: [LIST 3-5]
- Tech considerations: [RESPONSIVE/SEO/PERFORMANCE]
Deliver:
1. Site map (all pages with hierarchy)
2. User flows (3 primary journeys)
3. Data models (if dynamic content)
4. API requirements (if applicable)
5. Component inventory (30+ components needed)
6. Page templates (wireframe descriptions)
7. Technical stack recommendation
8. Performance budgets (load time targets)
9. SEO structure (meta templates, URL patterns)
Format as a technical specification I can hand to Figma Make.
4
PROMPT 2: The Design System Generator
You are a Design Director at Apple. Create a design system for [BRAND].
Brand attributes: [MINIMAL/BOLD/LUXURY/PLAYFUL]
Generate:
1. Color palette (primary, secondary, semantic, dark mode)
2. Typography scale (9 levels with font recommendations)
3. Spacing system (8px base grid)
4. Component specs (30 components with states)
5. Layout patterns (responsive breakpoints)
6. Animation guidelines (easing, duration)
7. Accessibility requirements (WCAG AA)
Export as:
- Design tokens (JSON)
- CSS variables
- Figma-ready component descriptions
I'll paste this into Figma Make to generate the visual system.
You are a Design Director at Apple. Create a design system for [BRAND].
Brand attributes: [MINIMAL/BOLD/LUXURY/PLAYFUL]
Generate:
1. Color palette (primary, secondary, semantic, dark mode)
2. Typography scale (9 levels with font recommendations)
3. Spacing system (8px base grid)
4. Component specs (30 components with states)
5. Layout patterns (responsive breakpoints)
6. Animation guidelines (easing, duration)
7. Accessibility requirements (WCAG AA)
Export as:
- Design tokens (JSON)
- CSS variables
- Figma-ready component descriptions
I'll paste this into Figma Make to generate the visual system.
5
PROMPT 3: The Content Architect
You are a Conversion Copywriter at Ogilvy. Write all copy for a [WEBSITE TYPE].
Brand voice: [PROFESSIONAL/CASUAL/BOLD]
Target: [AUDIENCE]
Goal: [CONVERSION/AWARENESS/RETENTION]
Deliver for each page:
1. Hero section (headline: 6 words, subhead: 15 words, CTA)
2. Feature sections (3 blocks with headlines + descriptions)
3. Social proof (testimonial framework + stats)
4. FAQ section (8 questions with answers)
5. Footer (navigation, social, legal)
Formatting instructions:
- Use emotional triggers (urgency, scarcity, authority)
- Include power words (exclusive, proven, instant)
- Specify character counts for each element
- Note which text should be H1, H2, body
I'll use this to populate Figma Make's content layers.
You are a Conversion Copywriter at Ogilvy. Write all copy for a [WEBSITE TYPE].
Brand voice: [PROFESSIONAL/CASUAL/BOLD]
Target: [AUDIENCE]
Goal: [CONVERSION/AWARENESS/RETENTION]
Deliver for each page:
1. Hero section (headline: 6 words, subhead: 15 words, CTA)
2. Feature sections (3 blocks with headlines + descriptions)
3. Social proof (testimonial framework + stats)
4. FAQ section (8 questions with answers)
5. Footer (navigation, social, legal)
Formatting instructions:
- Use emotional triggers (urgency, scarcity, authority)
- Include power words (exclusive, proven, instant)
- Specify character counts for each element
- Note which text should be H1, H2, body
I'll use this to populate Figma Make's content layers.
6
PROMPT 4: The Component Logic Builder
You are a Frontend Architect. Design the logic for these interactive components:
Components needed:
1. Multi-step form (validation, progress, state management)
2. Dynamic pricing calculator (inputs, formulas, real-time updates)
3. Search with filters (faceted search, sorting, pagination)
4. User dashboard (data visualization, CRUD operations)
5. Authentication flow (login, signup, password reset)
For each component:
- State machine diagram (describe in text)
- Data flow (props, events, API calls)
- Error handling strategy
- Loading states
- Empty states
- Edge cases
Generate React component structure (functions, hooks, handlers).
I'll describe this logic to Figma Make to build the interactive prototypes.
You are a Frontend Architect. Design the logic for these interactive components:
Components needed:
1. Multi-step form (validation, progress, state management)
2. Dynamic pricing calculator (inputs, formulas, real-time updates)
3. Search with filters (faceted search, sorting, pagination)
4. User dashboard (data visualization, CRUD operations)
5. Authentication flow (login, signup, password reset)
For each component:
- State machine diagram (describe in text)
- Data flow (props, events, API calls)
- Error handling strategy
- Loading states
- Empty states
- Edge cases
Generate React component structure (functions, hooks, handlers).
I'll describe this logic to Figma Make to build the interactive prototypes.
7
PROMPT 5: The Figma Make Prompt Engineer
You are an AI Prompt Engineer specializing in Figma Make.
Convert this technical specification into 5 Figma Make prompts:
[PASTE SPEC FROM CLAUDE]
Each prompt must:
1. Start with the outcome (not the process)
2. Include brand context (colors, typography, mood)
3. Specify interactions (hover, click, scroll, animate)
4. Define responsive behavior (mobile/tablet/desktop)
5. Request specific sections (hero, features, CTA, footer)
Example format:
"Build a [TYPE] website with [MOOD] aesthetic. Use [COLOR] primary and [FONT] typography. Include: 1) Hero with [SPECIFIC ELEMENTS], 2) Features grid with [INTERACTIONS], 3) [CTA TYPE] section. Make it fully responsive with [ANIMATION STYLE] animations."
Generate 5 variations from simple to complex.
You are an AI Prompt Engineer specializing in Figma Make.
Convert this technical specification into 5 Figma Make prompts:
[PASTE SPEC FROM CLAUDE]
Each prompt must:
1. Start with the outcome (not the process)
2. Include brand context (colors, typography, mood)
3. Specify interactions (hover, click, scroll, animate)
4. Define responsive behavior (mobile/tablet/desktop)
5. Request specific sections (hero, features, CTA, footer)
Example format:
"Build a [TYPE] website with [MOOD] aesthetic. Use [COLOR] primary and [FONT] typography. Include: 1) Hero with [SPECIFIC ELEMENTS], 2) Features grid with [INTERACTIONS], 3) [CTA TYPE] section. Make it fully responsive with [ANIMATION STYLE] animations."
Generate 5 variations from simple to complex.
8
PROMPT 6: The Animation & Interaction Designer
You are a Motion Designer at Apple. Design interactions for [WEBSITE SECTION].
Interaction requirements:
- Page load sequence (stagger, duration, easing)
- Scroll behaviors (parallax, pin, reveal)
- Hover states (micro-interactions, feedback)
- Click transitions (page transitions, modal opens)
- Gesture support (swipe, pinch, pull)
Technical specs:
- Easing curves (spring, ease-out, cubic-bezier)
- Durations (ms for each interaction type)
- Performance considerations (GPU acceleration, will-change)
Describe the animations in words Figma Make can interpret:
"On scroll: Navbar shrinks from 80px to 60px with ease-out over 300ms. Hero text fades up from 20px below with 0.6s duration and 0.1s stagger between lines..."
I'll paste these descriptions into Figma Make's prompt.
You are a Motion Designer at Apple. Design interactions for [WEBSITE SECTION].
Interaction requirements:
- Page load sequence (stagger, duration, easing)
- Scroll behaviors (parallax, pin, reveal)
- Hover states (micro-interactions, feedback)
- Click transitions (page transitions, modal opens)
- Gesture support (swipe, pinch, pull)
Technical specs:
- Easing curves (spring, ease-out, cubic-bezier)
- Durations (ms for each interaction type)
- Performance considerations (GPU acceleration, will-change)
Describe the animations in words Figma Make can interpret:
"On scroll: Navbar shrinks from 80px to 60px with ease-out over 300ms. Hero text fades up from 20px below with 0.6s duration and 0.1s stagger between lines..."
I'll paste these descriptions into Figma Make's prompt.
9
PROMPT 7: The Responsive Behavior Strategist
You are a Responsive Design Specialist. Plan breakpoints for [WEBSITE].
Breakpoints:
- Mobile: 375px
- Tablet: 768px
- Desktop: 1440px
For each page section, define:
1. Layout transformation (grid → stack, sidebar → drawer)
2. Typography scaling (font sizes at each breakpoint)
3. Image behavior (crop, scale, hide, swap)
4. Navigation adaptation (hamburger, sidebar, horizontal)
5. Spacing adjustments (padding, margin, gap)
6. Content prioritization (hide secondary content on mobile)
Create a responsive decision matrix:
Section | Mobile | Tablet | Desktop | Notes
Figma Make will use this to generate fluid layouts.
You are a Responsive Design Specialist. Plan breakpoints for [WEBSITE].
Breakpoints:
- Mobile: 375px
- Tablet: 768px
- Desktop: 1440px
For each page section, define:
1. Layout transformation (grid → stack, sidebar → drawer)
2. Typography scaling (font sizes at each breakpoint)
3. Image behavior (crop, scale, hide, swap)
4. Navigation adaptation (hamburger, sidebar, horizontal)
5. Spacing adjustments (padding, margin, gap)
6. Content prioritization (hide secondary content on mobile)
Create a responsive decision matrix:
Section | Mobile | Tablet | Desktop | Notes
Figma Make will use this to generate fluid layouts.
10
PROMPT 8: The Data Integration Planner
You are a Full-Stack Architect. Design data integration for [WEBSITE TYPE].
Data sources:
- [CMS/API/DATABASE]
Requirements:
1. Data models (schema definitions)
2. API endpoints needed (GET, POST, PUT, DELETE)
3. Authentication strategy (JWT, OAuth, API keys)
4. Real-time considerations (WebSockets, polling)
5. Caching strategy (CDN, local storage)
6. Error handling (fallbacks, retries, offline)
User-facing features:
- Dynamic content loading (infinite scroll, pagination)
- Form submissions (validation, success/error states)
- User accounts (profiles, preferences)
- Search functionality (indexing, filters, sorting)
Figma Make connects to Supabase for real data—design the schema for this integration.
You are a Full-Stack Architect. Design data integration for [WEBSITE TYPE].
Data sources:
- [CMS/API/DATABASE]
Requirements:
1. Data models (schema definitions)
2. API endpoints needed (GET, POST, PUT, DELETE)
3. Authentication strategy (JWT, OAuth, API keys)
4. Real-time considerations (WebSockets, polling)
5. Caching strategy (CDN, local storage)
6. Error handling (fallbacks, retries, offline)
User-facing features:
- Dynamic content loading (infinite scroll, pagination)
- Form submissions (validation, success/error states)
- User accounts (profiles, preferences)
- Search functionality (indexing, filters, sorting)
Figma Make connects to Supabase for real data—design the schema for this integration.
11
PROMPT 9: The QA & Optimization Checklist
You are a QA Engineer at Google. Review this website specification:
[PASTE FIGMA MAKE OUTPUT OR DESCRIBE]
Checklist:
□ Performance (Core Web Vitals targets)
□ Accessibility (WCAG 2.2 AA compliance)
□ SEO (meta tags, structured data, sitemap)
□ Security (HTTPS, CSP, input sanitization)
□ Browser compatibility (Chrome, Safari, Firefox, Edge)
□ Mobile optimization (touch targets, viewport)
□ Analytics integration (events, goals, funnels)
For each issue:
- Severity (Critical/High/Medium/Low)
- Location (page/section/component)
- Issue description
- Fix recommendation
Generate a punch list for the Figma Make iteration.
You are a QA Engineer at Google. Review this website specification:
[PASTE FIGMA MAKE OUTPUT OR DESCRIBE]
Checklist:
□ Performance (Core Web Vitals targets)
□ Accessibility (WCAG 2.2 AA compliance)
□ SEO (meta tags, structured data, sitemap)
□ Security (HTTPS, CSP, input sanitization)
□ Browser compatibility (Chrome, Safari, Firefox, Edge)
□ Mobile optimization (touch targets, viewport)
□ Analytics integration (events, goals, funnels)
For each issue:
- Severity (Critical/High/Medium/Low)
- Location (page/section/component)
- Issue description
- Fix recommendation
Generate a punch list for the Figma Make iteration.

