ÚLTIMA HORA: La IA ahora puede construirte un sitio web completo en 2 horas (gratis).

Aquí tienes 9 prompts brutales para Claude Opus 4.6 + Figma Make que crean sitios web de $5,000 en 2 horas:

(Guárdalo antes de que lo hagan tus competidores)

⚠️ Antes de seguir, quería avisarte que junto con @Adamaestr0_ y @SantiTorAI , hemos reunido y categorizado 900+ herramientas de IA!

Es un verdadero diccionario IA para tu vida diaria.

Y es gratis → alejoxadam.beehiiv.com/c/900-herramie…

Acabo de crear una web para un cliente valorada en $5,000 en 118 minutos.

El stack:

* Claude Opus 4.6 para arquitectura, lógica y razonamiento complejo
* Figma Make para UI pixel-perfect, interacciones y despliegue

Probé más de 100 prompts para que tú no tengas que hacerlo.

Estos son los 9 que realmente funcionan:

PROMPT 1: El Estratega de Arquitectura

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.

PROMPT 2: El Generador de Design 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.

PROMPT 3: El Arquitecto de Contenido

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.

PROMPT 4: El Constructor de Lógica de Componentes

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.

PROMPT 5: El Ingeniero de Prompts para Figma Make

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.

PROMPT 6: El Diseñador de Animaciones e Interacciones

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.

PROMPT 7: El Estratega de Diseño Responsive

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

PROMPT 8: El Planificador de Integración de Datos

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.

PROMPT 9: La Checklist de QA y Optimización

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 next Figma Make iteration.

Este hilo termina aquí, pero el próximo ya está en camino.

Sígueme para no perderte las próximas ideas 💡

Y dale RT si quieres que más gente lo vea.

View Tweet