Vai al contenuto
Pickode
EN – English
Pickode
ExportFree + Pro

Copia qualsiasi sezione di un sito in codice pulito e modificabile.

Seleziona una sezione su qualsiasi sito ed esportala in React, HTML + CSS, Tailwind, Vue, Astro, Bricks o Elementor. Pickode legge i fogli di stile originali: il codice è corto, leggibile e tiene ogni breakpoint e stato hover.

Aggiungi a Chrome, è gratisVedi i prezzi

Gratis per sempre · prova Pro di 7 giorni senza carta · Chrome, Edge, Brave, Opera, Arc, Comet, Firefox

Finestra di export di Pickode con le schede React, HTML, Tailwind, Vue, Astro, Bricks ed Elementor

In breve

Per copiare il codice di un sito con Pickode apri l'inspector, fai clic su una sezione o un componente e scegli il formato: React (JSX + CSS), HTML + CSS, HTML + Tailwind, React + Tailwind, Vue SFC, componente Astro o progetto Astro pronto, Bricks o Elementor. Pickode è un'estensione del browser che trasforma un sito in codice usando solo il CSS scritto davvero dall'autore, non i valori calcolati dal browser. Copi una sezione alla volta, pronta per il tuo framework o builder, non il clone di un sito intero.

Come funziona

Da sito a codice in tre passi.

  1. Seleziona la sezione
    01

    Seleziona la sezione

    Apri l'inspector con Alt+I su qualsiasi sito e fai clic sulla sezione o sul componente che ti serve.

  2. Scegli il formato
    02

    Scegli il formato

    Scegli React, HTML, Tailwind, Vue, Astro, Bricks o Elementor nella finestra di export e controlla l'anteprima isolata a 375, 768, 1024 e 1280 px.

  3. Copia o scarica
    03

    Copia o scarica

    Copia il codice, scarica i file o lo ZIP del progetto Astro, oppure incolla direttamente nel tuo builder.

Cosa ottieni

Una sezione, tutti i formati con cui lavori.

  • Solo il CSS scritto dall'autore

    Niente valori calcolati, niente stili predefiniti del browser, niente reset universali. Ogni @media, @supports, @container, :hover, :focus e ::before/::after resta com'è scritto.

  • React, Tailwind, Vue e Astro

    Da HTML a React con classi BEM, da HTML a Tailwind con valori arbitrari (min-[]:/max-[]:, hover:, !), Vue SFC con stili scoped, componenti Astro o un progetto completo.

  • Bricks ed Elementor nativi

    Incolla in Bricks con ⌘V o importa un modello Elementor. Ottieni elementi e widget nativi e modificabili, non un unico blocco HTML bloccato.

  • Copia per AI

    Dai a Claude, ChatGPT, Cursor o v0 un testo con il codice del componente, i breakpoint, gli stati, i design token e le risorse.

  • I design token del sito

    Estrai colori, spaziature, scala tipografica, raggi e ombre come variabili CSS, Tailwind @theme, globals.css per shadcn o theme.json di WordPress.

  • Salva nella libreria

    Tieni componenti, token e palette nella libreria e sincronizzala con il tuo Google Drive.

Dettagli

I formati di export e cosa ottieni da ciascuno.

React
JSX + CSS con classi BEM, oppure React + Tailwind
HTML + CSS
HTML semplice con un foglio di stile fatto delle regole dell'autore, media query e stati compresi
Tailwind
HTML + Tailwind o React + Tailwind con valori arbitrari: media query → min-[]:/max-[]:, stati → hover:, !important → !
Vue
Single File Component con <style scoped>
Astro
Un componente .astro, oppure un progetto Astro pronto da avviare in uno ZIP
Builder WordPress
Bricks (JSON da incollare con ⌘V nell'editor) ed Elementor (modello JSON con contenitori e widget nativi)
Anteprima
Pagina isolata a 375, 768, 1024 e 1280 px, più 27 dispositivi con cornice
Free e Pro
HTML + CSS gratis 5 volte a settimana; tutti i formati illimitati con Pro (in Free gli altri formati mostrano un'anteprima parziale)

Domande

Domande su Da sito a codice.

Non trovi la risposta?

Leggi la documentazione o scrivici.

Leggi le docsContattaci

Cosa vuol dire "solo il CSS scritto"?

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.

Posso copiare una pagina intera o solo una sezione?

No. Pickode copia in codice una sezione o un componente alla volta. L'export della pagina intera con una panoramica del design è in roadmap.

Come gestisce breakpoint e hover il passaggio da HTML a Tailwind?

Le media query diventano varianti `min-[]:`/`max-[]:`, gli stati diventano `hover:` e simili e `!important` diventa `!`, con valori arbitrari presi dal CSS dell'autore.

L'export è gratis?

L'export HTML + CSS è gratis 5 volte a settimana. React, Tailwind, Vue, Astro, Bricks ed Elementor in Free mostrano un'anteprima parziale e con Pro sono illimitati; c'è una prova Pro di 7 giorni senza carta.

È legale copiare il codice di un sito?

Pickode serve a studiare, ispirarsi, analizzare e migrare siti su cui lavori. Rispetta diritti d'autore e licenze e non ripubblicare design, testi o immagini altrui senza permesso.

Come copio l'HTML e il CSS di una pagina o di una sezione?

Seleziona la sezione con l'inspector di Pickode (Alt+I) e scegli "Esporta come" HTML + CSS, senza aprire DevTools. Ottieni il markup con solo il CSS scritto dall'autore, comprese media query, stati hover e `::before`/`::after`, e un'anteprima isolata a 375, 768, 1024 e 1280 px.

Posso copiare una sezione così com'è, con CSS e JavaScript?

Il CSS sì: Pickode lo mantiene come l'ha scritto l'autore, con breakpoint, stati e variabili. Il JavaScript della pagina non viene esportato, quindi i comportamenti gestiti da script vanno aggiunti di nuovo nel tuo progetto.

Funziona su qualsiasi sito?

Sulla maggior parte delle pagine sì. Pickode non funziona sulle pagine `chrome://`, sul Chrome Web Store e sui PDF, e i fogli di stile non leggibili per via del CORS non vengono esportati.

Continua a esplorare

Tutto su Da sito a codice.

Tutte le funzioni

Smetti di ricostruire. Inizia a selezionare.

Installa Pickode, apri un sito qualsiasi e premi Alt+I.

Aggiungi a Chrome, è gratis

Gratis · prova Pro di 7 giorni · nessun account