⌘ Claude Code Sitios web
0 / 78

Prompts probados de sitios web

Diez prompts que usan los que construyen mejores sitios. Copiá, pegá y adaptá.

Pack de 10 prompts probados para construir sitios web


1. Tres variantes de diseño primero

El front-end es visual: tenés que ver opciones para elegir bien.

Quiero un sitio para [NEGOCIO / PROPÓSITO]. No me des un solo diseño: armame 3
variantes genuinamente distintas (por ejemplo: editorial, oscuro/audaz,
minimalista). Dejame verlas las tres antes de elegir dirección. Usá la skill de
diseño de front-end.

2. Siempre la skill de diseño

Construí un sitio moderno y profesional para [NEGOCIO]. Usá la skill de diseño de
front-end. No quiero diseño genérico de IA: tipografía de Google con carácter
(nunca Inter), tarjetas con peso visual, espaciado premium, sin el típico fondo
blanco con degradé violeta.

3. Clonar el diseño de un sitio que te gusta

Pasarle el código real (no solo una captura) te acerca al pixel.

Quiero clonar el diseño de un sitio que admiro. Te paso su HTML, el CSS/JS que
enlaza, capturas de pantalla completas y la URL: [PEGÁ ACÁ]. Recreá su layout y su
estilo como plantilla, después cambiamos marca, textos, colores y logo para que sea
mío.

4. Con mis archivos de marca

Construí una landing moderna para [NEGOCIO]. Te paso mi logo @logo.png y mi guía de
marca @marca.png. Hacé toda la página con ese logo, esos colores exactos y esa
tipografía. Usá la skill de diseño y levantá la preview cuando termines.

5. Sección por sección

Construyamos el sitio de a una sección, no todo junto. Empezá solo por el hero.
Cuando lo apruebe, pasamos a la sección 1, después la 2. Para cada una, sugerí qué
elemento visual le quedaría mejor. Un solo set de cambios por mensaje.

6. Que se autocorrija con capturas

Después de construir la página, hacé un loop de capturas: sacá una captura,
comparala con el objetivo, arreglá lo que no coincida, y repetí unas 3 veces antes
de mostrarme la versión 1.

7. Probar todo el sitio en el navegador

Levantá un servidor y abrí el sitio en un navegador visible para que yo lo vea.
Hacé clic en cada página, llená cada campo de cada formulario, probá cada
interacción. Anotá los bugs, arreglalos en el sitio, y volvé a probar hasta que
pase todo.

8. Optimizar para celular

Claude no lo hace solo, y es lo que más rompe sitios publicados.

El sitio se ve bien en compu pero NO está optimizado para celular. Abrilo, pasá a
una pantalla de teléfono, y reordená el layout para que se vea bien en mobile (texto
legible, botones tocables, sin scroll horizontal), sin romper la versión de
escritorio. Mostrame antes y después.

9. Publicar (GitHub + Vercel)

Primero confirmá que el sitio funciona abriéndolo en localhost para que lo revise.
Después creá un repo privado nuevo en GitHub y subí el código. Por último, guiame
para conectar el repo a Vercel y que quede en vivo. Regla del proyecto: probamos en
localhost hasta que yo diga "subilo a GitHub".

10. Un componente premium

Quiero mejorar una parte de la página con un componente más premium. Te paso el
código de un componente de una librería (21st.dev / shadcn / similar): [PEGÁ ACÁ].
Integralo con precisión donde te indico y seguí el código tal cual.

Guardá los que te sirvan. Estos son la base de todo sitio que construyas.