Skip to main content
affpapa.org
RU EN
skill CX Codex

wireframe-spec — Claude Code skill: what it does, how to install

Defines wireframe layout specifications, content priorities, and interaction notes. Useful when structuring an interface before moving into visual UI design.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a claude-code
Open on GitHub

What wireframe-spec does

The skill creates layout specifications before any visual styling begins. It details content blocks like navigation bars, hero sections, media cards, forms, and footers. Each section gets assigned a loading priority, approximate character counts, image aspect ratios, and content sources such as a CMS or an API.

Specifications explicitly capture interface states: empty, loading, populated, and error. Visual styling is excluded — conventions restrict layouts to grayscale without color accents. The skill does not calculate layout grids. For column mechanics, the author directs users to layout-grid.

What it helps with

  • specify wireframe layout hierarchy before visual styling
  • define content priorities and character count requirements
  • document interaction notes for hover and click events
  • outline interface states for loading, errors, and empty views

Example prompts for the agent

  • Create a wireframe-spec for the checkout page including error states
  • Specify the user profile layout with content priorities and interaction notes
  • Prepare an annotated dashboard specification across desktop and mobile breakpoints

How to install wireframe-spec

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a claude-code

2Manually: put the files in place

~/.claude/skills/wireframe-spec/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/wireframe-spec/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about wireframe-spec

How do I install wireframe-spec in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a claude-code in your terminal.

What does the wireframe-spec skill do?

It generates annotated wireframe specifications defining component hierarchy, interaction behaviors, and responsive breakpoint requirements.

Does wireframe-spec handle layout grids?

No, the skill focuses strictly on content hierarchy and layout structure. For grid mechanics and columns, use the layout-grid skill.

Source text

SKILL.md · MIT 
---
name: wireframe-spec
description: Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).
---
# Wireframe Spec
You are an expert in creating annotated wireframe specifications.
## What You Do
You specify wireframe layouts defining content priority, component placement, behavior annotations, and responsive considerations.
## Wireframe Components
### Content Blocks
- Headers and navigation
- Hero/feature areas
- Content sections (text, media, cards)
- Forms and input areas
- Footers and secondary navigation
### Annotations
- Content priority numbers (what loads/appears first)
- Interaction notes (what happens on click/hover)
- Dynamic content indicators (personalized, data-driven)
- Responsive behavior notes
- Accessibility notes
### Content Specifications
- Heading hierarchy (H1, H2, H3)
- Approximate text length/character counts
- Image aspect ratios and sizing
- Required vs optional content
- Content source (static, CMS, API)
## Fidelity Levels
- **Sketch**: Hand-drawn boxes and labels
- **Low-fi**: Gray boxes with content labels
- **Mid-fi**: Realistic layout with placeholder content
- **Annotated**: Mid-fi plus detailed behavior specs
## Wireframe Conventions
- Use gray/black/white only (no color decisions)
- X-box for images
- Wavy lines for text blocks
- Real labels for navigation and buttons
- Consistent component representation
## Best Practices
- Focus on content hierarchy, not visual design
- Annotate behavior, not just layout
- Show multiple states (empty, loading, populated, error)
- Include responsive breakpoint versions
- Get content strategy input early

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →
wireframe ghaida Designs what sits on a screen, where it goes and what matters most. Useful while layout is still cheap to change. CX Codex +1 2,300installs html-wireframe plannotator Builds low-fidelity, self-contained HTML wireframes so you can test information hierarchy, navigation and task flow before any visual design happens. CX Codex +1 1,800installs wireframe-prototyping aj-geddes Sketch a UI and build a prototype before development starts. Useful when you need early feedback from a team or a client. CX Codex +1 1,400installs technical-wireframe-info-layout MengTo Defines a monochrome design system with exploded wireframe 3D objects, connector lines, and dark diagnostic info layouts. CX Codex +1 1,400installs baoyu-design JimLiu Generates UI mockups, interactive prototypes, slide decks, and design systems as self-contained HTML. Useful whenever an agent needs to produce interface layouts. CX Codex +1 6,300installs prototype plugin87 Guides interface design across a five-tier fidelity ladder from content to code. It helps map user flows, build wireframes, and draft usability test plans. CX Codex +1 484installs

From the same set109

design-critique The skill runs a team design critique: session framing, feedback rules, and action items with owners. Built for sessions with people in the room. CX Codex +1 2,200installs state-machine Models UI component behavior as explicit states, events, and transitions. Useful when a component has multiple interacting states that must remain predictable. CX Codex +1 2,200installs design-token-audit Finds where a product bypasses its design tokens: hard-coded values, duplicate names, missing scale steps. CX Codex +1 2,200installs animation-principles A skill that tunes one specific UI animation: picks easing, duration and the order in which related elements move. CX Codex +1 2,200installs micro-interaction-spec Specifies one micro-interaction end to end: trigger, rules, feedback, loops and modes. Useful when a single interaction goes to engineering. CX Codex +1 2,300installs accessibility-test-plan Plans accessibility testing sessions with assistive technology and real users. Useful when preparing user flows for WCAG compliance. CX Codex +1 2,100installs interview-script Creates a structured user interview guide with open questions and facilitator notes. Use it before qualitative research interviews. CX Codex +1 2,100installs design-rationale Writes a design rationale that ties a decision to user needs, business goals and principles. Useful before a review or a handoff. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor