Guide · Agent skill
How to use the Wireframe Sketch agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Wireframe Sketch is an agent skill that makes an AI agent produce a rough, hand-drawn style wireframe as a single web page instead of a finished design. It is useful for designers and product teams who want to talk about layout and structure before anyone commits to polished visuals. This guide explains what the skill does, how to install it, how to ask for a sketch, and where it falls short.
Wireframe Sketchnexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the wireframe-sketch ZIP from the item page. It contains SKILL.md and example.html.
- 2Unzip into a skills folder. Unzip into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 4Describe the screen. Write a plain request for the screen, including the number of variants you want.
- 5Use a trigger word. Include a term such as 'wireframe', 'lo-fi' or 'hand drawn' so the skill matches.
- 6Review the sketch. Open the generated HTML page and use the tabs, notes and placeholders to discuss layout.
What an agent skill is and what this one does
An agent skill is a folder containing a SKILL.md file that tells a compatible AI agent how to handle a certain kind of task. When the skill is installed and your request matches it, the agent follows the instructions in that file.
The wireframe-sketch skill targets requests for a wireframe, sketch, lo-fi mockup or whiteboard-style layout. The output is a single web page that looks like a pencil or marker drawing on graph paper. The source describes tab labels for alternative variants, sticky-note comments, hatched chart placeholders and KPI boxes.
- Graph-paper background, marker or pencil tones, dashed borders and slight rotations
- Tab labels for several screen variants, with one active
- Sticky-note annotations such as 'needs review'
- Hatched chart placeholders and KPI tiles
- Deliberately loose styling; it avoids pixel-perfect polish
Install the wireframe-sketch skill
You can install the skill in one of three ways. Download the ZIP from the item page, then choose the option that fits how you work.
For a personal setup, unzip the download into ~/.claude/skills/. For a single project, unzip it into the .claude/skills/ folder inside that project. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
The download contains two files: SKILL.md and example.html. The example file shows the kind of page the skill produces.
- Personal: unzip into ~/.claude/skills/
- Project: unzip into .claude/skills/ in your project folder
- Claude apps: upload the ZIP under Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. Describe the screen in plain language and use one of the trigger words the skill listens for, such as 'wireframe', 'sketch wireframe', 'hand drawn', 'lo-fi mockup', 'whiteboard sketch' or 'low fidelity'.
Naming the number of variants helps. The skill's own example asks for four tabbed variants, so a request with a clear count tends to match the layout the skill is designed around.
- Mention the screen or product, for example 'a portal' or 'a checkout flow'
- Use a trigger word such as 'lo-fi' or 'hand drawn'
- State the variant count and any headline or annotation you want
Example requests
The skill's own example prompt is a good template. Adjust the subject and the details to match your project.
- Sketch a hand-drawn wireframe v0.1 for a portal, four tabbed variants on graph paper, marker headlines, sticky-note annotations, hatched chart placeholders.
- Give me a low fidelity whiteboard layout for a settings page with three variants and notes on what needs review.
- Make a lo-fi mockup of a dashboard with KPI boxes and a bar chart placeholder, to discuss with stakeholders.
What the skill needs and how it behaves
The skill works within an agent that supports SKILL.md skills. The files do not name any additional software. When available, it loads the Google Fonts Caveat, Patrick Hand and Architects Daughter, so the page uses network access for those fonts.
The skill runs no scripts. It works from the instructions in SKILL.md and writes an HTML page. It deliberately ignores finished design guidance and only loosely follows type tokens, so brand fonts and exact styling will not carry through.
- Requires an agent that supports SKILL.md skills
- No scripts are run
- Uses network access to load Google Fonts when available
- Fonts fall back to italic serif if the Google Fonts load fails
Tips for useful sketches
Use the sketch to start a conversation, not to hand off to developers. Ask for several variants so stakeholders can compare structure rather than colour or polish.
If you later need production UI, use a different workflow. The skill is built to avoid polish, so it is a poor starting point for final interfaces.
- Ask for multiple variants and name the one you prefer
- Use sticky-note requests to flag open questions
- Treat the output as a discussion draft, not a spec
What people use it for
- Showing stakeholders four layout options for a portal before development starts
- Sketching a dashboard with KPI boxes and chart placeholders to test structure
- Flagging open questions on a screen with sticky-note annotations
- Producing a quick whiteboard-style concept for a design review
Frequently asked questions
How do I install the wireframe-sketch skill?
Download the ZIP from the item page and unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.
What do I need to run the wireframe-sketch skill?
You need an agent that supports SKILL.md skills. The files name no other required software. The skill loads Google Fonts when available, so it uses network access.
Is the wireframe-sketch skill free?
The item is listed under the Apache-2.0 licence. Check the licence file in the repository for the terms that apply to your use.
Does the skill run scripts on my computer?
No. The item notes that it runs no scripts. It uses network access only to load the Google Fonts Caveat, Patrick Hand and Architects Daughter.
Why doesn't the output look like a finished design?
The skill is designed to produce low-fidelity sketches. It deliberately avoids polish and ignores finished design guidance, so the page reads like a rough whiteboard drawing.
Can I use it to make production UI or match brand fonts?
No. The item says it is not for production-ready UI and only loosely honours type tokens, so brand fonts and exact styling will not be accurate.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use wireframe-sketch if you want quick, rough layout options to discuss with stakeholders before committing to visuals. Pick a different tool if you need production-ready UI or exact brand styling, since this skill is built to avoid both.
Download the skill