ba-mockup-prompt-gen

Name: ba-mockup-prompt-gen
Availability: InStock
Author: yukine5377

Convert Brand Guidelines into deterministic layout and high-fidelity design prompts.

Updated Apr 12, 2026

Search Tags:#workflow #ui-design #erd #design-prompt #high-fidelity #brand-guideline #layout-prompt

Ready to run

npx skills add https://github.com/Yukine5377/common --skill ba-mockup-prompt-gen

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill translates Brand Guidelines into deterministic AI prompts that ensure design outputs align with an existing design system and brand constraints.

Core Features & Use Cases

Convert Brand Guidelines, User Flows, and ERD into per-screen layout prompts with token-level fidelity.
Generate high-fidelity prompts for AI design tools that reflect typography, colors, spacing, and components from the guideline.
Use cases include creating layout prompts for multiple screens or detailed prompts for data-driven components.

Quick Start

Provide Brand Guideline reference, select Layout or Detail prompt generation, and generate ready-to-use prompt files for the specified app.

Frequently Asked Questions about ba-mockup-prompt-gen

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

FAQPage Schema

How do I generate UI design prompts from brand guidelines?▼

To generate UI design prompts from brand guidelines, this skill converts your brand tokens, typography, and color contrast rules into deterministic prompts for per-screen layouts and high-fidelity designs. It enforces spacing and output formats to ensure AI design tools align with existing systems.

What do I need to create high-fidelity layout prompts for AI design tools?▼

Creating high-fidelity layout prompts requires providing a Brand Guideline reference, User Flows, and an ERD as inputs. This skill validates these prerequisites to generate detailed, ready-to-use prompt files that reflect your specific components and data structures.

Can I use ERD and user flows to generate data-driven component prompts?▼

Yes, you can use ERD and user flows to generate data-driven component prompts. This skill translates your entity-relationship diagrams and user flows into precise prompts that enforce brand tokens and typography for detailed AI design outputs.

What is the best way to ensure AI-generated layouts match my design system?▼

The best way to ensure AI-generated layouts match your design system is to use deterministic prompts that enforce brand tokens, color contrast, and spacing. This skill translates your brand guidelines into strict prompt files, validating inputs to guarantee token-level fidelity.

Why does my AI design output not align with my brand guidelines?▼

AI design output may not align with brand guidelines if the prompts lack deterministic constraints for typography, colors, and spacing. This skill solves that by validating your brand guideline inputs and enforcing brand tokens within the generated prompts.

Does this skill support both layout and detail prompt generation?▼

Yes, this skill supports both layout and detail prompt generation. You can select either per-screen layout prompts or high-fidelity detailed prompts for data-driven components, ensuring outputs match your app's specified brand constraints and user flows.