ba-ui-function-gen

To generate a UI prototype from brand guidelines and a data model, provide a function description alongside those inputs. The Skill outputs a standalone HTML prototype and a Mermaid user flow file stored under docs-BA/Prototypes/[function-name]/ for stakeholder walkthroughs.

Yes, you can create a Mermaid user flow diagram for product discovery without frontend development. Supplying a function description, data model, and brand guidelines generates a Mermaid file mapping interactions and state transitions for design validation.

Producing an HTML prototype for a single function requires three inputs: brand guidelines, a data model, and a function description. These define the UI components, interactions, and validation rules reflected in the final output.

This approach works for stakeholder walkthroughs during design validation by producing isolated HTML prototypes. It translates data models and brand guidelines into standalone UI controls, speeding up validation without heavy frontend work.

Generated UI prototypes and user flows are organized under docs-BA/Prototypes/[function-name]/. This directory structure ensures outputs for each function are isolated and provide a clear menu path for easy discovery.

You need a standalone HTML prototype for product discovery when validating UI controls and interactions against a specific data model. It allows you to speed up stakeholder validation without committing to heavy frontend engineering.