Stylepack
Gratis: 3 paquetes al día, 10 con una cuenta gratuita

Convierte cualquier web en un paquete de diseño para tu IA

Pega una URL. Stylepack mide la página tal como se renderiza (colores, tipografía, espaciado, radios, sombras, componentes) y cómo se comporta: hover y foco, menús y tooltips, el otro tema y cuatro anchos de pantalla. Obtienes DESIGN.md, BEHAVIOR.md, tokens, un tema de Tailwind, un SKILL.md y capturas en un solo zip.

Medido, no adivinado

Cada valor sale de la página en vivo, ponderado por lo que realmente se ve en pantalla. Sin adivinar a partir de una captura, sin un modelo que se invente un código hex.

Comportamiento, no solo colores

Estados de hover y foco, posición y tiempo de aparición de los tooltips, menús, animaciones al hacer scroll, elementos fijos, tablas, formularios, ajuste de línea del texto, modo oscuro y cada breakpoint.

Formatos listos para agentes

El DESIGN.md de Google, un SKILL.md, tokens W3C, variables CSS y un tema de Tailwind v4. Suelta la carpeta en tu proyecto y apunta tu agente hacia ella.

Extrae el sistema de diseño de cualquier web

  1. Pega una URL

    Cualquier web pública, como stripe.com. Los subdominios como docs.stripe.com cuentan como un sitio aparte.

  2. Deja que se mida

    La página se abre en un navegador real, con cuatro anchos de pantalla y en ambos temas. En menos de un minuto el paquete está listo.

  3. Pásaselo a tu IA

    Descarga el zip, pon la carpeta en tu proyecto y pide a tu agente que lea DESIGN.md y BEHAVIOR.md antes de escribir código.

Qué hay en el paquete

Una carpeta, lista para cualquier agente de programación con IA o app de chat.

DESIGN.md
El sistema de diseño en el formato DESIGN.md de Google: colores, tipografía, espaciado, radios, sombras y componentes.
BEHAVIOR.md
Hover, foco, tooltips, menús, movimiento, scroll, tablas, formularios, ajuste del texto, reglas responsive y modo oscuro.
SKILL.md
Una skill para Claude Code y Cursor que guía al agente por el paquete en el orden correcto.
tokens.json
Tokens de diseño W3C (DTCG) para Style Dictionary y los plugins de tokens de Figma.
tokens.css
Todos los valores como propiedades personalizadas de CSS.
tailwind.css
Los mismos valores como un bloque @theme de Tailwind v4.
screenshots/
El sitio a 1440, 1024, 768 y 390 píxeles de ancho, más el otro tema si lo hay.
README.md, PROMPT.md
Cómo entregar el paquete a cada herramienta de IA, y el prompt para pegar.

Funciona con las herramientas de IA que ya usas

Una guía paso a paso para cada una:

Paquetes de diseño de ejemplo

Ver toda la galería
Página de inicio de linear.app
linear.app
Inter Variable + Berkeley Mono
SaaS y productividadOscuro + claro
Página de inicio de resend.com
resend.com
domaine + aBCFavorit
Herramientas para desarrolladoresOscuro + claro
Página de inicio de supabase.com
supabase.com
Manrope + Inter
Herramientas para desarrolladoresClaro + oscuro
Página de inicio de figma.com
figma.com
figmaSans + figmaMono
Herramientas de diseñoClaro
Página de inicio de framer.com
framer.com
GT Walsheim Medium + Inter Variable
Herramientas de diseñoOscuro
Página de inicio de apple.com
apple.com
SF Pro Text + SF Pro Display
Tecnología de consumoOscuro + claro
Página de inicio de arc.net
arc.net
Marlin Soft SQ + -apple-system
Tecnología de consumoClaro

Preguntas

¿Qué es Stylepack?

Stylepack (stylepack.ai) es una herramienta web gratuita que convierte cualquier sitio web público en un paquete de diseño para agentes de programación con IA: DESIGN.md, BEHAVIOR.md, SKILL.md, tokens de diseño, un tema de Tailwind y capturas, todo en un zip.

¿Cómo copio el diseño de una web en Cursor o Claude Code?

Pega la dirección del sitio en Stylepack y descarga el paquete. Pon la carpeta en tu proyecto y pide al agente que lea DESIGN.md y BEHAVIOR.md y mire las capturas antes de construir nada. Cada página de paquete tiene los pasos exactos y un prompt para copiar.

¿Qué es DESIGN.md?

DESIGN.md es el formato abierto de Google para describir una identidad visual a los agentes de programación en un solo archivo Markdown: colores, tipografía, espaciado, radios, sombras y componentes. Stylepack escribe uno para cualquier sitio web público.

¿Cómo extraigo los tokens de diseño de una web?

Pega su dirección en Stylepack. El paquete incluye tokens.json en el formato de tokens de diseño W3C (DTCG), los mismos valores como propiedades personalizadas de CSS en tokens.css, y un tema de Tailwind v4 en tailwind.css.

¿Qué cubre BEHAVIOR.md?

Cómo se comporta el sitio, no solo cómo se ve: estados de hover y foco, tooltips, menús, movimiento, scroll, tablas, formularios, ajuste del texto, el diseño a 1440, 1024, 768 y 390 píxeles de ancho, y el modo oscuro.

¿Es gratis?

Sí. Tienes 3 paquetes al día sin cuenta y 10 al día con una cuenta gratuita. Los paquetes que ya están en la galería no cuentan.

¿Con qué herramientas de IA funciona?

Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable y Bolt, o cualquier otra que lea Markdown y CSS.

¿Está Stylepack afiliado a los sitios de la galería?

No. Un paquete describe el diseño público de un sitio como referencia. Los logotipos, fuentes, imágenes y textos pertenecen a sus propietarios, y comprobar las licencias de las fuentes depende de ti.