skills.rest
bennybennison
bennybennisonCOMMUNITY
Explore all skills by this author →
GitHub

wireframe-planning

Transform workflow descriptions into ScreenFlowSpec, ScreenSpec, and WireframeSpec documents.

Updated Apr 11, 2026
Search Tags:#workflow#prototyping#ui design#wireframe#mockup#screen spec
One-click install
npx skills add https://github.com/bennybennison/agent-toolkit --skill wireframe-planning
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe-planning
Source: https://github.com/bennybennison/agent-toolkit/tree/main/skills/wireframe-planning
Command: npx skills add https://github.com/bennybennison/agent-toolkit --skill wireframe-planning

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often need visual representations of a workflow before any backend code exists, but creating detailed wireframes manually is time‑consuming and error‑prone.

Core Features & Use Cases

  • Specification Generation: Produces a ScreenFlowSpec, one or more ScreenSpec documents, and a WireframeSpec for each screen.
  • Design Alignment: Ensures screen purpose, actions, fields, states, and transitions are clearly defined for developers and stakeholders.
  • Use Case: When planning a new checkout process, generate mock screens that capture user interactions without building the underlying services.

Quick Start

Ask the skill to generate wireframes for the user journey "checkout flow" based on the provided workflow description.

Frequently Asked Questions about wireframe-planning

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate wireframes from a workflow description without backend implementation?▼

Generating wireframes from a workflow requires only the workflow description. The process outputs a ScreenFlowSpec, individual ScreenSpec documents, and a WireframeSpec for each defined screen.

What is a ScreenFlowSpec and how does it help with UI design alignment?▼

A ScreenFlowSpec is a structured specification document defining screen purpose, actions, fields, states, and transitions. It ensures UI design alignment by providing clear mock screens that capture user interactions for developers and stakeholders.

Can I create mockups for a checkout flow before building the underlying services?▼

Yes, you can create mockups for a checkout flow before building underlying services. Providing the workflow description generates visual wireframes and mocked screens that capture user interactions without requiring backend code.

Do I need existing code or data models to produce screen specifications for a new design project?▼

No, existing code or data models are not required to produce screen specifications. The process requires only the workflow description to generate the necessary ScreenSpec and WireframeSpec documents for the design project.

What is the best way to document screen transitions and states for prototyping?▼

The best way to document screen transitions and states for prototyping is to generate a structured WireframeSpec and ScreenSpec. These documents clearly define actions, fields, and transitions directly from the workflow description.

Related Skills

Explore More Design & Creative Skills→
jonnabiojonnabio
6

audiocraft-audio-generation

Convert text descriptions into music and sound effects using audiocraft.

Community
Advanced
gvinokurgvinokur

ui-ux-designer

Generate standalone HTML mockups with React and MUI v7 components.

Community
Intermediate
partme-aipartme-ai
610

axure

Guide Axure RP prototyping for wireframes, interactions, and dynamic panels.

Official
Basic
freedomw1987freedomw1987
2

react-html5-drag-drop-pitfalls

Diagnose silent HTML5 drag-and-drop failures in React applications.

Community
Intermediate