ux-designer

Generates UI concepts, layouts, and component breakdowns with data views for feature design.

Updated Jun 12, 2026
One-click install
npx skills add https://github.com/lucolucus/mismagent --skill ux-designer-lucolucus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-designer
Source: https://github.com/lucolucus/mismagent/tree/main/plugins/mismagent/skills/ux-designer
Command: npx skills add https://github.com/lucolucus/mismagent --skill ux-designer-lucolucus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a feature's UI before code is written often produces vague ideas that never translate into buildable work. This Skill structures the explore/model phase of UI design: it reads existing descriptions and screens, proposes divergent concepts, and converges on a concrete proposal that directly seeds the build manifest's ui blocks and read-model view shapes. ## Core Features & Use Cases - Divergent concept generation: Applies How-Might-We reframing and Crazy-8 style sketching to propose 1-3 UI concepts with layouts, flows, and component breakdowns. - State-first design: Forces consideration of empty, error, and loading states for every screen, not just the happy path. - Consumer-driven output: Writes ux-proposal.md with screens, components, states, and the data views each screen needs, which seed the manifest's ui blocks and read-models' view_shape. - Use Case: During the mismAgent explore/model phase of a feature with UI, you dialogue with the skill to imagine the interface, pick one concept, and produce a proposal the FE worker later implements. ## Quick Start Ask the agent to use the ux-designer skill to propose UI concepts for the current feature based on its product brief and existing screens.

Frequently Asked Questions about ux-designer

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

FAQPage Schema
How do I design a feature UI before writing frontend code?

Use this skill during the explore/model phase: it reads the product brief and existing screens, proposes 1-3 UI concepts with layouts and component breakdowns, then converges with you on one. The result is a ux-proposal.md that the frontend worker later implements.

What techniques help generate multiple UI layout ideas quickly?

The skill applies How-Might-We reframing to open the solution space and Crazy-8 style sketching to produce several concepts fast. You then compare 2-3 concepts and converge on one before refinement.

Does this UX design skill write frontend code?

No, it explicitly does not write code. It produces designs, component breakdowns, and data view definitions only; the frontend worker builds the implementation from the manifest's ui blocks.

What inputs does the UX design process need?

It reads the feature's product-brief.md, the project's context-map.md for canonical names, and any visual material declared in the profile such as existing mockups or domain screenshots. If no materials exist, it starts from the brief.

Why should empty, error, and loading states be designed first?

Designing states before the polished UI prevents screens that only work on the happy path. The skill requires every screen in the proposal to specify its empty, error, and loading states alongside components and data views.