skills.rest
Yukine5377
Yukine5377COMMUNITY
Explore all skills by this author →
GitHub

ba-ui-layout-gen

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

Updated Apr 12, 2026
Search Tags:#layout#ux-design#ia#information-architecture#use-cases#html-prototype#brand-guideline
One-click install
npx skills add https://github.com/Yukine5377/common --skill ba-ui-layout-gen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ba-ui-layout-gen
Source: https://github.com/Yukine5377/common/tree/main/.cursor/skills/ba-ui-layout-gen
Command: npx skills add https://github.com/Yukine5377/common --skill ba-ui-layout-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Skill helps design teams translate Brand Guideline and Use Case lists into a clear Information Architecture and a shareable HTML prototype for early validation before detailed FE work.

Core Features & Use Cases

  • IA Design: Analyze inputs to craft navigation, layout regions, and Use Case groupings for a coherent layout skeleton.
  • Prototype Generation: Produce a master HTML prototype with placeholder content reflecting the IA for user review.
  • Brand Conformance: Apply Brand Guideline colors and typography to ensure visual alignment.

Quick Start

Provide Brand Guideline and Use Case list, then run the skill to generate a master IA and a static HTML prototype for review.

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 information architecture layout from brand guidelines?▼

You generate information architecture from brand guidelines by providing style rules and use cases to analyze navigation, layout regions, and content groupings for a coherent web app skeleton.

What is the best way to create an HTML prototype from use cases before frontend development?▼

Creating an HTML prototype from use cases involves mapping user tasks into a master layout structure, generating placeholder content that reflects the IA for early validation before detailed frontend work.

Can I apply brand guideline colors and typography directly to a static HTML prototype?▼

Yes, you can apply brand guideline colors and typography directly to a static HTML prototype to ensure visual alignment during early user review and validation of the layout skeleton.

How do I structure navigation and layout regions for a web app dashboard?▼

Structuring navigation and layout regions for a dashboard requires analyzing use cases to group related tasks, crafting a coherent layout skeleton that organizes information architecture for user review.

What inputs are required to generate a master layout structure for user review?▼

Generating a master layout structure requires brand guideline and use case list inputs to produce a coherent information architecture with navigation, regions, and placeholder HTML following brand styling.

Related Skills

Explore More Design & Creative Skills→
irahardiantoirahardianto

brand-identity-creator

Generate brand identity guidelines documents from brand core data.

Community
Basic
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

developpeur-front

Convert validated HTML mockups into production-ready frontend code.

Community
Advanced
xmx0632xmx0632
1

product-design

okay, I'll respond with:

Community
Advanced
jongensutrechtjongensutrecht
1

king-mode

Design bespoke frontend interfaces for React, Vue, and Svelte projects.

Community
Advanced