skills.rest
accionlabs
accionlabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

generate-design

Generate UserJourney, Flow, Page, and Component nodes from a Breeze functional graph.

2|2|Updated Mar 11, 2026
Search Tags:#component-reuse#atomic-design#design-graph#breeze#generate-design#userjourney#modality
One-click install
npx skills add https://github.com/accionlabs/breezeai-claude-plugin --skill generate-design-accionlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-design
Source: https://github.com/accionlabs/breezeai-claude-plugin/tree/main/skills/generate-design
Command: npx skills add https://github.com/accionlabs/breezeai-claude-plugin --skill generate-design-accionlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Maps a Breeze functional graph into a structured design ontology so teams can automatically produce UserJourneys, Flows, Pages, Components, and Templates without manual modeling. It removes repetitive mapping work, enforces atomic-design reuse, and prevents duplicate components across scenarios.

Core Features & Use Cases

  • Scenario-driven generation: One Scenario → one UserJourney; Steps → Flow or Page; Actions → Component, with modality-aware outputs (web, mobile, desktop).
  • Component reuse & registry: Seed and maintain an existingcomponents.json registry, check designSystemRef and hierarchical rules before creating components to avoid duplicates.
  • Safe incremental processing: Paginated queries, non-human persona exclusion gate, per-scenario confirmation or full auto mode with robust error handling and final summaries.
  • Template & layout assignment: Derive and reuse TEMPLATEs per pageType (FormPageLayout, ListPageLayout, etc.) and enforce atomic-design nesting rules.

Quick Start

Run the generate-design skill to create UserJourney, Flow, Page, Component, and Template nodes from the functional graph while updating existingcomponents.json.

Frequently Asked Questions about generate-design

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

FAQPage Schema
How do I generate UI designs from functional graphs automatically?▼

Generate UI designs from functional graphs by mapping Breeze scenarios, steps, and actions into UserJourney, Flow, Page, and Component entities. This process removes manual modeling and automatically produces structured design ontology outputs with modality-aware generation.

How do I prevent duplicate components when generating UI pages from scenarios?▼

Prevent duplicate components during UI generation by seeding and maintaining an existingcomponents.json registry. The generation process checks designSystemRef and hierarchical atomic-design rules before creating any new components to enforce strict component reuse across all scenarios.

What is atomic design component reuse and when do I need it for UI generation?▼

Atomic design component reuse is a methodology that structures UI elements hierarchically to prevent duplication. You need it when generating multiple pages and flows from functional scenarios, ensuring components are checked against a registry before creation to maintain consistency.

Can I generate modality-specific UI components for web, mobile, and desktop from a single functional graph?▼

Yes, modality-aware outputs generate UI components specifically for web, mobile, and desktop from a single Breeze functional graph. The process maps scenario actions to modality-specific components while maintaining the same underlying UserJourney and Flow structure.

What file format do I need to start generating design graphs from Breeze functional graphs?▼

You need a valid .breeze.json file containing both apiKey and projectUuid to start generating design graphs. This file provides the required authentication and project context for mapping scenarios into UserJourney, Flow, Page, and Component entities.

How do I safely process multiple scenarios without losing data during design graph generation?▼

Safely process multiple scenarios using paginated queries and per-scenario confirmation, or enable full auto mode for batch processing. The generation includes a non-human persona exclusion gate and robust error handling with final summaries to ensure safe incremental processing.

Related Skills

Explore More Design & Creative Skills→
accionlabsaccionlabs
2

generate-functional-from-backend

Generate a system-persona functional graph from backend REST routes and GraphQL resolvers.

Official
Advanced
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
madebyarismadebyaris
192

sdd-audit

Compare code implementations against spec documents to produce structured audit reports.

Community
Basic
accionlabsaccionlabs
2

analyze-design

Generate design graph nodes linking functional scenarios to UI components.

Official
Advanced