skills.rest
AutoByteus
AutoByteusOFFICIAL
Explore all skills by this author →
GitHub

product-ui-prototyping

Generate visual UI state prototypes for web, iOS, and Android flows.

34|2|Updated Jan 9, 2026
Search Tags:#state-management#product-design#design-system#interaction-design#ui-prototyping#flow-maps#visual-ui
One-click install
npx skills add https://github.com/AutoByteus/autobyteus_skills --skill product-ui-prototyping
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-ui-prototyping
Source: https://github.com/AutoByteus/autobyteus_skills/tree/main/skills/product-ui-prototyping
Command: npx skills add https://github.com/AutoByteus/autobyteus_skills --skill product-ui-prototyping

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and validation of UI behavior often occur late in the process, leading misaligned expectations and costly rework. This Skill enables teams to rapidly generate and refine visual state prototypes to align product, design, and engineering before implementation.

Core Features & Use Cases

  • Generate state-by-state screen visuals for web, iOS, and Android to review interactions before coding.
  • Provide flow maps and a lightweight manifest that tracks prompts, prompts per platform, and asset provenance.
  • Enable per-prototype viewers for quick product/design review and offline stakeholder sign-off.

Quick Start

Create a new prototype by defining a single flow, generate baseline screens, and review them in the provided viewer.

Frequently Asked Questions about product-ui-prototyping

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

FAQPage Schema
How do I prototype UI states visually before writing code?▼

To prototype UI states visually before coding, define a single flow and generate baseline screens for default, focus, loading, and error states. The Skill creates per-platform aspect ratios and a viewer to review multi-screen journeys locally.

Can I generate visual prototypes for web, iOS, and Android flows?▼

Yes, you can generate visual prototypes for web, iOS, and Android flows. The Skill specifies per-platform aspect ratios and applies state transitions across multi-screen journeys to align product, design, and engineering teams.

What UI states are covered when generating visual prototypes?▼

Generating visual prototypes covers default, focus, pressed, loading, success, error, and empty states. These state transitions are mapped using image prompts and a lightweight manifest that tracks asset provenance.

Do I need a design system to create flow maps and state transitions?▼

No design system dependency is required to create flow maps and state transitions. The Skill uses a canonical product base spec to generate image prompts and validate visual UI state prototypes independently.

Why generate visual UI prototypes instead of coding interactions directly?▼

Generating visual UI prototypes before coding prevents late-stage misaligned expectations and costly rework. It enables rapid stakeholder review and offline sign-off using a local viewer, accelerating cross-functional consensus.

Is there a way to review multi-screen journeys offline for stakeholder sign-off?▼

Yes, there is a per-prototype viewer provided to review multi-screen journeys offline for stakeholder sign-off. It reads the generated manifest of image prompts and baseline screens for quick product and design validation.

Related Skills

Explore More Design & Creative Skills→
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-ui-function-gen

Generate Mermaid user flows and HTML prototypes from brand guidelines and data models.

Community
Intermediate
mattwoodcomattwoodco
3

aspect-ratio-grid

Generate and display image previews across social platform aspect ratios.

Community
Intermediate
striderZAstriderZA
72

ux-design

Generate guided UX specifications for game screens, flows, or HUDs.

Community
Advanced
dmccrearydmccreary
90

celebration-animation-generator

Generate self-contained p5.js celebration animations with standard API functions.

Community
Advanced