skills.rest
tody-agent
tody-agentCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

cm-ui-preview

Transform vague UI requests into production-ready Stitch previews with design system enforcement.

48|23|Updated Mar 17, 2026
Search Tags:#workflow#design#ui#design-system#prompt-engineering#stitch
One-click install
npx skills add https://github.com/tody-agent/codymaster --skill cm-ui-preview
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cm-ui-preview
Source: https://github.com/tody-agent/codymaster/tree/main/skills/cm-ui-preview
Command: npx skills add https://github.com/tody-agent/codymaster --skill cm-ui-preview

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts vague UI requests into precise Stitch prompts and production-ready previews, guaranteeing design-system alignment and predictable results.

Core Features & Use Cases

  • End-to-end Stitch UI preview pipeline from intent to final handoff (e.g., turning a wireframe into a production-ready preview).
  • Design System extraction and enforcement via cm-ux-master and design tokens.
  • Prompt optimization and the Build Loop to generate consistent, branded previews.

Quick Start

Provide a UI brief and let cm-ui-preview generate a production-ready Stitch UI preview.

Frequently Asked Questions about cm-ui-preview

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

FAQPage Schema
How do I turn a vague UI brief into a production-ready preview?▼

To generate production-ready UI previews from vague requests, the system applies design system enforcement and a structured build loop to your brief. This process yields precise, predictable Stitch previews aligned with your branding.

What is the best way to ensure my new dashboard design aligns with my existing design system?▼

To ensure dashboard design alignment, use design system extraction and design token enforcement during UI generation. This automatically applies your established rules to restyle and iterate components for consistent results.

Can I generate Stitch previews from a wireframe for a new screen?▼

Yes, you can generate Stitch previews from a wireframe for a new screen. The system transforms your wireframe into a production-ready UI preview through prompt optimization and structured execution integration.

Does prompt engineering help with UI restyling and component iteration?▼

Prompt engineering helps with UI restyling and component iteration by optimizing vague requests into precise prompts. This structured build loop enforces design tokens, guaranteeing consistent and branded component updates.

What are the limitations of using automated UI preview generation?▼

A key limitation of automated UI preview generation is its reliance on extracted design tokens; without a clear design system, results may lack specificity. It transforms briefs but requires structured input for predictable, branded output.

Related Skills

Explore More Design & Creative Skills→
PiercingXXPiercingXX
1

sleek

Generate implementation-ready minimalist design-system guidance with tokens, component rules, and WCAG 2.2 AA acceptance criteria.

Community
Intermediate
RenyEnnosRenyEnnos
1

react:components

Convert Stitch designs into modular React components with AST validation.

Community
Advanced
erichowenserichowens
181

design-system-creator

Generate design systems with CSS from tokens and component documentation.

Community
Advanced
shekerkammashekerkamma

excalidraw

Convert text descriptions into editable Excalidraw diagrams via MCP.

Community
Advanced