🎯 design-designer
Entrevista rápida, prompt perfecto. Transforma tu briefing en una instrucción optimizada para Claude Design (claude.ai/design) generar landing pages, pitch decks y apps clicables de una sola vez.
🧩 Qué es / qué hace
Ingeniería de prompts para Claude Design
O design-designer es un skill que realiza una entrevista rápida al usuario y, a continuación, crea un prompt optimizado para pegarse en el claude.ai/design. Se basa en el propio system prompt de Claude Design: sabe exactamente qué necesita escuchar el modelo para generar el resultado correcto de una sola vez.
✓ Lo que entrega
- ✓ Prompt completo, estructurado y listo para pegar en Claude Design
- ✓ Cobertura de: tipo de artifact, audiencia, estilo visual, contenido, paleta, comportamiento interactivo
- ✓ Eliminación del ciclo de preguntas que Claude Design haría en la UI
- ✓ Adaptación al caso: landing page, pitch deck, prototipo mobile, app interactiva
✗ Lo que NO hace
- ✗ No genera el diseño en sí; solo el prompt para llevarlo a Claude Design
- ✗ No sustituye frontend-design (que genera HTML/CSS real mediante código)
- ✗ No produce assets exportables directamente en Claude Code
- ✗ No funciona bien con flujos complejos que requieren un back-end real
🎣 Cuándo se activa
Claude Code activa el design-designer automáticamente cuando detecta cualquiera de las frases desencadenantes de abajo en tu mensaje. No necesitas saber el nombre exacto de la skill.
Frases desencadenantes de la description
/design-designer
Comando directo — invocación explícita de la skill
"prompt for claude design"
Solicitud natural en inglés
"build a claude design prompt"
Variación en la elaboración del briefing
"design a landing page prompt"
Enfoque en landing page: se activa incluso sin mencionar el skill
"build me a claude design brief"
Solicitud de briefing estructurado
Quick Path disponible
Si dices "skip the interview, just build it", el skill omite la fase de entrevista y genera el prompt con lo que se proporcionó. Es útil cuando ya tienes el briefing listo y solo quieres darle formato.
🚀 Cómo mejora tus resultados
Claude Design es potente, pero exigente: necesita un contexto denso para generar algo de nivel profesional. Sin un prompt bien estructurado, hará preguntas o generará algo genérico. El design-designer resuelve eso al anticipar todas las respuestas.
📊 Qué cambia con el skill
en vez de 5–10
en la primera entrega
compatibles
Tipos de artefactos para los que el skill sabe generar prompts
Landing Page
Basado en el scroll, hero + secciones + CTA. Ideal para lanzamientos y productos SaaS.
Pitch Deck
Slides visuales para presentar startups, productos o proyectos.
Prototipo móvil
Pantallas navegables de una app, con flujo de interacción simulado.
App clicable
Prototipo interactivo con navegación entre estados, formularios y botones.
⚙️ Cómo funciona por dentro
Las 4 fases de la ejecución
Fase 1: La entrevista
El skill hace hasta 8 preguntas estratégicas en una conversación, recopilando: tipo de artifact deseado, público objetivo, propuesta de valor, estilo visual (referencias, paleta, tono), contenido de las secciones, comportamiento interactivo esperado, restricciones técnicas y plazo.
Fase 2: Sintetizar
Claude procesa todas las respuestas e identifica patrones: estilo dominante, falta de información y contradicciones. Completa la información faltante con defaults inteligentes basados en el type de artifact elegido.
Fase 3: Generar el prompt optimizado
Arma el prompt siguiendo la estructura que Claude Design espera: tipo, audiencia, contenido, visual, interactividad, tono, restricciones. Incluye instrucciones explícitas para el desplazamiento, la animación y la adaptabilidad, si es necesario.
Fase 4: Entregar
Entrega el prompt con formato inline o guardado en un archivo. Ruta de salida predeterminada:
outputs/claude_design_prompts/YYYY-MM-DD/{'{'}slug{'}'}_prompt.md
✓ Buenas prácticas en la entrevista
- ✓ Proporciona referencias visuales reales (URLs, marcas, estilos)
- ✓ Describe la audiencia con precisión (cargo, problema, contexto)
- ✓ Menciona qué NO quieres en el diseño (las restricciones también son valiosas)
- ✓ Especifica el CTA principal esperado
✗ Errores comunes
- ✗ Responder «moderno» sin dar referencias — el modelo no puede usarlo como referencia
- ✗ Omitir secciones («da igual»): cada vacío se vuelve genérico en el resultado
- ✗ Pedir funcionalidades de back-end dentro del prompt (no es compatible)
- ✗ Usar la skill para la UI de sistemas internos complejos
💬 Ejemplo práctico + PROMPT generado
Escenario: Landing page para una herramienta SaaS de análisis de contratos
El usuario activa la skill con /design-designer. El skill plantea 5 preguntas concretas y, con las respuestas, genera el prompt de abajo.
# Cómo invocar en Claude Code:
/design-designer
# o en lenguaje natural:
"Quiero un prompt para que Claude Design cree la landing page de LexAI"
## Artefato Landing page completa para SaaS B2B · desktop-first, responsivo mobile ## Produto LexAI — plataforma de análise automatizada de contratos jurídicos. Lê PDFs de contratos, extrai cláusulas de risco, gera relatório em 30 segundos. ## Audiência Advogados corporativos e gestores jurídicos de médias e grandes empresas. Dor: revisar contratos manualmente leva horas e gera erros que custam caro. ## Estrutura da página 1. Hero — headline "Revise contratos 10× mais rápido, sem erro humano" CTA primário: "Analisar meu primeiro contrato — grátis" 2. Social proof — logos de escritórios parceiros + número "47.000 contratos analisados" 3. Como funciona — 3 passos animados: Upload → Análise → Relatório 4. Features — grid 3 colunas: detecção de risco, resumo executivo, integração com DocuSign 5. Pricing — 3 planos com destaque no Profissional 6. FAQ — 5 perguntas frequentes expansíveis 7. Footer com CTA final ## Visual Estilo: clean tech, minimalista, sério. Referência: Linear.app + Notion. Paleta: fundo #0a0a0f, acento primário #6366f1 (índigo), texto #f8fafc. Tipografia: Inter ou Geist. Sem elementos decorativos excessivos. ## Interatividade Scroll suave entre seções. Animação de upload no "Como funciona". Hover nos cards de feature com borda iluminada. Acordeão no FAQ. ## Restrições Não incluir formulário de cadastro (só CTA para rota externa). Sem back-end — tudo estático. Priorizar velocidade de carregamento percebida.
Atención: limitaciones de Claude Design
Claude Design no hace back-end real, bases de datos, autenticación ni integración con APIs externas. Estos casos requieren el frontend-design + desarrollo real. El skill advierte al usuario sobre estas limitaciones en la Phase 4.
🧬 Combina con / límites
O design-designer ocupa una posición específica en el ecosistema de skills de diseño: es el motor de briefing, no el generador final. Funciona mejor cuando se combina con otros skills antes o después.
🤝 Relación con frontend-design e impeccable
design-designer → frontend-design
O frontend-design genera HTML/CSS/JS real, directamente en Claude Code, sin necesitar claude.ai/design. Es para cuando quieres control total del código. Usa la dupla cuando: Claude Design generó el diseño visual, te gustó y ahora quieres implementarlo en código limpio con el frontend-design.
design-designer → impeccable
O impeccable revisa y refina cualquier output generado: texto, estructura y jerarquía visual. Úsala cuando el prompt generado por design-designer produzca un buen resultado, pero con imperfecciones: copy débil, jerarquía confusa, CTA poco claro.
Con qué skills del curso combina
Implementa en código real lo que Claude Design prototipó
Refina el copy y la jerarquía del resultado generado por Claude Design
Alimenta la entrevista de diseño con la identidad visual ya definida
Añade una capa de motion al prototipo generado por Claude Design
🚫 Cuándo NO usar design-designer
- ✗ Cuando quieres código HTML/CSS generado directamente — usa el frontend-design
- ✗ Cuando el diseño requiere back-end, base de datos o APIs reales
- ✗ Para interfaces de usuario de dashboards complejos con muchos estados y lógica condicional
- ✗ Cuando ya tienes el prompt y solo quieres ejecutarlo, ve directamente a claude.ai/design
- ✗ Para generar assets exportables (íconos, SVG, imágenes): usa herramientas específicas
✅ Resumen del Módulo 1.4
/design-designer o frases naturales sobre «claude design prompt»
outputs/claude_design_prompts/
Fin de la Trilha 1 — Construir
Próxima parada: Ruta 2 — 🎨 Identidad
En la Ruta 2 dominarás las skills de identidad visual: brand guidelines, paleta, tipografía y sistemas de diseño coherentes. Es la base para que todo lo que construiste en la Ruta 1 tenga una identidad reconocible.