Saltar al contenido principal

Publica un sitio bonito y de vanguardia rápido con Claude

Intermedio

Puedes pasar de una idea de una sola línea a un sitio desplegado y genuinamente atractivo en una sola sentada. El truco no son más prompts: es el andamiaje de prompt adecuado más un stack rápido y un ciclo de pulido ajustado. Esta página es la receta.

What you'll learn
  • Elige la superficie adecuada: Artifacts para apps instantáneas frente a Claude Code para un repositorio real y desplegable
  • Vence el resultado por defecto de 'bazofia de IA' con el system prompt de estética frontend de Anthropic
  • Ejecuta un flujo de trabajo de la idea al despliegue con los Steps de más abajo
  • Roba prompts de construcción y refinamiento listos para copiar y pegar que parecen redactados por un diseñador de producto senior
  • Pule tipografía, movimiento y responsividad; luego despliega en Vercel, Netlify o GitHub Pages

Elige primero tu superficie​

Dos caminos rápidos muy distintos, según lo que quieras tener al final:

  • Claude Artifacts — describe una app y Claude renderiza un artifact React/HTML en vivo y autónomo dentro del chat. Cero configuración, enlace compartible, perfecto para prototipos, herramientas internas, calculadoras y mockups de landing pages. Por defecto, un artifact ejecuta lógica autónoma; puede llegar a servicios externos a través de MCP, pero no es un repositorio que poseas.
  • Claude Code + un framework — Claude crea el andamiaje y edita una base de código real (Next.js / Astro / Tailwind / shadcn/ui) en tu máquina, en paralelo, que tú confirmas y despliegas. Este es el camino cuando quieres poseer, ampliar y publicar la cosa.
Pro tip
  • Prototipa el aspecto en un Artifact en 60 segundos, y luego pídele a Claude Code que lo reconstruya como un repositorio real de Next.js + Tailwind. Obtienes feedback instantáneo Y una base de código desplegable.
  • Claude Design (Anthropic Labs, vista previa de investigación) añade un lienzo visual y un sistema de diseño persistente, con un traspaso hacia Claude Code: útil si vives dentro de una herramienta de diseño.

Lo único que separa lo excelente de lo genérico​

Si lo dejas con sus ajustes por defecto, Claude converge hacia lo que la comunidad llama "bazofia de IA" ("AI slop"): fuente Inter, un degradado morado sobre blanco, tres tarjetas con esquinas redondeadas por igual. El propio cookbook de estética frontend de Anthropic es directo sobre el porqué, y la solución es nombrar explícitamente las dimensiones que te importan y los valores por defecto que hay que evitar.

Chuleta anti-bazofia
Term shown.
1 / 4

El movimiento de mayor impacto es pegar el bloque <frontend_aesthetics> de Anthropic (o tu propio DESIGN.md) al inicio de una construcción para que el modelo sepa qué evitar antes de escribir una sola línea de CSS.

Bloque de sistema anti-bazofia (pégalo antes de cualquier construcción de UI)

<frontend_aesthetics>
You converge toward generic, "on-distribution" output — the "AI slop" aesthetic. Avoid it.
Typography: choose a distinctive, beautiful font (NOT Inter/Roboto/Arial). Use it decisively.
Color & theme: commit to ONE cohesive aesthetic via CSS variables; dominant colors + sharp accents, not a timid even palette. No purple-gradient-on-white.
Motion: prioritize one orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-only for HTML; Motion for React.
Backgrounds: build atmosphere/depth with layered gradients or patterns — never a flat solid.
Make unexpected, context-specific choices. Think outside the box.
</frontend_aesthetics>

De la idea al sitio desplegado​

Guided walkthrough1 of 6
  1. En un solo mensaje dale a Claude: qué es el sitio, las secciones, el público y UNA dirección estética con nombre (p. ej. 'editorial cálido, como Notion combinado con una revista impresa'). Los briefs vagos producen sitios vagos.

Prompts de construcción que parecen redactados por un diseñador senior​

Abrir con un rol profesional específico eleva de forma medible la calidad del resultado y reduce la varianza. Sé concreto sobre la estética, el stack y los estados.

Construcción de una sola pasada: un sitio real de Next.js + Tailwind + shadcn

You are a senior product designer + frontend engineer.
Build a Next.js (App Router) + Tailwind + shadcn/ui marketing site for <PRODUCT>.
Aesthetic: <ONE named direction, e.g. "editorial minimalism, Linear/Stripe energy">.
Typography: one distinctive display face + one mono/sans for body — NOT Inter.
Sections: hero, social proof, 3 feature blocks, pricing, FAQ, footer.
Requirements: fully responsive (mobile-first), dark mode, one orchestrated
page-load animation with staggered reveals, accessible (WCAG AA contrast).
Write DESIGN.md first with the color/type/spacing tokens, then build.
Scaffold files in parallel; show me the tree, then implement.

Prototipo instantáneo en Artifact (chat, sin configuración)

Create an interactive Artifact: a single-page landing for <IDEA>.
Make it genuinely beautiful, not generic AI slop — distinctive font (not Inter),
a committed color theme via CSS variables, layered gradient background,
and a staggered fade-in on load. Mobile-responsive. Self-contained HTML/React.

Refina: elimina la sensación genérica

Critique this UI as a senior product designer and list the 5 "AI default"
fingerprints it still has (font, spacing, color, layout cliché, motion).
Then redesign it around ONE bold aesthetic choice. Increase type contrast
(weight + size extremes), commit to a dominant color with a sharp accent,
and replace scattered hover effects with one orchestrated entrance.

Pulido que hace que parezca caro​

Pro tip
  • La tipografía es la mejora más barata: una Google Font distintiva + un salto de tamaño 3x+ entre display y cuerpo se lee al instante como 'diseñado'.
  • Movimiento: invierte en UN gran momento (una carga orquestada con animation-delay) en lugar de diez hovers diminutos.
  • Responsividad: pídele explícitamente a Claude que gestione móvil, texto largo, y los estados vacío, de carga y de error: por defecto se los salta.
  • Profundidad: degradados CSS superpuestos o un grano/patrón sutil superan a un fondo plano siempre.
  • Recuerda que Claude no puede ver su propio resultado: pega una captura o describe qué está mal para que el ciclo de refinamiento converja.
Watch out
  • 'Hazlo bonito' por sí solo rinde por debajo: es el equivalente en prompt al valor por defecto. En su lugar, nombra la estética, la política de fuentes y los valores por defecto que hay que evitar.
  • No dejes que un único prompt gigante construya todo de una sola pasada para un sitio real; sección por sección con un DESIGN.md es más controlable y usa mejor los tokens.
  • Trata las afirmaciones de marketing, las estadísticas y el texto de relleno generados por IA como borradores: verifícalos antes de publicar.

Despliega en minutos​

  • Vercel — el mejor encaje para Next.js. Conecta el repositorio de GitHub; cada push construye y despliega automáticamente con URLs de vista previa por rama.
  • Netlify — agnóstico del framework, con el mismo flujo de git-push-para-desplegar, y un hosting estático generoso.
  • GitHub Pages — hosting estático gratuito directamente desde el repositorio; combínalo con una exportación estática (Next.js output: "export", o una build de Astro) para un sitio en vivo sin coste. (Este mismo sitio se publica así.)

Conecta el despliegue

Set up this repo for deployment:
1. Add a sensible .gitignore and a README with run/build/deploy steps.
2. Configure a production build (static export if targeting GitHub Pages).
3. Give me the exact steps to connect Vercel (or Netlify) for auto-deploy on push,
 and a GitHub Actions workflow as a fallback. Don't commit any secrets.

Compruébate​

Compruébate

0/4
  1. Quieres un prototipo en vivo y compartible en 60 segundos sin configuración alguna. ¿Qué superficie?
  2. Según la guía de estética frontend de Anthropic, ¿cuál es un valor por defecto delator de 'bazofia de IA' que hay que evitar?
  3. ¿Cuál es la forma recomendada de mantener consistente el aspecto de un sitio a través de muchos prompts/sesiones?
  4. ¿Dónde sugiere Anthropic gastar tu presupuesto de movimiento para máximo deleite?
Key takeaways
  • Elige la superficie: Artifacts para prototipos instantáneos, Claude Code + framework para un sitio que poseas y sea desplegable.
  • Vence la 'bazofia de IA' nombrando la estética, la política de fuentes y los valores por defecto que hay que evitar: pega el bloque frontend_aesthetics de Anthropic.
  • Persiste un DESIGN.md para que el aspecto se mantenga consistente entre sesiones, igual que CLAUDE.md hace con el código.
  • Asígnale el rol de diseñador senior, construye sección por sección y exige los estados que se saltan (móvil, carga, vacío, error).
  • Gasta el presupuesto de movimiento en una carga orquestada; despliega mediante git-push a Vercel/Netlify o una exportación estática a GitHub Pages.

Fuentes y lecturas adicionales​