elifsue

Wireframe Prototyper Skill — Design skill for Claude Code

Design community

How to install Wireframe Prototyper Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open elifsue/wireframe-prototyper-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Wireframe Prototyper Skill does

A reusable Claude Code Skill that streamlines the end-to-end design workflow, from structured discovery and competitor research to generating a WCAG-compliant design system and building interactive low-fidelity wireframes or high-fidelity prototypes with real navigation, exportable screens, and a transferable design system to Figma.

Alternatives in Design

Designer Skills — Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, i 2.3k ★
Design Present — Generate an interactive HTML presentation from Figma screens — annotated walkthrough with transitions, speaker 309 ★
Platform Design Skills — 300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps 261 ★

README

Wireframe Prototyper Skill

[Read on my Personal Website](https://elifsuates.com/wireframe-prototyper) · [Read on Medium](https://medium.com/@elifsue/design-with-context-a-claude-skill-that-studies-competitors-and-builds-your-prototype-e4cdd8cb7519) · [Watch on YouTube](https://www.youtube.com/watch?v=EIryl8x3PCI)

![Wireframe Prototyper Skill](assets/wireframe-prototyper-thumbnail.png)

Overview

Wireframe Prototyper is a reusable AI design skill that turns an initial project brief into a structured design workflow. It guides the designer through discovery, competitor analysis, screen planning and accessibility considerations before generating low and high-fidelity prototypes with functional navigation, WCAG-compliant Material 3 color palette, reusable components and screens that can be transferred to Figma for further refinement.

It was created to reduce repetitive prompting while keeping the designer in control of key decisions.

![Round trip between Claude Code and Figma: Code to Canvas pushes generated code into Figma, and Design to Code brings Figma changes back](assets/code-to-canvas-loop.png)

Key Capabilities

Capability	What it does
Low-Fidelity Wireframes	Generates black-and-white wireframes with placeholder content, crossbox image placeholders, and simplified layouts, ideal for rapid ideation and early stakeholder feedback.
High-Fidelity Prototypes	Creates polished, interactive prototypes with full styling, real navigation between screens, and interactions ready for usability testing.
Competitor Analysis	Conducts structured competitor research by analysing existing pr