Colores
Paleta de la página agrupada por uso: fondos, textos, bordes, acentos
Exportar Pro
Extrae el sistema de diseño de cualquier web
Smart Design Inspector recorre una página, saca sus tokens de diseño (colores, escala tipográfica y espaciados) y los exporta a Tailwind v4 @theme, a variables CSS o a un DESIGN_SPECS.md listo para tu proyecto o para tu asistente de IA.
Función Pro en acceso anticipado gratis hasta el lanzamiento de la Pro (fecha por definir)
tucliente.example
/* Tailwind v4 */
@theme {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--text-h1--line-height: 1.1;
--spacing-section: 96px;
}/* Variables CSS */
:root {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--spacing-section: 96px;
}# Sistema de diseño · tucliente.example
## Colores
- primary #2563eb · botones y enlaces
- ink #0b0b0b · texto
## Tipografía
- H1 · Inter 600 · 48 px / 1,1
## Espaciados
- Sección · 96 px01
El trabajo que te ahorra
El problemaEl cliente te pasa una web de referencia: «quiero algo así». Para replicar su estilo necesitas sus colores, sus tamaños de letra y sus espaciados. Sacarlos con un cuentagotas y con DevTools son decenas de clics, y al final tienes una lista suelta de valores, no un sistema que puedas usar.
02
Qué exporta
3 tokensTipografía
Cada estilo (H1-H6, cuerpo, botones) con familia, tamaño, peso, interlineado y espaciado, y el @font-face o el enlace a Google Fonts
Espaciados
La escala de márgenes y paddings que se repite en la página
03
Tres formatos de salida
Copiar o descargarTailwind v4 @theme
Para pegar en tu CSS:
@theme {
--color-primary: …;
--font-heading: …;
--spacing-section: …;
}Variables CSS
En :root, para cualquier proyecto sin Tailwind.
DESIGN_SPECS.md
Un documento con todo el sistema explicado. Sirve para el equipo y para pasárselo a Claude, Cursor o cualquier asistente de IA cuando le pidas que construya con ese estilo.
04
Cómo se usa
3 pasos- 01
Abres la web de referencia.
- 02
Eliges Diseño → Exportar sistema.
- 03 Pro
Escoges el formato y lo copias o lo descargas.
| Gratis0 €para siempre | Pro49 €pago único | |
|---|---|---|
| Ver la paleta, las fuentes y la escala tipográfica de la página | ||
| Exportar el sistema de diseño: Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md | — | Acceso anticipado gratis |
06
Ética y licencias
InspírateEl estilo de una web (colores, tamaños, espaciados) no está protegido. Los textos, las imágenes, los logos y las fuentes comerciales sí. La extensión exporta valores, no contenido, y te avisa de la licencia de cada fuente. Úsalo para inspirarte, no para copiar una marca.
¿Es gratis?
Es una función Pro. Hasta el lanzamiento de la Pro (fecha por definir), está en acceso anticipado gratis para todos. Después se incluye en la Pro de 49 €, de pago único.
¿Qué versión de Tailwind usa?
Tailwind v4, con la directiva @theme. Si usas otra versión, exporta a variables CSS.
¿Saca el sistema de toda la web o de una página?
De la página que tienes abierta. Si las demás páginas usan el mismo sistema, el resultado es el mismo.
¿Sirve con una IA como Claude o Cursor?
Sí. El DESIGN_SPECS.md está escrito para que un asistente de IA lo lea y construya con ese estilo.
¿Exporta componentes?
No. Exporta tokens. Para copiar una sección como componente está convertir una web a Tailwind.
¿En qué navegadores y sistemas funciona?
En Chrome, Edge, Brave, Arc, Opera y Vivaldi, en Windows, Mac y Linux, desde la 1.0. Funciona igual en todos porque la extensión la ejecuta el navegador, no el sistema. El código está preparado para llevarla a Firefox y Safari sin reescribirla. Mientras está en desarrollo, puede haber cambios.
08
Sigue con
Funciones cercanasColores
La paleta de la página, cuentagotas y contraste WCAG de cada pareja de texto y fondo.
Colores de una web →Fuentes
Familia, pesos, origen, licencia y escala tipográfica de toda la página.
Fuentes de una web →Web a Tailwind
Copia una sección como JSX + Tailwind o como HTML/CSS.
Convertir una web a Tailwind →Precios
Gratis para siempre. Pro, 49 € una sola vez.
Ver precios →Lista de espera
Sé de los primeros en probarlo
Smart Design Inspector está en desarrollo. Déjanos tu email y te avisamos el día que salga en la Chrome Web Store, con las 3 funciones Pro gratis en acceso anticipado.
Un email el día del lanzamiento y pocos más · Baja con un clic