ui-brainstorm-preamble

Capture UI design context and constraints into a preamble.json configuration file.

1|Updated Dec 30, 2025

Search Tags:#workflow #design #planning #ui #architecture #preamble

Ready to run

npx skills add https://github.com/tyroneross/interface-built-right --skill ui-brainstorm-preamble

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-brainstorm-preamble
Source: https://github.com/tyroneross/interface-built-right/tree/main/skills/ui-brainstorm-preamble
Command: npx skills add https://github.com/tyroneross/interface-built-right --skill ui-brainstorm-preamble

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates ambiguity in the early stages of UI development by enforcing a structured preamble that captures essential design constraints, platform requirements, and user goals before planning begins.

Core Features & Use Cases

Context Capture: Systematically gathers platform, scope, design mode, and archetype information to align the AI with project requirements.
Deterministic Routing: Automatically triggers platform-specific design routers (web, iOS, or macOS) based on user input.
Use Case: When starting a new dashboard project, this skill ensures the AI understands the density requirements, target roles from the Mockup Gallery, and whether image generation is needed for visual style, preventing scope creep and misalignment.

Quick Start

Invoke the ui-brainstorm-preamble skill at the start of your build process to define the platform and design scope for your new interface.

Frequently Asked Questions about ui-brainstorm-preamble

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

FAQPage Schema

How do I standardize UI design context before starting a new interface build?▼

Standardize UI design context by capturing platform, scope, design mode, and archetype information to generate a valid preamble.json configuration file. This aligns the AI with project requirements and prevents scope creep before planning begins.

What is the best way to capture project constraints for a web or iOS redesign?▼

Capture project constraints for a web or iOS redesign by systematically inputting target roles, density requirements, and design modes. This automatically triggers platform-specific routers to initialize the Design Director planning phase.

How do I initialize the Design Director planning phase for a macOS application?▼

Initialize the Design Director planning phase for a macOS application by invoking the preamble workflow to define platform requirements and design scope. This deterministic routing ensures the AI understands project constraints before generating visual styles.

Does the UI planning workflow support image generation for visual style decisions?▼

The UI planning workflow supports specifying whether image generation is needed for visual style decisions during context capture. This ensures visual style requirements are defined upfront alongside density requirements and target roles.

When do I need to define design archetypes and target roles for a dashboard project?▼

Define design archetypes and target roles for a dashboard project at the very start of the build process. Capturing this structured input early eliminates ambiguity and ensures the AI aligns with the correct user goals and constraints.

Can I use a single configuration file to route platform-specific UI design across web and mobile?▼

Use a single preamble.json configuration file to route platform-specific UI design across web, iOS, and macOS. The system automatically determines the correct platform-specific design router based on your initial structured input.