Tot en un
Abans obria cinc extensions per estudiar una web. Ara n’obro una i veig font, colors, CSS i SEO, sense compte.
Una sola finestra
Cada extensió mostrava la seva dada a la seva finestra i cap no desava res. Ara ho veig tot junt i ho deso.
Comparar
Deso la fitxa de la meva web i la de les tres primeres de Google, i les miro una al costat de l’altra en una taula.
Tot a mà
Passo el ratolí i veig la font, els colors i el CSS del que assenyalo. Amb un clic, el SEO i la captura de la pàgina.
Prova-ho
Abans d’instal·lar res, activo la demo i passo el ratolí per aquesta mateixa pàgina: veig font, mida, color i caixa.
La dada, tal com és
Veig la font amb la seva llicència, el SEO d’una URL i el sistema de disseny de la web, tal qual, sense copiar res a mà.
Per a qui
Dissenyador, SEO o agència: cadascú en treu el que necessita, des dels tokens de la referència fins a la taula per al client.
Producte viu
Miro les novetats: la v1.0 del llançament i l’accés anticipat a set funcions Pro.
Llançament
Llegeixo la llista del dia del llançament: les funcions d’inspecció, SEO i captura hi són des del primer dia.
Preus
El bàsic és gratuït per sempre. La Pro es paga una vegada, sense subscripció, i set funcions Pro són gratuïtes durant l’accés anticipat.
Llista d’espera
Encara no és a la Chrome Web Store: m’apunto a la llista d’espera per ser dels primers a provar-la.
Dubtes
Abans d’instal·lar, repasso les preguntes més habituals i trobo la resposta sense sortir de la pàgina.
Extensió de Chrome · Disseny i SEO
Treu les fonts, els colors, el CSS i el SEO de qualsevol pàgina, compara diverses webs en una taula i exporta’n el sistema de disseny a Tailwind.
Local, sense compte · Pro de pagament únic · 8 idiomes
Abans
Amb Smart Design Inspector
La funció estrella
Desa la fitxa de cada web i compara-les: title, encapçalaments, schema, fonts, colors i Core Web Vitals. Exporta la taula a CSV o Markdown i lliura-la al client.
Comparar webs →| elteuclient.example | competidor-a.example | competidor-b.example | |
|---|---|---|---|
| Title | 58 car.OK | 74 car.Millorable | 52 car.OK |
| H1 | 1OK | 0Falta | 1OK |
| Schema | OrganizationOK | —Falta | ProductOK |
| Font | Inter | Poppins | DM Sans |
| Color | #2563EB | #16A34A | #0B0B0B |
| LCP | 1,8 sOK | 3,4 sMillorable | 2,1 sOK |
Desa la fitxa de cada competidor i compara-les en una taula exportable.
Comparar webs →Title, description, Open Graph, H1-H6, schema, hreflang, robots, sitemap i llms.txt, amb avisos. I amb un clic, a PageSpeed o isitagentready.com.
Inspector SEO →Passa el ratolí i veu el CSS calculat, la caixa, els marges i les distàncies.
Inspector CSS →Família, pesos, origen, llicència i escala tipogràfica de tota la pàgina.
Quina font fa servir una web →La paleta de la pàgina, comptagotes i contrast WCAG de cada parella de text i fons.
Treure els colors d’una web →Colors, espaiats i tipografia a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md.
Extreure el sistema de disseny →Copia una secció com a JSX + Tailwind o com a HTML/CSS.
Convertir una web a Tailwind →Pàgina completa en PNG o PDF, o un sol element.
Activa la demo i passa el ratolí per aquesta pàgina: veuràs la font, la mida, el color i la caixa de cada element, com a l’extensió.
Només a l’escriptori · L’extensió fa molt més
Fonts
Família, pesos, mides i origen de cada font de la pàgina, i l’escala tipogràfica completa d’H1 a botons.
Playfair Display
Google Fonts · OFL
Inspector SEO
Tot el que Google llegeix a la capçalera i al cos, amb avisos que diuen què cal arreglar.
| Title | Smart Design Inspector – Design & SEO… | OK |
| Description | Estudia qualsevol web des de Chrome… | Llarga |
| Canonical | / | OK |
| OG image | — | Falta |
| hreflang | 8 idiomes + x-default | OK |
| llms.txt | /llms.txt | OK |
Sistema de disseny Pro
Colors, espaiats i tipografia, a punt per enganxar al teu projecte o passar a la teva IA.
@theme/* elteuclient.example */@theme { --color-primary: #2563eb; --color-ink: #0b0b0b; --font-sans: "Inter", sans-serif; --spacing: 4px; --radius-md: 8px;}Veus com està feta la referència que et passa el client i t’emportes els seus tokens al teu projecte sense obrir DevTools.
Lliurable: el teu sistema de dissenyRevises el SEO on-page d’una URL en segons i compares la del teu client amb les tres primeres de Google.
Lliurable: auditoria on-pageLliures al client una taula amb la seva web davant de la competència, exportada amb un clic.
Lliurable: comparativa en CSV o MarkdownRessenyes
Últimes novetats
22 funcions gratis per sempre, més 7 funcions Pro en accés anticipat. Sense compte i sense límit de temps.
Gratis per a tothom fins al llançament de la Pro (data per definir)
El mode inspiració (textos i imatges com a marcadors en copiar) arriba gratis amb la primera Pro
Gratis
0 €, per sempre
Pro
49 €, pagament únic
Llista d’espera
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
Sí. Les funcions d’inspecció, SEO i captura són gratis per sempre. La Pro costa 49 € una sola vegada i inclou un any de novetats.
No. S’instal·la i funciona. No hi ha inici de sessió ni per a la versió gratuïta ni per a la Pro.
Tot es processa al teu navegador. Les pàgines que visites no s’envien a cap servidor i no s’injecten anuncis ni donatius a webs alienes. Si obres la pàgina en una auditoria externa (PageSpeed, isitagentready…), aquella web rep l’adreça, només quan hi cliques.
No dona volums de paraules clau ni enllaços entrants i no descarrega fonts de pagament: et mostra la llicència i on aconseguir-les.
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.
Sí. Llegeix la pàgina tal com ja l’ha pintada el navegador, així que no importa com estigui construïda.
Galetes
Fem servir Google Analytics per saber quanta gent visita la web i quines pàgines funcionen, només si ho acceptes. No hi ha publicitat. Política de galetes.