Skills
.Work. You
Rest

UI Skill — TUI/GUI Mockup Design

Community

Generate theme-consistent UI mockups fast.

Design & Creative#design system#theme tokens#ui mockups#stitch mcp#html css generation#tui design#typed ui widgets
Authorormastes
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: UI Skill — TUI/GUI Mockup Design
Download link: https://github.com/ormastes/Spipe/archive/main.zip#ui-skill-tui-gui-mockup-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.