Hi,πŸ‘‹ we have updated the app and fixed multiple bugs. We are lacking funds, request to free user not to use Adblock. Ads are non intrusive. 😊

✨ Visual Editor

close

palette Canvas & Background

Gradient:arrow_forward
Text Color:
135Β°

style Card Style

40px
16px

text_fields Typography

16px
Suryansh Tiwari
@Suryanshti777
BREAKING: AI can now build you a complete website in 2 hours (for free).

Here are 9 insane Claude Opus 4.6 + Figma Make prompts that create $5,000 websites in 2 hours:

(Save this before your competitors do)
Thread image
Thread image
Suryansh Tiwari
@Suryanshti777
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:
Suryansh Tiwari
@Suryanshti777
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.
Suryansh Tiwari
@Suryanshti777
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.
Suryansh Tiwari
@Suryanshti777
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.
Suryansh Tiwari
@Suryanshti777
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.
Suryansh Tiwari
@Suryanshti777
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.
Suryansh Tiwari
@Suryanshti777
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.
Suryansh Tiwari
@Suryanshti777
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.
Suryansh Tiwari
@Suryanshti777
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.
Suryansh Tiwari
@Suryanshti777
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.
Generated by Thread Navigator
100%
view_carousel Carousel Studio NEW
Press ⌘ + S to quick-export