skills.rest
wfukatsu
wfukatsuCOMMUNITY
Explore all skills by this author →
GitHub

generate-ui-mock

Convert domain stories into navigable UI mocks using design system tokens.

12|1|Updated Mar 23, 2026
Search Tags:#design system#ui design#mockup generation#interactive prototype#domain story
One-click install
npx skills add https://github.com/wfukatsu/nexus-architect --skill generate-ui-mock
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-ui-mock
Source: https://github.com/wfukatsu/nexus-architect/tree/main/skills/product/generate-ui-mock
Command: npx skills add https://github.com/wfukatsu/nexus-architect --skill generate-ui-mock

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill transforms domain stories into interactive UI mocks, facilitating the visualization of user interactions within the context of the product's design system.

Core Features & Use Cases

  • Domain Story to Mocks: Converts domain story activities into clickable prototypes.
  • Design System Integration: Styles mocks with the active design system tokens.
  • Fidelity Levels: Supports low and mid fidelity mock generation.
  • Use Case: Generate mid-fidelity UI mockups for a product's key screens directly from its domain story.

Quick Start

Generate a UI mock for a domain story with high fidelity using the '/product:generate-ui-mock --fidelity=mid' command.

Frequently Asked Questions about generate-ui-mock

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

FAQPage Schema
How do I generate interactive UI mockups from domain stories?▼

Interactive UI mockups are generated by converting domain story activities into clickable prototypes using design system tokens. This Skill supports multiple fidelity levels and incorporates story flow and navigation directly into the generated mocks.

Can I create low and mid fidelity UI prototypes from a domain story?▼

Yes, you can create low and mid fidelity UI prototypes from a domain story. The tool converts your domain narratives into navigable UI mocks while applying active design system tokens to ensure styling matches your product's visual requirements.

Does UI mockup generation work with existing design system tokens?▼

Yes, UI mockup generation integrates with existing design system tokens to style the mocks. This integration ensures that the generated interactive prototypes align with the visual and UI design standards of your product workflow.

What is the best way to visualize user interactions for product design?▼

The best way to visualize user interactions is to transform domain stories into navigable UI mocks. This process supports product design and UX workflows by mapping story flows into interactive prototypes that reflect actual user navigation paths.

Are there limitations when converting domain stories into clickable prototypes?▼

A limitation when converting domain stories into clickable prototypes is that fidelity is restricted to low and mid levels. High fidelity mockups are not currently supported, which may limit detailed visual polish for advanced UX design workflows.

Related Skills

Explore More Design & Creative Skills→
EchoNoReturnEchoNoReturn

user-story-mapping

Convert user behavior into hierarchical story maps with activities, steps, and tasks.

Community
Intermediate
daffy0208daffy0208
34

Prototype Designer

Create interactive prototypes with multi-step flows and conditional logic.

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
soq123soq123

recreate-screenshot

Reproduce a UI screen from a screenshot with pixel-perfect fidelity.

Community
Intermediate