Voglio creare wireframe di alta qualità in un istante.
Questa volta ho raccolto tutti questi prompt in un'unica guida.
Insegnare le regole dei wireframe a Claude ti farà risparmiare un sacco di tempo.
Indice
- Registrazione come regola "Skill"
- Prompt da copiare e incollare
- Spiegazione di ogni regola
- Per siti multi-pagina, usa Claude Code
Registrazione come regola "Skill"
Quando incolli il prompt, Claude preparerà un file per la skill. Una volta registrata, ti basterà dire "crea un wireframe" d'ora in poi.
- Passa il seguente "Prompt da copiare e incollare" a Claude e verrà creato un file ZIP.
- Premi il "Pulsante Salva" che appare nella chat.
Questo elimina la necessità di incollare il prompt ogni volta.
*La funzione Skill è disponibile nei piani a pagamento come Pro e Max.
Prompt da copiare e incollare
Incolla quanto segue nella chat di Claude per avviare la registrazione della Skill (registrazione per ricordare come regola).
Segui semplicemente le istruzioni nella chat e premi il pulsante ✔️ Salva.
Quello che segue è un prompt per wireframe. Per favore, trasformalo in una skill.
Crea un wireframe in HTML. Segui tutte le regole seguenti.
[Layout] ・Crea un layout facile da capire a colpo d'occhio, senza che sembri faticoso da leggere. ・Crea un layout sofisticato, urbano e minimalista. ・Utilizza bene l'intera pagina per margini ed equilibrio. ・Usa Noto Sans JP per il font e rendilo leggermente piccolo.
[Design] ・Usa solo i colori "bianco, nero e grigio". ・Mantieni lo sfondo principalmente bianco. Non creare pagine completamente nere. ・Non usare inglese non necessario, linee, ombre o altre decorazioni. ・Usa caselle grigie per le parti in cui sono necessari diagrammi o immagini. ・Usa la versione gratuita di "Font Awesome" per le icone.
[Scrittura] ・Mantieni ogni frase abbastanza breve. Usa una virgola almeno una volta per frase. ・Separa i paragrafi ogni 1-2 frasi. ・Usa Hiragana per i Kanji dove sembra naturale (es., cambia 行う in おこなう). ・Usa le parentesi 「」 per nomi o dialoghi che vuoi enfatizzare. ・Correggi eventuali errori di battitura o caratteri omessi e uniforma il tono a un registro cortese (Desu/Masu).
Spiegazione di ogni regola
Per chi vuole conoscere nel dettaglio le regole.
1. Layout e Design
Un "layout facile da capire" organizza la priorità delle informazioni. Limitando i colori a "bianco, nero e grigio", il design non sfugge di mano.
https://x.com/hiroho150cm/status/2061576024878633393
2. Icone
Specificare "Font Awesome" per le icone migliora notevolmente l'aspetto.
https://x.com/hiroho150cm/status/2062376294688387540
3. Creare con HTML
Usare HTML rende la generazione e la modifica fluide.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. Scrittura
La leggibilità diventa così alta da poter usare il testo interno così com'è.
https://x.com/hiroho150cm/status/2063750350776287429
Per siti multi-pagina, usa Claude Code
Finora, questo riguardava le LP (pagine singole). Per i siti multi-pagina, cambiamo approccio.
Le anteprime della chat non gestiscono bene il passaggio tra più file HTML. Pertanto, usiamo "Claude Code".
Prepara una cartella sul desktop e gestisci tutto al suo interno. In questo modo, Claude Code può modificare correttamente più file HTML.
https://x.com/hiroho150cm/status/2065267853922898022
Condivido tecniche per risparmiare tempo nella produzione e direzione web usando Claude.
Continuerò a fornire informazioni utili, quindi seguimi se ti fa piacere.
