skills.rest
ormastes
ormastesCOMMUNITY
Explore all skills by this author →
GitHub

UI Skill — TUI/GUI Mockup Design

Generate theme-consistent TUI/GUI mockups using Stitch MCP workflows.

Updated May 27, 2026
Search Tags:#design system#theme tokens#ui mockups#stitch mcp#html css generation#tui design#typed ui widgets
One-click install
npx skills add https://github.com/ormastes/Spipe --skill ui-skill-tui-gui-mockup-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Skill — TUI/GUI Mockup Design
Source: https://github.com/ormastes/Spipe/tree/main/doc/00_llm_process/skill_command/skills/pipe/design/ui
Command: npx skills add https://github.com/ormastes/Spipe --skill ui-skill-tui-gui-mockup-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you produce accurate, theme-consistent TUI/GUI mockups while keeping your design tokens and typed UI authoring practices aligned with the Stitch design system and Simple code conventions.

Core Features & Use Cases

  • Stitch-based GUI screen generation and editing: Use Google Stitch MCP to create or update production-quality HTML/CSS screens from prompts, apply design systems, and generate variants.
  • Theme drift detection before generating new screens: Diff local tokens against stored Stitch snapshots to avoid mismatches with the Electron shell.
  • Typed widget authoring guidance: Provide concrete instructions for using typed enums (WidgetKind, LayoutKind, design tokens, typed actions) and the required intermediate-var chaining pattern.
  • Minimal screen coverage for theme validation: Ensure the most important windowing and settings surfaces are represented to validate a new theme.

Quick Start

Start the Stitch MCP proxy and run the theme consistency diff before generating TUI or GUI mockups for your feature.

Frequently Asked Questions about UI Skill — TUI/GUI Mockup Design

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

FAQPage Schema
How do I generate theme-consistent UI mockups for desktop windowing and settings screens?▼

You can generate theme-consistent UI mockups by coordinating Stitch MCP workflows with Simple design-token validation. This applies typed WidgetNode authoring conventions to produce aligned TUI and GUI artifacts for desktop launcher, window manager, and settings surfaces.

What is theme drift detection and when do I need it for HTML/CSS generation?▼

Theme drift detection diffs local design tokens against stored Stitch snapshots. You need it before generating new HTML/CSS screens to prevent visual mismatches with the Electron shell and ensure your design system remains consistent across updates.

How do I use typed UI widgets and enums for TUI design authoring?▼

For typed UI widget authoring in TUI design, use enums like WidgetKind and LayoutKind with an intermediate-var chaining pattern. This ensures safe method-chaining practices and maintains strict alignment with Simple code conventions.

Does this approach work with Google Stitch MCP for editing existing HTML and CSS outputs?▼

Yes, the Google Stitch MCP integration supports editing existing HTML/CSS outputs. It allows you to apply design systems, update production-quality screens from prompts, and generate UI variants while validating design tokens.

What are the limitations of using Stitch design system snapshots for theme validation?▼

A limitation of using Stitch snapshots for theme validation is the requirement for minimal screen coverage. You must represent critical windowing and file manager surfaces, or the token diff may not catch all visual mismatches.

Related Skills

Explore More Design & Creative Skills→
eliuhadseliuhads
2

design-md

Extract design metadata and tokens from Stitch projects into a DESIGN.md.

Community
Advanced
ormastesormastes

ui_design

Generate TUI and GUI mockups, component inventories, and interaction-flow diagrams.

Community
Intermediate
JayJihyunKimJayJihyunKim
1

stitch-design

Automates Stitch MCP-driven UI design workflows and generates screens from prompts.

Community
Advanced
Zoomma1Zoomma1
3

claude-design-to-code

Convert Claude Design HTML mockups into Angular standalone components with templates and SCSS.

Community
Intermediate