skills.rest
clovernguyen1010-ship-it
clovernguyen1010-ship-itCOMMUNITY
Explore all skills by this author →
GitHub

ba-ui-layout-gen

Generate an HTML master-layout prototype from Brand Guideline and Use Case list.

Updated Apr 12, 2026
Search Tags:#layout#prototype#wireframe#ia#use-cases#brand-guide
One-click install
npx skills add https://github.com/clovernguyen1010-ship-it/Clover_Nguyen --skill ba-ui-layout-gen-clovernguyen1010-ship-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ba-ui-layout-gen
Source: https://github.com/clovernguyen1010-ship-it/Clover_Nguyen/tree/main/.agent/skills/ba-ui-layout-gen
Command: npx skills add https://github.com/clovernguyen1010-ship-it/Clover_Nguyen --skill ba-ui-layout-gen-clovernguyen1010-ship-it

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill analyzes information architecture from a Brand Guideline and a list of Use Cases, then creates an HTML Prototype layout to be reviewed before detailed FE coding.

Core Features & Use Cases

  • IA extraction and navigation structure proposals (Top Header, Left Sidebar, or Bottom Tabs) aligned with Use Cases.
  • Layout region planning (Header, Footer, Main Content, Panels) and grouping related Use Cases for optimal UX.
  • Brand-consistent visual language application (colors, typography, spacing) to generate a ready-to-preview prototype.
  • Use Case validation: produce a master-layout wireframe that represents the full system UI in a single view.

Quick Start

Provide Brand Guideline, Use Case list, and application context to commence IA analysis and prototype layout generation.

Frequently Asked Questions about ba-ui-layout-gen

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

FAQPage Schema
How do I generate an HTML prototype from a brand guide and use case list?▼

To generate an HTML prototype, this Skill analyzes your brand guide and use case list to extract information architecture, plan layout regions, and apply brand-consistent visuals for a ready-to-preview master layout.

What is information architecture extraction for web app dashboards?▼

Information architecture extraction is the process of analyzing your use cases to propose a navigation structure, such as a top header, left sidebar, or bottom tabs, optimized for your web app dashboard or admin interface.

Can I use this to create wireframes for admin interfaces?▼

Yes, you can use this to create wireframes for admin interfaces by validating your use cases and generating a master-layout HTML prototype that represents the full system UI before detailed front-end development.

How do I plan layout regions and group use cases for optimal UX?▼

You plan layout regions by grouping related use cases into structural areas like headers, footers, main content, and panels, ensuring the prototype validates the system structure and optimizes the user experience.

Does this apply brand colors and typography to the generated layout prototype?▼

Yes, this applies your brand-consistent visual language, including colors, typography, and spacing from your brand guideline, directly to the generated HTML prototype layout for accurate visual validation.

When do I need a master-layout HTML prototype before front-end development?▼

You need a master-layout HTML prototype when you want to validate your navigation structure, layout regions, and brand-consistent visuals in a single view before committing to detailed front-end coding.

Related Skills

Explore More Design & Creative Skills→
Yukine5377Yukine5377

ba-ui-layout-gen

Generate information architecture and HTML prototypes from brand guidelines and use cases.

Community
Intermediate
abzhawabzhaw

dashboard-design

Design responsive Next.js dashboards with layout patterns and real-time status indicators.

Community
Intermediate
sandeshbagmaresandeshbagmare

design-system-patterns

Generate design tokens and implement theme switchers for web and mobile UIs.

Community
Advanced
qqrusqqrus

ux-designer

Provide UX design guidelines for user research, wireframing, prototyping, and information architecture.

Community
Advanced