building-wireframes
Scannednpx machina-cli add skill baslie/claude-best-practices/building-wireframes --openclawWireframe Builder
Generate lo-fi wireframes as single HTML files using Tailwind CSS with a grayscale wire-* palette.
Philosophy: You Are an Artist
You are not an assembler copying pre-made blocks. You are a designer creating unique visual compositions.
Each wireframe is a blank canvas. The user's request is your inspiration, not a specification to match mechanically. Your goal is to craft something that feels right for the specific problem — not to follow a template.
Core beliefs:
- There is no "correct" page structure — only what serves the user's intent
- Every wireframe should be unique, even for similar requests
- Whitespace is a powerful design tool, not empty space to fill
- Asymmetry can be more interesting than perfect grids
- Unconventional layouts are welcome when they serve clarity
- Less is often more — restraint creates focus
Creative Process
- Understand the essence — What is the user really trying to communicate?
- Visualize freely — Imagine the page as a composition, not a list of components
- Experiment with layout — Try unusual arrangements, unexpected proportions
- Apply the wire- palette* — Work within the grayscale constraint
- Create something unique — The result should feel crafted, not assembled
Technical Foundation
HTML Template
Start with assets/template.html — it provides:
- Tailwind CSS with
wire-*color tokens - Alpine.js for interactivity when needed
- Base styles and responsive meta tags
Note: Keep only the <head> section and start with an empty <body>. The demo content in template.html is just an example of the wire-* palette in action.
Design Tokens
See components.md for the full wire-* color palette.
Interactivity
- CSS-only (preferred): hover, focus, transitions,
<details>accordion - Alpine.js: modals, dropdowns, tabs → See interactive.md
Responsive Design
- Mobile-first: start with single column
- Use
md:breakpoint for tablet/desktop - Grid:
grid md:grid-cols-2 lg:grid-cols-3 gap-6 - Hide on mobile:
hidden md:flex - Show on mobile:
md:hidden
Creative Freedom
Encouraged:
- Unusual grid proportions (70/30, 40/60, single wide column)
- Generous whitespace and breathing room
- Asymmetric layouts when they create visual interest
- Breaking conventional section order
- Minimalist approaches — only what's essential
- Creative use of borders, spacing, and visual rhythm
- Typography hierarchy as the primary visual tool
Remember:
- References in
references/are optional inspiration, not required components - You can invent new patterns that don't exist in the references
- Modify any pattern freely — they're starting points, not constraints
- The best wireframe is one that solves the specific problem elegantly
Reference Library
| Category | File | Contains |
|---|---|---|
| Tokens | components.md | Design tokens, color palette, overview |
| Layout | navigation.md | Header, sidebar, footer, breadcrumbs |
| Content | content.md | Hero, cards, testimonials, pricing |
| Forms | forms.md | Inputs, buttons, complete forms |
| Data | tables.md | Tables, pagination |
| Interactive | interactive.md | Modal, dropdown, tabs (Alpine.js) |
| Mobile | mobile.md | Bottom nav, mobile cards |
| States | states.md | Loading, empty, progress |
Use as inspiration. Modify freely or create new patterns.
Context Analysis
Understanding the Request
- Read user's prompt or document completely
- Extract the intent, not just the literal requirements
- Identify the emotional tone: professional, playful, minimal, rich?
- Consider the target audience
Minimal Questions
Only ask when genuinely ambiguous:
- "Should I include [element] mentioned in the doc?"
- "The document describes two flows. Which is primary?"
Never ask about categories, styles, or structural choices — make creative decisions.
File Naming & Storage
Output Directory
All wireframes save to wireframes/ in project root.
Naming Convention
Generate kebab-case names from content (2-4 words):
- User profile page →
user-profile.html - Product checkout →
checkout-flow.html - Admin user list →
admin-users.html
Confirmation Flow
Suggest a name before saving:
"I'll save this as
wireframes/user-profile.html. Is this name okay?"
Example
User request: "Create a simple landing page for a productivity app"
Claude creates: wireframes/productivity-landing.html with:
- Sticky header with logo and CTA
- Hero section with headline and app screenshot placeholder
- 3-column features grid
- Testimonial card
- CTA section
- Simple footer
Your Task
$ARGUMENTS
Source
git clone https://github.com/baslie/claude-best-practices/blob/main/skills/building-wireframes/SKILL.mdView on GitHub Overview
Generates lo-fi wireframes as a single HTML file using Tailwind CSS and the wire-* grayscale palette. It emphasizes unique, composition-first sketches rather than templated blocks, helping you visualize layouts for landing pages, dashboards, forms, admin panels, and mobile screens.
How This Skill Works
Start from assets/template.html, which bundles Tailwind with wire-* tokens and optional Alpine.js for interactivity. Keep only the <head> section and an empty <body>, then craft layouts using a mobile-first grid (grid md:grid-cols-2 etc.) and whitespace-driven composition. Interactivity should be CSS-only when possible; use Alpine.js for modals, dropdowns, and tabs as needed.
When to Use It
- You need a lo-fi wireframe for a landing page or marketing page.
- Prototype a dashboard or admin panel layout.
- Sketch a mobile app screen or onboarding flow.
- Prototype a form-heavy page (sign-up, login, checkout).
- Visualize layout from a PRD or product brief to validate structure.
Quick Start
- Step 1: Copy assets/template.html as the base and start a new HTML file, keeping only the <head> and an empty <body>.
- Step 2: Build your layout using a mobile-first grid and the wire-* palette tokens (e.g., grid md:grid-cols-2).
- Step 3: Preview, iterate on whitespace, proportions, and typography; save as a single HTML file.
Best Practices
- Start from the user's essence and craft a unique composition, not a template.
- Work within the wire-* grayscale palette and keep color minimal.
- Embrace whitespace, asymmetry, and unconventional layouts for clarity.
- Experiment with grid proportions (e.g., 70/30, 40/60) and single wide columns when needed.
- Prefer CSS-only interactions; reserve Alpine.js for modals, dropdowns, and tabs.
Example Use Cases
- Landing page wireframe with hero, features, and CTA in grayscale.
- Admin dashboard layout with sidebar, header, and card grid.
- Signup/login form screen with progressive disclosure hints.
- Mobile onboarding flow with step indicators and skip option.
- Product detail page layout demonstrating information hierarchy.
