Je veux créer des wireframes de haute qualité en un instant.
J'ai rassemblé ces prompts dans un seul guide cette fois.
Enseigner les règles des wireframes à Claude vous fera gagner un temps considérable.
Table des matières
- Enregistrement en tant que règle "Compétence"
- Prompt à copier-coller
- Explication de chaque règle
- Pour les sites multi-pages, utilisez Claude Code
Enregistrement en tant que règle "Compétence"
Lorsque vous collez le prompt, Claude préparera un fichier pour la compétence. Une fois enregistrée, vous pourrez simplement dire "crée un wireframe" par la suite.
- Transmettez le "Prompt à copier-coller" suivant à Claude, et un fichier ZIP sera créé.
- Appuyez sur le "Bouton Enregistrer" affiché dans le chat.
Cela élimine le besoin de coller le prompt à chaque fois.
*La fonctionnalité Compétence est disponible dans les formules payantes telles que Pro et Max.
Prompt à copier-coller
Collez ce qui suit dans le chat Claude pour commencer l'enregistrement de la compétence (enregistrement pour mémoriser en tant que règle) .
Suivez simplement les instructions du chat et appuyez sur le ✔️ Bouton Enregistrer.
Ce qui suit est un prompt de wireframe. Veuillez en faire une compétence.
Créez un wireframe en HTML. Veuillez suivre toutes les règles ci-dessous.
[Mise en page] ・Créez une mise en page facile à comprendre d'un coup d'œil, sans donner l'impression d'être une corvée à lire. ・Créez une mise en page sophistiquée, urbaine et minimaliste. ・Utilisez bien toute la page pour les marges et l'équilibre. ・Utilisez la police Noto Sans JP et faites-la légèrement petite.
[Design] ・Utilisez uniquement les couleurs "blanc, noir et gris". ・Gardez l'arrière-plan principalement blanc. Ne créez pas de pages entièrement noires. ・N'utilisez aucun mot anglais inutile, ligne, ombre ou autre décoration. ・Utilisez des boîtes grises pour les parties où des diagrammes ou des images sont nécessaires. ・Utilisez la version gratuite de "Font Awesome" pour les icônes.
[Rédaction] ・Gardez chaque phrase relativement courte. Utilisez une virgule au moins une fois par phrase. ・Séparez les paragraphes toutes les 1 à 2 phrases. ・Utilisez les Hiragana pour les Kanji lorsque cela semble naturel (par exemple, changez 行う en おこなう). ・Utilisez les crochets 「」 pour les noms ou les dialogues que vous souhaitez souligner. ・Corrigez toute faute de frappe ou caractère omis et unifiez le ton à un registre poli (Desu/Masu).
Explication de chaque règle
Pour ceux qui veulent connaître le détail des règles.
1. Mise en page et Design
Une "mise en page facile à comprendre" organise la priorité des informations. En limitant les couleurs au "blanc, noir et gris", le design ne dérapera pas.
https://x.com/hiroho150cm/status/2061576024878633393
2. Icônes
Spécifier "Font Awesome" pour les icônes améliore considérablement l'apparence.
https://x.com/hiroho150cm/status/2062376294688387540
3. Création avec HTML
L'utilisation du HTML rend la génération et la modification fluides.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. Rédaction
La lisibilité devient suffisamment élevée pour que vous puissiez utiliser le texte interne tel quel.
https://x.com/hiroho150cm/status/2063750350776287429
Pour les sites multi-pages, utilisez Claude Code
Jusqu'à présent, cela concernait les pages d'atterrissage (pages uniques). Pour les sites multi-pages, nous changeons d'approche.
Les aperçus du chat ne gèrent pas bien le basculement entre plusieurs fichiers HTML. Par conséquent, nous utilisons "Claude Code".
Préparez un dossier sur votre bureau et gérez tout à l'intérieur. Ainsi, Claude Code peut modifier correctement plusieurs fichiers HTML.
https://x.com/hiroho150cm/status/2065267853922898022
Je partage des techniques pour gagner du temps dans la production et la direction web en utilisant Claude.
Je continuerai à fournir des informations utiles, alors suivez-moi si vous le souhaitez.
