@ecommartinez: ÚLTIMA HORA: La IA ahora puede...
@ecommartinez
25 views
Apr 28, 2026
Advertisement
1
Ú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)
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)
2
⚠️ 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…
Es un verdadero diccionario IA para tu vida diaria.
Y es gratis → alejoxadam.beehiiv.com/c/900-herramie…
3
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:
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:
4
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.
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.
5
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.
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.
6
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.
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.
7
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.
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.
8
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.
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.
9
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.
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.
10
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
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
11
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.
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.
12
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.
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.
13
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.
Sígueme para no perderte las próximas ideas 💡
Y dale RT si quieres que más gente lo vea.
View Tweet