Ich möchte im Handumdrehen hochwertige Wireframes erstellen.
Ich habe diesmal solche Prompts in einem Leitfaden zusammengestellt.
Wenn du Claude die Wireframe-Regeln beibringst, sparst du eine Menge Zeit.
Inhaltsverzeichnis
- Registrierung als "Skill"-Regel
- Copy-Paste-Prompt
- Erklärung der einzelnen Regeln
- Für mehrseitige Websites Claude Code verwenden
Registrierung als "Skill"-Regel
Wenn du den Prompt einfügst, erstellt Claude eine Datei für den Skill. Nach der Registrierung kannst du einfach "Wireframe erstellen" sagen.
- Übergib den folgenden "Copy-Paste-Prompt" an Claude, und es wird eine ZIP-Datei erstellt.
- Drücke den "Speichern-Button", der im Chat angezeigt wird.
Dadurch entfällt das erneute Einfügen des Prompts jedes Mal.
*Die Skill-Funktion ist in kostenpflichtigen Tarifen wie Pro und Max verfügbar.
Copy-Paste-Prompt
Füge Folgendes in den Claude-Chat ein, um mit der Skill-Registrierung (Registrierung zum Merken als Regel) zu beginnen.
Befolge einfach die Chat-Anweisungen und drücke den ✔️ Speichern-Button.
Das Folgende ist ein Wireframe-Prompt. Bitte mache daraus einen Skill.
Erstelle ein Wireframe in HTML. Bitte befolge alle folgenden Regeln.
[Layout] ・Erstelle ein Layout, das auf einen Blick verständlich ist, ohne dass es sich wie eine Last anfühlt. ・Erstelle ein anspruchsvolles, urbanes und minimalistisches Layout. ・Nutze die gesamte Seite gut für Ränder und Ausgewogenheit. ・Verwende Noto Sans JP für die Schriftart und mache sie etwas klein.
[Design] ・Verwende nur "Weiß, Schwarz und Grau" für Farben. ・Halte den Hintergrund grundsätzlich weiß. Erstelle keine komplett schwarzen Seiten. ・Verwende kein unnötiges Englisch, keine Linien, Schatten oder andere Verzierungen. ・Verwende graue Boxen für Bereiche, in denen Diagramme oder Bilder benötigt werden. ・Verwende die kostenlose Version von "Font Awesome" für Symbole.
[Schreibstil] ・Halte jeden Satz einigermaßen kurz. Verwende mindestens einmal pro Satz ein Komma. ・Trenne Absätze alle 1-2 Sätze. ・Verwende Hiragana für Kanji, wo es natürlich wirkt (z. B. ändere 行う zu おこなう). ・Verwende Klammern 「」 für Namen oder Dialoge, die du hervorheben möchtest. ・Korrigiere alle Tippfehler oder fehlenden Zeichen und vereinheitliche den Ton zu höflich (Desu/Masu).
Erklärung der einzelnen Regeln
Für diejenigen, die die Aufschlüsselung der Regeln kennen möchten.
1. Layout und Design
Ein "leicht verständliches Layout" organisiert die Priorität der Informationen. Indem die Farben auf "Weiß, Schwarz und Grau" beschränkt werden, gerät das Design nicht außer Kontrolle.
https://x.com/hiroho150cm/status/2061576024878633393
2. Symbole
Die Angabe von "Font Awesome" für Symbole verbessert das Erscheinungsbild erheblich.
https://x.com/hiroho150cm/status/2062376294688387540
3. Erstellung mit HTML
Die Verwendung von HTML macht die Generierung und Bearbeitung reibungslos.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. Schreibstil
Die Lesbarkeit wird so hoch, dass du den internen Text direkt verwenden kannst.
https://x.com/hiroho150cm/status/2063750350776287429
Für mehrseitige Websites Claude Code verwenden
Bisher ging es um LPs (Einzelseiten). Bei mehrseitigen Websites ändern wir den Ansatz.
Chat-Vorschauen kommen mit dem Wechsel zwischen mehreren HTML-Dateien nicht gut zurecht. Daher verwenden wir "Claude Code."
Bereite einen Ordner auf deinem Desktop vor und verwalte alles darin. Auf diese Weise kann Claude Code mehrere HTML-Dateien ordnungsgemäß bearbeiten.
https://x.com/hiroho150cm/status/2065267853922898022
Ich teile zeitsparende Techniken für die Webproduktion und -regie mit Claude.
Ich werde weiterhin nützliche Informationen liefern, also folge mir bitte, wenn dir gefällt, was ich mache.
