Seleziona una sezione su qualsiasi pagina ed esportala in React, Tailwind, Vue, Astro, Bricks o Elementor, con il solo CSS scritto dal suo autore. Poi analizza il sito e manda un report al cliente.
Gratis per sempre. Prova Pro di 7 giorni senza carta.
Chrome, Edge, Brave, Opera, Arc, Comet e Firefox
Pensato per web designer, sviluppatori front-end, freelance e agenzie, in particolare se lavori con WordPress, Bricks ed Elementor.
Tour del prodotto
Inspector, export, colori, asset, performance e accessibilità su un sito vero, dal primo clic al report per il cliente.
Video in inglese, solo musica.
Perché il codice è corto
DevTools: stili calcolati
32 righe+Ogni proprietà risolta in pixel, media query sparite.
Pickode: CSS scritto
11 righe
.card {
display: grid; gap: 16px;
padding: 24px; border-radius: 20px;
background: var(--paper);
transition: transform .4s;
}
.card:hover { transform: translateY(-4px); }
.card:hover .card__title { color: var(--ink); }
@media (min-width: 768px) {
.card { grid-template-columns: 1fr 1fr; }
}I valori veri, i breakpoint, gli stati hover e le variabili.
Come funziona
Apri Pickode su qualsiasi pagina (Alt+I) e scegli una sezione con l'inspector.
Scegli React, Tailwind, Vue, Astro, Bricks o Elementor. Solo il CSS scritto dall'autore.
Premi ⌘V in Bricks o importa il modello in Elementor: ottieni elementi nativi e modificabili (titoli, testi, immagini, pulsanti, icone) con gli stili nei controlli di ciascun builder. Oppure porta il codice nel tuo progetto o nella tua AI.
Il testo prende i font del sito in cui incolli. Elementor richiede i Contenitori Flexbox (attivi di default).
Registrazione reale di Pickode su un sito demo, divisa nei tre passi.
Analisi e report
WordPress, velocità, accessibilità e ricerca con AI in un solo passaggio, poi un report che il cliente capisce.
Un file HTML con screenshot, punteggi, interventi in ordine di priorità, SEO, velocità, accessibilità e tecnologie. Con la tua intestazione e i tuoi colori, in italiano o inglese, stampabile in PDF.
Esempio di impaginazione
Controlla cosa possono leggere ChatGPT, Claude e Perplexity: regole di robots.txt per ogni crawler AI, llms.txt, sitemap, dati strutturati e testo generato dal server. Genera le regole per robots.txt e una bozza di llms.txt.
Il punteggio è un'indicazione, non una promessa di citazioni.
Versione di WP, tema e child theme, plugin con versione, builder (Bricks, Elementor, Divi, Oxygen, Breakdance, Gutenberg), tipo di pagina WooCommerce, tipo di checkout, prodotti e valuta, header di cache, namespace REST, controlli di sicurezza di base.
Scopri di più: WordPress e WooCommerce
LCP, CLS, INP, FCP, TTFB, elemento LCP e fetchpriority, peso per tipo, risorse bloccanti, immagini sovradimensionate, in formato vecchio o senza lazy, terze parti, long task.
Scopri di più: Performance
Audit WCAG 2.2 AA con axe-core e nodi evidenziati, più una mappa del contrasto che segna ogni testo che non passa e suggerisce il colore più vicino che passa.
Scopri di più: AccessibilitàCopia per AI
Un clic copia un testo per Claude, ChatGPT, Cursor o v0: il codice del componente, la struttura, i breakpoint e gli stati, i design token del sito e le risorse usate. Solo dati trovati nella pagina, nessuna regola inventata.
# Rebuild this section
Recreate it in React + Tailwind. Keep breakpoints and states.
## Section
Type: pricing card (estimated)
## Layout
- grid, 3 columns → 1 column below 768px
## States
- `:hover`, `:focus-visible`
## Design tokens
- `--color-primary`: #715aff
- `--radius-card`: 16px
## Code
```jsxIncollalo inClaudeChatGPTCursorv0
Design token
Esporta comeCSS variablesTailwind v4 @themetailwind.config.jsglobals.css (shadcn)WordPress theme.jsonJSON
Scopri di più: Design tokenTutto il resto che ti serve
I piccoli strumenti che apri ogni giorno, nello stesso pannello, con le stesse scorciatoie.
Box model, font, colori e contrasto WCAG; modifica live delle proprietà.
Tieni premuto Alt sopra un elemento per vedere le distanze in px.
Colonne, gutter e baseline, con preset Bootstrap, Tailwind e Bricks.
CSS salvato per dominio e riapplicato a ogni visita.
Colori di testi, sfondi e bordi in HEX, RGB e HSL.
Famiglie, pesi, dimensioni e regole @font-face caricate.
Area visibile, pagina intera, area o elemento, con frecce, testo e pixelatura.
27 dispositivi con cornici, rotazione, scroll sincronizzato e replay.
Immagini, SVG, font, video, Lottie e stream HLS/DASH, in uno ZIP ordinato per cartelle.
Cancella cookie, storage e cache del solo sito aperto, poi ricarica senza cache.
Ricodifica in WebP o AVIF alla dimensione davvero mostrata e scarica uno ZIP.
Componenti, token e palette salvati, sincronizzati in una cartella Pickode del tuo Google Drive.
Privacy
Ispezione, export e analisi avvengono nel browser. Non raccogliamo dati di navigazione.
La libreria si sincronizza direttamente nel tuo Google Drive, e Pickode vede solo i file che ha creato.
L'unica cosa che esce è la license key, inviata al nostro fornitore di pagamenti per verificarla.
Prezzi
Per ispezionare, analizzare e qualche export ogni tanto.
€0per sempre
Aggiungi a ChromeTutti i formati di export, i builder, i report e gli strumenti per i media.
€6/mese
Fatturato ogni mese, disdici quando vuoi
€39/anno
≈ €3,25/mese, fatturato ogni anno
Prezzo di lancio:€59Prezzo pieno:€79 · una tantum
Prezzo di lancio per i primi 300 acquirenti, poi €79
3 browser per licenza
Tutto quello che c'è in Free, più:
Per le agenzie: 5 persone × 3 browser ciascuna.
€149/anno
€149/anno o €299 una tantum
Scegli TeamTutto quello che c'è in Pro, più:
Domande
Sì. La versione gratuita include inspector, colori, font, SEO, tech stack, screenshot, mappa contrasto, design token in ogni formato e alcuni export HTML a settimana. Pro sblocca tutti i formati, i builder, i report e gli strumenti per i media.
Pickode legge i fogli di stile originali invece dei valori calcolati dal browser: ottieni valori, media query e stati hover reali, non centinaia di pixel risolti.
Sì. Servono i Contenitori Flexbox, attivi di default nelle versioni recenti.
“Copia per Bricks” in Pickode, poi in Bricks seleziona un elemento o la canvas e premi ⌘V (Ctrl+V).
Chrome, Edge, Brave, Opera, Arc, Comet (Chromium) e Firefox 140+. Il Side Panel c'è dove il browser lo supporta.
No. Tutto avviene nel browser. Solo la license key viene inviata al fornitore dei pagamenti per verificarla.
Pickode serve a studiare, ispirarsi, analizzare e migrare siti su cui lavori. Rispetta diritti d'autore e licenze: non ripubblicare design, testi o immagini altrui senza permesso.
Solo stream HLS/DASH non protetti che hai il diritto di salvare. Video con DRM, stream cifrati, dirette e YouTube non sono supportati.
Installa Pickode, apri un sito qualsiasi e premi Alt+I.
Gratis · prova Pro di 7 giorni · nessun account
