Salta al contingut
Sigues dels primers a provar-hoSigues dels primers

Sistema de disseny

Obro la web de referència i n’exporto els colors, la tipografia i els espaiats com un sistema que puc fer servir.

Feina que estalvia

Treure colors, mides i espaiats amb comptagotes i DevTools són desenes de clics i acaba en una llista solta de valors.

Què exporta

Exporta tres coses: la paleta agrupada per ús, cada estil tipogràfic amb la seva font i l’escala d’espaiats que es repeteix.

Tres formats

El copio com a Tailwind v4 @theme, com a variables CSS o com un DESIGN_SPECS.md per passar-lo a una IA.

Com es fa servir

Obro la web, trio Disseny, després Exportar sistema, escullo el format i el copio o el descarrego.

Gratuït i Pro

Veure la paleta, les fonts i l’escala és gratuït. Exportar el sistema és Pro, gratuït durant l’accés anticipat.

Ètica i llicències

L’estil no està protegit, però els textos, les imatges, els logos i les fonts comercials sí: exporto valors, no contingut.

Dubtes

Miro quina versió de Tailwind fa servir, si treu el sistema de tota la web o d’una pàgina i si serveix amb una IA.

Continua amb

Continuo amb els colors, les fonts, la conversió a Tailwind o els preus.

Llista d’espera

Vull endur-me el sistema de disseny d’una web: m’apunto a la llista d’espera per provar-ho dels primers.

Exportar Pro

Extreu el sistema de disseny de qualsevol web

Smart Design Inspector recorre una pàgina, en treu els tokens de disseny (colors, escala tipogràfica i espaiats) i els exporta a Tailwind v4 @theme, a variables CSS o a un DESIGN_SPECS.md a punt per al teu projecte o per al teu assistent d’IA.

Apunta’t a la llista d’espera Els tres formats

Funció Pro en accés anticipat gratuït fins al llançament de la Pro (data per 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;
}
Exemple il·lustratiu · Pro · accés anticipat
01

La feina que t’estalvia

El problema

El client et passa una web de referència: «vull una cosa així». Per replicar-ne l’estil necessites els colors, les mides de lletra i els espaiats. Treure’ls amb un comptagotes i amb DevTools són desenes de clics, i al final tens una llista solta de valors, no un sistema que puguis fer servir.

02

Què exporta

3 tokens

Colors

Paleta de la pàgina agrupada per ús: fons, textos, vores, accents

Tipografia

Cada estil (H1-H6, cos, botons) amb família, mida, pes, interlineat i espaiat, i el @font-face o l’enllaç a Google Fonts

Espaiats

L’escala de marges i paddings que es repeteix a la pàgina

03

Tres formats de sortida

Copiar o descarregar

Tailwind v4 @theme

Per enganxar al teu CSS:

@theme {
  --color-primary: …;
  --font-heading: …;
  --spacing-section: …;
}

Variables CSS

A :root, per a qualsevol projecte sense Tailwind.

DESIGN_SPECS.md

Un document amb tot el sistema explicat. Serveix per a l’equip i per passar-lo a Claude, Cursor o qualsevol assistent d’IA quan li demanis que construeixi amb aquest estil.

04

Com es fa servir

3 passos
  1. 01

    Obres la web de referència.

  2. 02

    Tries Disseny → Exportar sistema.

  3. 03 Pro

    Esculls el format i el copies o el descarregues.

05

Gratuït i Pro

Veure preus →
Gratuït0 €per semprePro49 €pagament únic
Veure la paleta, les fonts i l’escala tipogràfica de la pàgina
Exportar el sistema de disseny: Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md—Accés anticipat gratuït

És una funció Pro. Fins al llançament de la Pro (data per definir), és en accés anticipat gratuït per a tothom. Després s’inclou a la Pro de 49 €, de pagament únic.

Apunta’t a la llista d’espera
06

Ètica i llicències

Inspira’t

L’estil d’una web (colors, mides, espaiats) no està protegit. Els textos, les imatges, els logos i les fonts comercials, sí. L’extensió exporta valors, no contingut, i t’avisa de la llicència de cada font. Fes-la servir per inspirar-te, no per copiar una marca.

07

Preguntes freqüents

Més preguntes →
És gratuït?

És una funció Pro. Fins al llançament de la Pro (data per definir), és en accés anticipat gratuït per a tothom. Després s’inclou a la Pro de 49 €, de pagament únic.

Quina versió de Tailwind fa servir?

Tailwind v4, amb la directiva @theme. Si fas servir una altra versió, exporta a variables CSS.

Treu el sistema de tota la web o d’una pàgina?

De la pàgina que tens oberta. Si les altres pàgines fan servir el mateix sistema, el resultat és el mateix.

Serveix amb una IA com Claude o Cursor?

Sí. El DESIGN_SPECS.md està escrit perquè un assistent d’IA el llegeixi i construeixi amb aquest estil.

Exporta components?

No. Exporta tokens. Per copiar una secció com a component, tens la conversió d’una web a Tailwind.

En quins navegadors i sistemes funciona?

A Chrome, Edge, Brave, Arc, Opera i Vivaldi, a Windows, Mac i Linux, des de la 1.0. Funciona igual a tots perquè l’extensió l’executa el navegador, no el sistema. El codi està preparat per portar-la a Firefox i Safari sense reescriure-la. Mentre està en desenvolupament, hi pot haver canvis.

08

Continua amb

Funcions properes
Gratuït

Colors

La paleta de la pàgina, comptagotes i contrast WCAG de cada parella de text i fons.

Colors d’una web →
Gratuït

Fonts

Família, pesos, origen, llicència i escala tipogràfica de tota la pàgina.

Fonts d’una web →
Pro · accés anticipat

Web a Tailwind

Copia una secció com a JSX + Tailwind o com a HTML/CSS.

Convertir una web a Tailwind →

Preus

Gratuït per sempre. Pro, 49 € una sola vegada.

Veure preus →

Llista d’espera

Sigues dels primers a provar-lo

Smart Design Inspector està en desenvolupament. Deixa’ns el teu correu i t’avisarem el dia que surti a la Chrome Web Store, amb les 7 funcions Pro gratuïtes en accés anticipat.

Un correu el dia del llançament i pocs més · Baixa amb un clic

Què fas (opcional)

Comença per la web de la teva competència

Apunta’t a la llista d’espera