Un sito web personale è il miglior progetto per iniziare con Codex

Nell'era dell'AI, un sito web personale è il miglior curriculum.

Ieri ho pubblicato una demo del mio sito web personale, che ha ricevuto quasi 100.000 visualizzazioni in tutta la rete. Molti amici mi hanno scritto in privato chiedendo informazioni sul metodo di realizzazione.

https://x.com/Saccc_c/status/2071508004772475209

Grazie a tutti per l'affetto, vi spiegherò in dettaglio come usare Codex per creare un sito web personale con il vostro stile in 2 ore.

Passaggi generali: Organizzare i documenti dei contenuti del sito — Usare la taste skill per generare immagini di riferimento per la pagina web — Generare immagini dei materiali separatamente — Usare la skill Frontend App Builder per replicare le pagine web

(I passaggi dettagliati seguono)

Step 1: Usa Codex per organizzare documenti dettagliati sui contenuti del sito

Esponi in dettaglio le tue informazioni personali e i contenuti che il sito deve comunicare a Codex, e lascia che organizzi un documento strutturato dettagliato.

Il mio documento include all'incirca quanto segue:

• Informazioni personali e posizionamento dell'immagine di Sac
• Numero di pagine, struttura e stile
• Direzione di design complessiva e layout

Piccolo consiglio: puoi usare un plugin di Chrome per far sì che Codex visualizzi i tuoi social media per aiutarti a integrare le informazioni

Step 2: Usa la taste skill per generare immagini di riferimento di alta qualità per le pagine web

Usa la skill imagegen-frontend-web nella taste skill, combinata con il documento dei contenuti del sito, per generare immagini di riferimento dettagliate per ogni pagina.

Indirizzo GitHub: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md

Questo è il mio prompt:

L'effetto dell'immagine di riferimento risultante è il seguente:

Nota: la skill imagegen-frontend-web nella taste skill permette a Codex di avere un maggiore senso estetico durante la generazione delle immagini, e lo schermo avrà un aspetto più progettuale.

Step 3: Analizza e scomponi la struttura dell'immagine di riferimento e genera immagini per i materiali chiave separatamente

Dopo aver ottenuto l'immagine di riferimento completa, i materiali chiave per ogni pagina web devono essere generati separatamente. Possiamo inserire direttamente nella finestra di dialogo:

1Questa è l'immagine di riferimento della pagina web che ho generato finora. Per favore, analizza la loro struttura pagina per pagina e aiutami a valutare:
21. Quali parti possono essere implementate con il codice
32. Quali elementi visivi chiave devono generare materiali separatamente
4Non iniziare ancora a scrivere codice, dammi prima un suggerimento per la scomposizione dei materiali.

Poi usa ImageGen per generare immagini dei materiali chiave per garantire coerenza con i dettagli nelle immagini di riferimento.

Per esempio, il materiale dell'avatar nel mio sito web personale:

Step 4: Usa la skill Frontend App Builder integrata di Codex per replicare l'immagine di riferimento della pagina web in una pagina web reale

Invia le immagini di riferimento e le immagini dei materiali determinate in precedenza a Codex per la replica della pagina web.

Qui viene usata la skill Frontend App Builder nel plugin Build Web Apps. Tratta l'immagine di riferimento come un bozzetto di design e esegue un restauro ad alta fedeltà secondo una serie di processi strutturati.

Prompt di riferimento per replicare la pagina web:

L'effetto di replica è il seguente: