I want to create high-quality wireframes in an instant.
I have compiled such prompts into one guide this time.
Teaching Claude wireframe rules will save you a significant amount of time.
Table of Contents
- Registering as a "Skill" rule
- Copy-paste prompt
- Explanation of each rule
- For multi-page sites, use Claude Code
Registering as a "Skill" rule
When you paste the prompt, Claude will prepare a file for the skill. Once registered, you can just say "create a wireframe" from then on.
- Pass the following "Copy-paste prompt" to Claude, and a ZIP file will be created.
- Press the "Save button" displayed in the chat.
This eliminates the need to paste the prompt every time.
*The Skill feature is available in paid plans such as Pro and Max.
Copy-paste prompt
Paste the following into the Claude chat to begin Skill registration (registration to remember as a rule).
Just follow the chat instructions and press the ✔️ Save button.
The following is a wireframe prompt. Please turn this into a skill.
Create a wireframe in HTML. Please follow all of the rules below.
[Layout] ・Create a layout that is easy to understand at a glance without feeling like a burden to read. ・Create a sophisticated, urban, and minimalist layout. ・Utilize the entire page well for margins and balance. ・Use Noto Sans JP for the font, and make it slightly small.
[Design] ・Use only "white, black, and gray" for colors. ・Keep the background basically white. Do not create pages that are entirely black. ・Do not use any unnecessary English, lines, shadows, or other decorations. ・Use gray boxes for parts where diagrams or images are needed. ・Use the free version of "Font Awesome" for icons.
[Writing] ・Keep each sentence somewhat short. Use a comma at least once per sentence. ・Separate paragraphs every 1-2 sentences. ・Use Hiragana for Kanji where it feels natural (e.g., change 行う to おこなう). ・Use brackets 「」 for names or dialogue you want to emphasize. ・Correct any typos or omitted characters and unify the tone to polite (Desu/Masu).
Explanation of each rule
For those who want to know the breakdown of the rules.
1. Layout and Design
An "easy-to-understand layout" organizes the priority of information. By limiting colors to "white, black, and gray," the design won't go out of control.
https://x.com/hiroho150cm/status/2061576024878633393
2. Icons
Specifying "Font Awesome" for icons significantly improves the appearance.
https://x.com/hiroho150cm/status/2062376294688387540
3. Creating with HTML
Using HTML makes generation and modification smooth.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. Writing
The readability becomes high enough that you can use the internal text as is.
https://x.com/hiroho150cm/status/2063750350776287429
For multi-page sites, use Claude Code
So far, this has been about LPs (single pages). For multi-page sites, we change the approach.
Chat previews don't handle switching between multiple HTML files well. Therefore, we use "Claude Code."
Prepare a folder on your desktop and manage everything inside it. That way, Claude Code can properly edit multiple HTML files.
https://x.com/hiroho150cm/status/2065267853922898022
I share time-saving techniques for web production and direction using Claude.
I will continue to deliver useful information, so please follow me if you like.
