Claude escribe buen código, pero el gusto se lo das tú. Estos once sitios son de donde lo sacas: páginas para mirar, patrones para entender, componentes para copiar e íconos para poner.
En corto
No los abras todos igual: cada uno sirve para un momento distinto.
Los ordené según el momento en que los abres. De cada uno va qué es, qué parte es gratis y el prompt para usarlo con Claude. Al final, cómo meterlos en Claude Web Kit para que tu página salga con esas referencias desde el principio.
Un navegador para mirar. Para construir, Claude Code y Claude Web Kit.
Cuánto cuesta
Los once se usan gratis. Varios tienen una parte de pago, y en cada sitio está dicho cuál.
Lista al
5 de octubre de 2026
01 · Cómo leer la lista
Cuatro momentos, once sitios
Cuando le pides a Claude una página sin darle referencias, inventa una con lo que más ha visto. Por eso tantas páginas hechas con IA se parecen entre sí: el mismo degradado morado, las mismas tres tarjetas, el mismo botón. Con dos o tres buenas referencias el resultado cambia por completo, y a Claude le cuesta lo mismo.
El error es abrir los once sitios al mismo tiempo. Cada uno contesta una pregunta distinta, y en este orden:
Los primeros dos grupos son para que tú decidas, con una excepción: el DESIGN.md de Refero, que Claude lee como archivo. Los últimos dos son material que Claude usa tal cual.
02 · Los once
Qué es cada uno y cómo se lo das a Claude
Van en el orden de los grupos. Las etiquetas de cada tarjeta dicen para qué lo abres, qué es y cuánto cuesta. Debajo va el prompt, listo para copiar.
Una galería de páginas web elegidas a mano desde 2013. Se filtra por tipo de sitio (portafolio, agencia, tienda, SaaS, restaurante y más de setenta) y por la plataforma con la que se hizo.
Para qué lo abres
Encontrar dos o tres páginas de tu misma industria que se vean como quieres que se vea la tuya. Es la referencia más rápida para ponerle dirección visual a Claude.
Cuánto cuesta
Gratis para mirar. Vende algunas plantillas aparte.
Que estudie tus capturas antes de diseñar
Toma capturas completas de las páginas que elegiste y pásaselas junto con esto.
Te paso capturas de tres páginas que encontré en Minimal Gallery. Antes de diseñar nada, estúdialas.
Dime de cada una: qué colores usa, qué tipografía, cómo acomoda las secciones, cuánto aire deja y cómo usa las fotos.
Después dime qué tienen en común las tres, porque eso es lo que quiero para mi página.
No copies textos, logos ni fotos de ninguna: tomamos la dirección, no el contenido.
Un directorio de herramientas y recursos de diseño: 2,547 en 59 categorías el día que armé esta lista. Fuentes, paletas, mockups, íconos, herramientas de IA. Guardas tus favoritos con tu cuenta de Google.
Para qué lo abres
Cuando te falta una pieza y no sabes dónde buscarla: una fuente para títulos, un generador de paletas, un sitio de mockups. Es el índice de todo lo que no está en esta lista.
Cuánto cuesta
Gratis.
Que te ayude a elegir entre lo que encontraste
Para cuando Design Bookmark te dio cinco opciones y no sabes cuál.
Estoy armando la página de mi negocio y necesito [una fuente para los títulos / una paleta de colores / íconos].
Encontré estas opciones en Design Bookmark: [pega los links].
Ábrelas y dime cuál le queda mejor a una página de [tu tipo de negocio] y por qué.
Dime también si alguna tiene licencia que no me deje usarla en un sitio comercial.
Más de 2,000 sistemas de diseño de productos reales, cada uno convertido en un archivo DESIGN.md: colores, tipografía, espaciado y componentes en valores exactos que Claude entiende sin interpretar.
Para qué lo abres
Es el único de los once que no le das a Claude como captura sino como archivo. Cuando ya sabes qué estilo quieres, el DESIGN.md le da las medidas exactas en vez de adjetivos.
Cuánto cuesta
Ver y copiar los estilos es gratis. La conexión directa con Claude por MCP es de pago.
Que respete el DESIGN.md en vez de inventar
Descarga el DESIGN.md del estilo que te gustó y déjalo en la carpeta del proyecto.
En la carpeta del proyecto dejé un DESIGN.md que saqué de Refero Styles.
Léelo completo y úsalo como el sistema de diseño de esta página: colores, tipografía, espaciado y componentes salen de ahí.
Si necesitas algo que el archivo no define, pregúntame antes de inventarlo.
Copiamos el estilo, no la marca: nada de su logo, su nombre ni sus textos.
Un catálogo de componentes de interfaz armado con los sistemas de diseño de empresas grandes: 60 componentes, 95 sistemas y 2,671 ejemplos. Cada componente trae cómo se llama, sus otros nombres y cómo lo resuelve cada empresa.
Para qué lo abres
Saber cómo se llama lo que quieres y cómo debe comportarse antes de pedirlo. Si le pides a Claude un acordeón y no una cosa que se abre, el resultado mejora mucho.
Cuánto cuesta
Gratis.
Que construya el componente como lo hacen los sistemas serios
Abre el componente en The Component Gallery y pásale el nombre y dos ejemplos.
Necesito un [nombre del componente, por ejemplo: acordeón para preguntas frecuentes].
En The Component Gallery vi cómo lo resuelven estos sistemas: [pega dos o tres links de ejemplos].
Constrúyelo siguiendo lo que tienen en común: cómo se abre y se cierra, cómo se usa con teclado y qué le dice al lector de pantalla.
Usa los colores y la tipografía de mi página, no los de esos ejemplos.
Una galería de llamadas a la acción: el botón, el formulario o el bloque que le pide al visitante que haga algo. Está en ocho categorías: botón, compra, descarga, formulario, modal, navegación, newsletter y precios.
Para qué lo abres
Arreglar la parte de la página que vende. Casi todas las páginas hechas con IA terminan con el mismo botón de Empezar ahora; aquí ves cómo lo resuelven las que convierten.
Cuánto cuesta
Gratis.
Que rehaga tu llamada a la acción
Captura dos CTAs de la categoría que te toca y pásaselas con esto.
Te paso capturas de dos llamadas a la acción que me gustaron en CTA Gallery.
Quiero rehacer la sección de [contacto / precios / suscripción] de mi página con esa idea.
Dime qué hace que funcionen: el texto del botón, lo que va alrededor, cuánto piden llenar.
Después propón la mía con el texto escrito para mi negocio y mis colores. No uses Empezar ahora ni Saber más.
Un registro de más de 12,000 componentes, plantillas y temas en React y Tailwind, subidos por diseñadores de la comunidad. Cada componente trae un prompt para pegárselo a Claude Code y un comando para instalarlo con shadcn.
Para qué lo abres
Cuando sabes qué pieza quieres (un hero, una tabla de precios, un menú) y prefieres partir de una que ya se ve bien. Es el catálogo más grande de los once.
Cuánto cuesta
Mirar es gratis y el plan gratis copia un número limitado de componentes al día. El de pago quita el límite y suma su generador con IA.
Que instale el componente y lo vuelva tuyo
Copia el prompt que trae el componente en 21st.dev y pega esto debajo.
Arriba va el prompt del componente que elegí en 21st.dev.
Instálalo en mi proyecto y ponlo en la sección de [hero / precios / testimonios].
Después adáptalo: mis colores, mi tipografía y mis textos. Que no quede ningún texto de ejemplo en inglés.
Enséñame una captura en celular y en escritorio cuando esté.
Una librería de componentes animados para React, Tailwind y Motion: fondos que se mueven, tarjetas en 3D, efectos de texto, carruseles. 116 componentes gratis el día que armé esta lista.
Para qué lo abres
El efecto que hace que alguien se quede en tu hero. Son los componentes más vistosos de la lista, y por eso mismo conviene usar uno o dos, no diez.
Cuánto cuesta
Los componentes sueltos son gratis. Los bloques y plantillas completas son de pago, con un pago único.
Que ponga un efecto sin cargar la página
Abre el componente en Aceternity UI y pásale el link.
Quiero este componente de Aceternity UI en mi página: [pega el link].
Lee su página, instala lo que necesite y ponlo en [la sección].
Que respete prefers-reduced-motion: si alguien tiene las animaciones apagadas en su sistema, el efecto se queda quieto.
Revisa que en celular no se trabe ni tape el texto, y enséñame una captura.
Más de 150 componentes animados, abiertos y con licencia MIT, hechos para convivir con shadcn/ui. Se instalan con el mismo CLI de shadcn: marquesinas, números que cuentan, bordes que brillan, cuadrículas de tarjetas.
Para qué lo abres
Los detalles en movimiento de una landing: la fila de logos de clientes, el contador de resultados, el botón que llama la atención. Más sobrio que Aceternity.
Cuánto cuesta
Los componentes son gratis y de código abierto. Las plantillas Pro son de pago.
Que use Magic UI donde suma
Para cuando la página ya existe y le falta movimiento.
Revisa mi página y dime en qué dos o tres lugares le sumaría un componente de Magic UI (magicui.design).
Para cada lugar dime qué componente usarías y por qué ahí.
Espera a que te diga cuáles sí. Luego instálalos con el CLI de shadcn y adáptalos a mis colores.
Nada de animaciones en el texto que hay que leer.
Componentes de animación de código abierto (MIT) para React: efectos de texto, transiciones entre estados, paneles y diálogos que se abren con movimiento. Se copian y se pegan.
Para qué lo abres
Las transiciones finas, las que se notan sin que nadie sepa por qué. Ideal para portafolios y productos donde el detalle importa más que el efecto grande.
Cuánto cuesta
Gratis y de código abierto. Tiene una versión Pro de pago con más componentes.
Que anime el texto y las transiciones
Pásale el link del componente que elegiste en Motion Primitives.
Quiero usar este componente de Motion Primitives: [pega el link].
Ponlo en [el título del hero / al abrir el menú / al cambiar de pestaña].
Que la animación dure poco y no retrase la lectura. Si dura más de medio segundo, acórtala.
Que respete prefers-reduced-motion y enséñame cómo se ve.
La librería abierta más grande de piezas sueltas: miles de botones, tarjetas, loaders, interruptores e inputs hechos por la comunidad, en CSS o en Tailwind. Todo con licencia MIT.
Para qué lo abres
La pieza chica con personalidad: el botón principal, el loader, el checkbox. Viene en HTML y CSS, así que Claude la traduce a tu proyecto.
Cuánto cuesta
Gratis.
Que traduzca la pieza a tu proyecto
Copia el HTML y el CSS del elemento en Uiverse y pégalos debajo.
Abajo va el HTML y el CSS de un [botón / loader / tarjeta] que saqué de Uiverse.
Conviértelo en un componente de React con Tailwind para mi proyecto, sin perder cómo se ve ni cómo se mueve.
Cámbiale los colores por los de mi página y que funcione con teclado.
Úsalo en [dónde va].
Una colección de íconos en 3D hechos a mano por Vijay Verma: más de 1,400 imágenes en varios ángulos y colores, en PNG y en Figma. Licencia CC0: los usas en proyectos comerciales sin dar crédito.
Para qué lo abres
Ilustrar secciones sin fotos de banco y sin dibujitos genéricos. Funcionan muy bien en la lista de beneficios o en las tarjetas de servicios.
Cuánto cuesta
La colección es gratis. Hay una versión Pro, en acceso anticipado, para editar color y ángulo en línea.
Que acomode los íconos en tu página
Descarga los PNG que te gustaron y déjalos en una carpeta del proyecto.
En la carpeta [nombre de la carpeta] dejé íconos en 3D que bajé de 3dicons.
Úsalos en [la sección de beneficios / las tarjetas de servicios], uno por tarjeta, eligiendo el que mejor cuente cada idea.
Conviértelos a WebP, ponles un texto alternativo que describa lo que muestran y que todos se vean del mismo tamaño.
Enséñame una captura en celular y en escritorio.
03 · Con Claude Web Kit
Dónde entra cada sitio en las seis fases
Claude Web Kit es el kit gratuito con el que Claude Code te construye la página de tu negocio en seis fases: te entrevista, arma el sistema de diseño, crea el proyecto, construye, revisa y publica en Vercel. Por dentro usa Next.js y shadcn/ui, el mismo stack de 21st.dev, Aceternity UI, Magic UI y Motion Primitives, así que sus componentes entran sin adaptar nada.
Cada grupo de la lista entra en un momento distinto:
Antes de empezar
Minimal Gallery · CTA Gallery · Refero Styles
Las capturas y el DESIGN.md van a la carpeta contexto/diseno/, junto a tu logo y tus fotos. Con el primer prompt de abajo, Claude la lee antes de hacerte una sola pregunta.
Fase 2, sistema de diseño
Refero Styles · Design Bookmark
Si hay DESIGN.md, los colores y las fuentes salen de ahí. Si no, la fuente o la paleta que elegiste en Design Bookmark.
Es una lista simple que escribes tú: una línea por sección con el link del componente que quieres ahí. Por ejemplo: Hero, un fondo animado de Aceternity UI. Logos de clientes, la marquesina de Magic UI. Precios, la tabla que vi en 21st.dev. Con eso Claude deja de adivinar y tú dejas de explicarlo cada vez.
Al arrancar: que lea tus referencias
Pégalo en Claude Code dentro de la carpeta de Web Kit, antes del cuestionario.
Antes de empezar el cuestionario, lee todo lo que hay en contexto/diseno/.
- Las capturas de referencia son páginas que me gustan, sacadas de Minimal Gallery y CTA Gallery.
- DESIGN.md es un sistema de diseño de Refero Styles: úsalo como base de colores, tipografía y espaciado.
- componentes.md trae los links de los componentes que quiero usar y en qué sección va cada uno.
- iconos/ trae íconos en 3D de 3dicons.
1. Dime qué tomas de cada captura y qué no vas a copiar.
2. En la fase del sistema de diseño, parte del DESIGN.md y dime solo lo que cambiarías.
3. En la fase de construcción, usa los componentes de componentes.md en su sección. Si alguno no encaja, dímelo antes de cambiarlo.
4. Nada de logos, nombres ni textos de las páginas de referencia.
A media construcción: un componente nuevo
Para cuando la página ya va avanzada y encontraste algo que quieres meter.
Encontré este componente y lo quiero en la sección de [nombre de la sección]: [pega el link].
Lee su página e instálalo como diga (si trae comando de shadcn, úsalo).
Adáptalo al sistema de diseño que ya aprobamos: colores, fuentes, bordes y espaciado.
Si choca con algo que ya está en la página, dime qué y propón cómo resolverlo antes de tocar nada.
Enséñame capturas en celular y en escritorio.
Con el DESIGN.md de un producto que admiras en la carpeta del proyecto.
Vamos a hacer la landing de [tu producto].
Sistema de diseño: el DESIGN.md de la carpeta, que saqué de Refero Styles.
Secciones: hero, problema, cómo funciona, logos o testimonios, precios, preguntas frecuentes y cierre.
Para la tabla de precios y las preguntas frecuentes sigue los patrones de The Component Gallery.
El hero y los precios salen de 21st.dev; la fila de logos y los números, de Magic UI.
Antes de construir, dime qué componente propones para cada sección y espera mi sí.
Portafolio personal
Diseñadores, fotógrafos, freelancers, cualquiera que venda su trabajo.
UsaMinimal GalleryMotion PrimitivesUiverse3dicons
Receta: portafolio
Filtra Minimal Gallery por Portfolio y guarda tres capturas antes de empezar.
Vamos a hacer mi portafolio. Te paso tres capturas de portafolios que me gustan, de Minimal Gallery.
Quiero mucho aire, tipografía grande y que el trabajo sea lo que se ve primero.
Usa Motion Primitives para el texto del inicio y para abrir cada proyecto, nada más.
El botón de contacto, uno de Uiverse traducido a mi proyecto. Íconos de 3dicons solo en la sección de servicios.
Antes de construir, enséñame la estructura de la página en una lista.
Negocio local
Restaurante, clínica, estudio, tienda física: lo que necesita que lo llamen o lo visiten.
UsaMinimal GalleryCTA GalleryAceternity UI3dicons
Receta: negocio local
Filtra Minimal Gallery por tu industria y CTA Gallery por Form.
Vamos a hacer la página de [tu negocio] en [tu ciudad].
Te paso capturas de dos páginas de mi industria de Minimal Gallery y dos formularios de contacto de CTA Gallery.
La página tiene que lograr una cosa: que me escriban o me visiten. El botón de WhatsApp y la dirección tienen que verse sin bajar.
Un solo efecto de Aceternity UI en el hero, nada más. Íconos de 3dicons para los servicios.
Horarios, precios y teléfono los pongo yo: márcalos como pendientes en vez de inventarlos.
05 · Letra chica
Lo que conviene saber antes de copiar
Te llevas el estilo y nada más
Las capturas de Minimal Gallery, CTA Gallery y The Component Gallery son referencias para Claude, no material para publicar. Lo mismo un DESIGN.md de Refero: te llevas el estilo, nunca el logo, el nombre, los textos ni las fotos de otra marca.
Las licencias, una por una
Uiverse, Magic UI y Motion Primitives tienen licencia MIT: los usas en proyectos de clientes sin problema. Los íconos de 3dicons son CC0, ni siquiera piden crédito. Lo que compres en 21st.dev o en Aceternity Pro tiene sus propias condiciones, y vale la pena leerlas antes de usarlo para un cliente.
Lo gratis tiene límites
21st.dev deja copiar pocos componentes al día en su plan gratis. Aceternity, Magic UI, Motion Primitives y 3dicons separan una parte Pro. La conexión de Refero con Claude por MCP es de pago, aunque ver y copiar los estilos no. Ninguno de los once te obliga a pagar para hacer lo de esta guía.
Con las animaciones, menos
Con tres librerías de animación en la lista, la tentación es usarlas todas. Una página con un efecto en cada sección se siente barata y carga lento en celular. Lo que a mí me funciona: un efecto grande en el hero, detalles chicos en el resto y nada en el texto que hay que leer.
Las cifras y los precios de esta guía se revisaron en cada sitio el 5 de octubre de 2026. Estos sitios cambian seguido: si algo no coincide cuando lo abras, manda lo que dice el sitio.
Esta es la lista al 5 de octubre de 2026 y va a cambiar: salen sitios nuevos cada semana y alguno de estos va a cobrar lo que hoy regala. Si tienes uno que abres más que cualquiera de estos, mándamelo por Instagram y lo pruebo para la siguiente versión.