Skills
.Work. You
Rest

ba-ui-function-gen

Community

Auto-generate UI function prototypes from brand data.

Design & Creative#mermaid#data-model#user-flow#ui-generation#html-prototype#brand-guideline
AuthorYukine5377
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ba-ui-function-gen
Download link: https://github.com/Yukine5377/common/archive/main.zip#ba-ui-function-gen

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.