Por qué este flujo (tokens → diseño → código) evita inconsistencias
Cuando construyes una landing page rápido con IA, el fallo típico no es “que falte HTML”, sino que el diseño termina incoherente: botones con radios distintos, tipografías que cambian, colores que no respetan contraste, o espaciados aleatorios. La forma más estable de evitarlo es empezar por design tokens y usarlos como contrato entre diseño y desarrollo.
Si quieres complementar este tutorial con un recurso en video centrado en construir con Claude, puedes verlo aquí: https://youtu.be/ZgjnATT6_9E.
Antes de empezar: Claude vs ChatGPT para este caso de uso
En la práctica, el debate claude vs chatgpt depende del tipo de salida que necesitas. Para flujos donde quieres consistencia textual, documentación clara y un “hilo” largo de requisitos (tokens, componentes, estados, accesibilidad), Claude suele destacar por mantener el contexto y la estructura. ChatGPT puede ir muy bien para ideación rápida o snippets puntuales, pero aquí te conviene priorizar continuidad y disciplina de sistema de diseño.
Si vas a trabajar con archivos, prompts largos y varias iteraciones, claude pro puede resultar útil por límites y comodidad operativa, aunque el método de este tutorial funciona igual con planes gratuitos si gestionas bien el alcance.
1) Brief mínimo: define la landing antes de pedir “diseño”
La IA rinde mejor si le das un brief que limite decisiones. Copia y adapta este esquema:
- Objetivo: captar emails para lista de espera
- Audiencia: dueños de ecommerce
- Propuesta de valor: “reduce devoluciones con guías de talla”
- Secciones: hero, beneficios, prueba social (sin testimonios inventados), FAQ, CTA final, footer
- Tono: claro, directo, sin jerga
- Restricciones: accesible (contraste AA), mobile-first
Con esto listo, ya puedes entrar al flujo con claude (o claude ai) para producir tokens y estructura.
2) Design tokens: qué son y cómo definirlos rápido
Si te preguntas design tokens que son: son variables (de color, tipografía, espaciado, radios, sombras) que sirven como fuente de verdad del diseño. Funcionan como un contrato: el diseño usa tokens y el código consume los mismos tokens.
Una guia de design tokens mínima para una landing debería incluir:
- Color: fondo, texto, primario, secundario, estados (hover/focus), borde
- Tipografía: familia, tamaños, pesos, line-height
- Espaciado: escala (4, 8, 12, 16, 24, 32…)
- Radius: sm/md/lg
- Sombras: 1–2 niveles máximo
Prompt recomendado para generar tokens (ajústalo a tu marca):
“Genera un set de design tokens para una landing accesible AA. Devuelve JSON con: colors (bg, surface, text, muted, primary, primaryHover, border, focus), typography (fontFamily, sizes, weights, lineHeights), spacing (xs–2xl), radius (sm, md, lg) y shadow (sm, md). Usa nombres consistentes y valores en hex/rem.”
Valida lo esencial: contraste (texto sobre fondo), escala tipográfica lógica y que el color de foco exista.
3) Claude Design: convierte tokens en un kit de UI
En como usar Claude Design, la idea no es pedir “un diseño bonito”, sino pedir componentes que consuman tokens. Tu lista base:
- Botón (primary/secondary + estados hover/focus/disabled)
- Input (default/error + helper text)
- Card (para beneficios)
- Badge (para resaltar features)
- Header con navegación simple
Ejemplo de instrucción para claude design tutorial:
“Usa estos tokens como fuente de verdad. Diseña componentes para landing mobile-first. Devuelve especificación: layout, tamaños, espaciados, estados, y reglas (p. ej., ‘buttons usan radius.md, padding spacing.md/spacing.lg’). Evita valores hardcoded fuera de tokens.”
Si tu herramienta permite previsualización, revisa coherencia: mismo radio en botones/cards, mismo sistema de espaciado, tipografía consistente.
4) Estructura de la landing: secciones y jerarquía
Ahora pide el wireframe semántico. Para como crear una landing page con Claude, el truco es exigir jerarquía y accesibilidad:
- Un solo H1
- CTAs con texto accionable
- Listas para beneficios reales
- FAQ en acordeón (si lo implementas) con controles accesibles
Prompt:
“Propón la arquitectura de una landing (hero, beneficios, FAQ, CTA, footer). Devuelve: copy sugerido (sin inventar testimonios), y estructura HTML semántica. Usa tokens para espaciar y define breakpoints.”
5) Claude Code: traduce diseño y tokens a implementación
Claude Code es especialmente útil para convertir una especificación en un proyecto consistente. El enfoque recomendado:
- Crear un archivo de tokens (CSS variables o JSON).
- Crear estilos base (typography + spacing helpers).
- Construir componentes (Button, Card, Input).
- Montar la página con secciones.
Si usas web estática, una base típica es HTML + CSS (o Tailwind si ya tienes tokens mapeados). Si usas React/Next, define componentes reutilizables.
Prompt para implementación:
“Genera el código de una landing page mobile-first. Requisitos: 1) usar tokens como CSS variables en :root; 2) no usar colores directos fuera de tokens; 3) incluir estados focus visibles; 4) layout responsive; 5) entregar archivos: index.html, styles.css (y opcional script.js para menú).”
6) Claude Desktop y Claude Console: organización del trabajo
Si trabajas con muchos archivos, claude desktop puede ser práctico para iterar y revisar. En entornos más técnicos, claude console (o integraciones) ayuda a sistematizar: por ejemplo, generar tokens, validar contraste, y producir componentes con prompts repetibles.
Consejo operativo: guarda tus prompts como plantillas (Tokens → Componentes → Página → Auditoría) para no “reinventar” instrucciones en cada proyecto.
7) Checklist de calidad antes de publicar
Antes de subir tu landing, revisa:
- Consistencia: todos los radios/espaciados vienen de tokens
- Accesibilidad: foco visible, contraste AA, labels en inputs
- Performance: fuentes optimizadas, CSS limpio, imágenes comprimidas
- Copy: promesas verificables; sin prueba social inventada
- SEO básico: H1 único, meta description, enlaces claros
8) Plantilla de prompt final: de cero a entrega en una iteración
Si quieres una sola instrucción “maestra” para tu flujo con anthropic claude, usa algo así:
“Actúa como diseñador + frontend. Objetivo: landing para [X]. Genera: (A) design tokens en JSON + CSS variables; (B) especificación de componentes usando tokens; (C) HTML semántico de la landing con secciones; (D) CSS mobile-first que use exclusivamente tokens; (E) revisión final con checklist de accesibilidad AA. No inventes testimonios ni marcas. Mantén el código simple y listo para copiar.”
Cierre: repite el sistema, no el diseño
La ventaja de este método no es que la IA “adivine” un buen diseño, sino que te ayuda a instaurar un sistema: tokens como base, componentes como puente y código como ejecución. Una vez tengas tu plantilla, producir nuevas landings se vuelve un trabajo de adaptación (brief + tokens) en lugar de improvisación.
Para profundizar y ver un flujo completo centrado en construir con Claude, aquí tienes el recurso recomendado: https://youtu.be/ZgjnATT6_9E.