generate-design-from-ui

To generate a design graph from UI source code, you can launch this Skill with your UI repository path. It reads the actual frontend code and converts functional graph scenarios into a design graph by mapping scenario steps and actions to design nodes.

UI code analysis for frontend design flow discovery is the process of reading real UI source trees to derive UserJourneys, Flows, Pages, and Components. It ensures your design mappings stay in sync with the actual implementation by analyzing functional scenarios.

Yes, you need a Breeze MCP project context to map scenarios to design nodes. The Skill requires this context to retrieve scenario steps and actions, perform bulk updates on design nodes, and apply blocklist checks to ensure only human persona scenarios are processed.

Yes, you can filter out non-human persona scenarios when converting flows into design graphs. The Skill applies blocklist checks during the conversion process to ensure that only human persona scenarios are processed for UI-driven design mapping.

You can map multi-modality flows and scenario steps to frontend design components by scanning UI source trees across web apps. The Skill reads the actual UI code to extract Pages and Components and maps them directly to functional scenario steps using bulk design node updates.

Limitations of deriving UserJourneys and Pages from real UI code include the requirement for a Breeze MCP project context and a pre-existing functional graph. Additionally, the Skill only processes human persona scenarios after blocklist filtering, limiting its scope to UI-driven design workflows.