ba-ui-function-gen

Name: ba-ui-function-gen
Availability: InStock
Author: yukine5377

Generate a Mermaid user flow and standalone HTML prototype from brand guidelines and data models.

Updated Apr 12, 2026

Search Tags:#mermaid #data-model #user-flow #ui-generation #html-prototype #brand-guideline

Ready to run

npx skills add https://github.com/Yukine5377/common --skill ba-ui-function-gen

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ba-ui-function-gen
Source: https://github.com/Yukine5377/common/tree/main/.cursor/skills/ba-ui-function-gen
Command: npx skills add https://github.com/Yukine5377/common --skill ba-ui-function-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps Business Analysts quickly generate UI design artifacts (a Mermaid user flow and a standalone HTML prototype) from Brand Guidelines and related Data Models, enabling faster validation with stakeholders.

Core Features & Use Cases

Automatically produce a Mermaid user flow diagram that maps feature interactions and state transitions based on the provided data model.
Generate a standalone HTML prototype showing the UI for the specified function, aligned to the brand guideline (colors, typography, spacing) and the data schema.
Output artifacts to a predictable structure (docs-BA/Prototypes/[ten-chuc-nang]/) with a clear menu path for easy discovery and reuse.

Quick Start

Provide inputs including Brand Guideline, Data Model, and function description to generate the user-flow Mermaid and the HTML prototype.

Frequently Asked Questions about ba-ui-function-gen

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

FAQPage Schema

How do I generate a UI prototype from brand guidelines and a data model?▼

To generate a UI prototype from brand guidelines and a data model, provide the brand colors, typography, data schema, and feature description. The system outputs a Mermaid user flow and a standalone HTML prototype aligned to your brand.

How do I create standalone HTML prototypes for individual features?▼

You create standalone HTML prototypes by inputting a feature description, data model, and brand guidelines. The tool outputs ready-to-review HTML artifacts focusing on the core interface without system chrome to a specific directory.

Do I need a brand guideline document to auto-generate UI function prototypes?▼

Yes, a brand guideline document is required to auto-generate UI function prototypes. It applies brand colors, typography, and spacing to the HTML output, ensuring the prototype matches your visual identity.

Can I specify menu placement when generating an HTML prototype for a feature?▼

Yes, you can specify optional menu placement when generating an HTML prototype for a feature. This input tailors the flow and layout, organizing the output artifacts under a predictable directory structure for easy discovery.

What is the best way to map feature interactions using a data model?▼

The best way to map feature interactions using a data model is to generate a Mermaid user flow. It automatically translates the data schema and feature description into a visual diagram of state transitions and interactions.