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

wireframe-prototyping — Claude Code skill: UI wireframes

Sketch a UI and build a prototype before development starts. Useful when you need early feedback from a team or a client.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add aj-geddes/useful-ai-prompts --skill wireframe-prototyping -a claude-code
Open on GitHub

What wireframe-prototyping does

The skill walks through three fidelity levels. Low fidelity means paper or whiteboard sketches, tools like Balsamiq, basic layout with no colors or fonts. Medium covers Figma, Sketch and Adobe XD: layout, content, simple interaction. High fidelity adds Figma, Framer and web dev tools for visual design, interactions and animations.

Reference guides live in the references/ directory: prototyping tools and techniques, wireframe examples, prototype testing. The best-practices section tells you to start low-fidelity, get feedback early, test with real users, document interaction flows and cover empty states and errors. It also lists what to avoid — jumping straight to high fidelity, over-designing before validation, testing only with teammates.

The skill suggests starting with sketches that take 30 minutes to 2 hours before opening Figma. If your team already has a locked design system and approved mockups, low-fidelity wireframes lose most of their value and turn into a formality.

What it helps with

  • validate a UI concept before writing code
  • align a team or client on a layout
  • run a usability test on an early prototype
  • hand off documented interaction flows to developers
  • map empty states and error screens in a mockup

Example prompts for the agent

  • Sketch a low-fidelity wireframe for the signup screen, layout blocks only
  • Build a medium-fidelity cart prototype in Figma and describe the transitions
  • Review this mockup for empty states and errors, add the missing screens

How to install wireframe-prototyping

1Skills CLI (Vercel)

npx skills add aj-geddes/useful-ai-prompts --skill wireframe-prototyping -a claude-code

2Manually: put the files in place

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

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

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

Questions about wireframe-prototyping

How do I install wireframe-prototyping in Claude?

Run npx skills add aj-geddes/useful-ai-prompts --skill wireframe-prototyping -a claude-code. The skill lands in ~/.claude/skills/wireframe-prototyping/SKILL.md.

What does wireframe-prototyping do?

It helps you build a UI wireframe and an interactive prototype so you can collect feedback before development. It ships reference guides on tools, wireframe examples and prototype testing.

How do the fidelity levels differ?

Low fidelity is sketches with no colors or fonts, medium adds content and simple interaction, high fidelity covers visual design and animations. The skill recommends starting low.

Source text

SKILL.md · MIT 
---
name: wireframe-prototyping
description: >
  Create wireframes and interactive prototypes to visualize user interfaces and
  gather feedback early. Use tools and techniques to communicate design ideas
  before development.
---

# Wireframe Prototyping

## Table of Contents

- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)

## Overview

Wireframes and prototypes bridge the gap between ideas and implementation, enabling teams to test concepts, get feedback, and refine designs before costly development.

## When to Use

- Early concept validation
- Stakeholder alignment
- User testing and feedback
- Developer handoff
- Feature exploration
- UX problem-solving
- Rapid iteration

## Quick Start

Minimal working example:

```yaml
Wireframe Principles:

Low Fidelity (Sketches):
  Tools: Paper, whiteboard, Balsamiq
  Time: 30 minutes - 2 hours
  Detail: Basic layout, no colors/fonts
  Best For: Brainstorming, exploration
  Cost: Free

Medium Fidelity:
  Tools: Figma, Sketch, Adobe XD
  Time: 2-8 hours
  Detail: Layout, content, basic interaction
  Best For: Team alignment, feedback
  Cost: Low

High Fidelity:
  Tools: Figma, Framer, web dev tools
  Time: 8+ hours
  Detail: Visual design, interactions, animations
  Best For: Developer handoff, user testing
  Cost: Medium

---
## Wireframe Components
// ... (see reference guides for full implementation)
```

## Reference Guides

Detailed implementations in the `references/` directory:

| Guide | Contents |
|---|---|
| [Prototyping Tools & Techniques](references/prototyping-tools-techniques.md) | Prototyping Tools & Techniques |
| [Wireframe Examples](references/wireframe-examples.md) | Wireframe Examples |
| [Prototype Testing](references/prototype-testing.md) | Prototype Testing |

## Best Practices

### ✅ DO

- Start with low-fidelity sketches
- Get feedback early and often
- Test with real users
- Iterate based on feedback
- Use consistent grids and spacing
- Document interaction flows
- Include edge cases (empty states, errors)
- Create mobile-first wireframes
- Share prototypes for collaboration
- Keep wireframes simple and focused

### ❌ DON'T

- Jump directly to high-fidelity
- Over-design before validation
- Ignore mobile/responsive needs
- Create wireframes without user input
- Leave interactions undefined
- Make wireframes too detailed
- Test only with team members
- Ignore accessibility
- Lock into designs too early
- Create unrealistic user flows

© aj-geddes · MIT · aj-geddes/useful-ai-prompts

Similar skills

Everything for Design →
figma-prototyping dylantarre A skill that walks your agent through building Figma prototypes with Disney's 12 animation principles, Smart Animate and component variants. CX Codex +1 548installs 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 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 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 wireframe-spec Owl-Listener Defines wireframe layout specifications, content priorities, and interaction notes. Useful when structuring an interface before moving into visual UI design. CX Codex +1 2,300installs 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

From the same set143

ansible-automation An Ansible skill for your coding agent: write playbooks, roles and inventory, deploy apps and patch servers. CX Codex +1 1,800installs android-kotlin-development A skill that steers your coding agent through native Android work in Kotlin: MVVM, Compose, Retrofit, Room. CX Codex +1 1,500installs ios-swift-development A skill for building native iOS apps in Swift: MVVM, SwiftUI, URLSession networking, Combine and Core Data persistence. CX Codex +1 1,500installs flask-api-development Builds modular Flask REST APIs using blueprints, SQLAlchemy ORM, and JWT authentication. It helps organize microservices and validate incoming request payloads. CX Codex +1 1,400installs markdown-documentation A skill that gives the agent a fixed set of Markdown rules for READMEs, wikis and docs pages. Useful when the model writes the text and it has to look consistent. CX Codex +1 1,300installs terraform-infrastructure Guides the agent in configuring cloud infrastructure with Terraform modules and remote state. Useful when managing dev, staging, and prod environments. CX Codex +1 1,200installs penetration-testing Security testing skill that guides ethical hacking, simulated attacks, and vulnerability documentation across applications and infrastructure. CX Codex +1 1,100installs responsive-web-design A skill that steers your coding agent toward mobile-first CSS with Flexbox, Grid and media queries. Useful when one layout has to hold up on phones and desktops. CX Codex +1 1,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