ui-ux-workflow

Generate bounded UI/UX assessments, wireframes, and flow definitions.

1|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/bohewu/agents_pipeline --skill ui-ux-workflow
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-workflow
Source: https://github.com/bohewu/agents_pipeline/tree/main/skills/ui-ux-workflow
Command: npx skills add https://github.com/bohewu/agents_pipeline --skill ui-ux-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of producing a clear, bounded conceptual UI/UX output, including assessments, wireframes, and flow definitions, for one experience, workflow, or surface.

Core Features & Use Cases

  • Conceptual UI/UX Assessment: Frame problems and summarize recommendations for the target surface.
  • Low-Fi Wireframes: Sketch key regions, hierarchy, and primary actions for UI/UX design.
  • Mid-Fi Design Drafts: Clarify content weight, hierarchy, and state intent.
  • User Flow: Describe the main actor journey and alternate paths.
  • Data Flow: Describe conceptual information movement.
  • Operation Flow: Describe ordered operations or system interactions.
  • State Transitions: Name important conceptual states and causes of movement.
  • Prompt Export: Provide a reusable prompt for designers or reviewers.
  • Thin Preview Handoff: Describe the handoff process and surfaces worth showing.
  • Non-Expert Design Defaults: Apply defaults for theme principles, spacing, density, hierarchy, layout/navigation, and state rules.
  • Minimal Intake Questions: Ask high-value questions before drafting.
  • High-Value Review Rubric: Use a rubric to ensure the output is reviewable and conceptually sound.

Quick Start

Use the ui-ux-workflow skill to generate a UI/UX assessment for a new product feature.

Frequently Asked Questions about ui-ux-workflow

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

FAQPage Schema
How do I generate conceptual UI/UX wireframes and user flow definitions for a new feature?

To generate UI/UX wireframes and flow definitions, provide a target surface or workflow description. The skill outputs conceptual assessments, low-fi wireframes, mid-fi drafts, and structured user, data, and operation flows.

What is the best way to structure a UI/UX assessment before creating mid-fi design drafts?

A UI/UX assessment begins by framing problems for the target surface and summarizing recommendations. You answer minimal high-value intake questions to establish defaults for hierarchy, spacing, and state rules before drafting mid-fi designs.

Can I use this workflow to define state transitions and data flow for a single product surface?

Yes, you can define state transitions and data flow for a single surface. The skill generates bounded conceptual outputs that name important states, describe movement causes, and map conceptual information movement across the workflow.

Does the UI/UX workflow tool provide a reusable prompt export for design handoff?

Yes, the UI/UX workflow tool provides a reusable prompt export. It generates a prompt for designers or reviewers and describes a thin preview handoff process detailing the specific surfaces worth showing.

What limitations exist when using non-expert design defaults for UI/UX conceptual output?

Non-expert design defaults apply standardized rules for theme principles, layout, navigation, and density. The limitation is that these defaults are generalized for conceptual output and may require manual adjustment for highly specialized or complex design systems.

How do I ensure my conceptual UI/UX design draft passes a high-value review rubric?

To ensure your conceptual UI/UX design draft passes review, the skill applies a high-value review rubric. This verifies that the generated wireframes, flow definitions, and state transitions are conceptually sound and reviewable before handoff.