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

pipe_design_gemini_ui_design_skill

Generate GUI/TUI screen designs with Gemini and Stitch MCP rendering.

Updated May 27, 2026
Search Tags:#gemini#ui design#glassmorphism#tui#stitch mcp#html css to simple#component workflow
One-click install
npx skills add https://github.com/ormastes/Spipe --skill pipe-design-gemini-ui-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pipe_design_gemini_ui_design_skill
Source: https://github.com/ormastes/Spipe/tree/main/doc/00_llm_process/skill_command/skills/pipe/design/gemini_ui_design
Command: npx skills add https://github.com/ormastes/Spipe --skill pipe-design-gemini-ui-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams avoid spending weeks manually designing GUI/TUI screens by delegating professional glassmorphism UI mockups and components to Gemini, then converting the result into actionable UI artifacts.

Core Features & Use Cases

  • Gemini-assisted UI design: Produces screen layouts, component lists with props/states, and interaction flows for both dark and light glassmorphism themes.
  • Stitch MCP rendering: Uses Stitch tools to generate production-ready HTML/CSS prototypes from Gemini’s design output.
  • Simple widget conversion: Translates rendered HTML into Simple .spl widget code using the project’s glass tokens, themes, and widget builders.

Quick Start

Use the Gemini UI Design Step 3 workflow for your feature by providing the feature requirements and environment keys so the skill outputs GUI and TUI design docs plus component code.

Frequently Asked Questions about pipe_design_gemini_ui_design_skill

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

FAQPage Schema
How do I generate glassmorphism UI mockups using Gemini?▼

You can generate glassmorphism UI designs by providing feature requirements to the skill, which then orchestrates Gemini design prompts to produce screen layouts and component specifications for both glass_dark and glass_light variants.

What is the best way to convert HTML CSS prototypes into Simple widget code?▼

Converting HTML CSS prototypes into Simple widget code involves using Stitch MCP rendering tools to generate the prototype and then translating it into Simple `.spl` widget code using the project's glass tokens, themes, and widget builders.

Do I need a Stitch API key to render glassmorphism component workflows?▼

Yes, rendering glassmorphism component workflows requires a STITCH_API_KEY to access the Stitch API, a GEMINI_API_KEY for Gemini design prompts, and a Stitch MCP entry to produce HTML/CSS and Simple widget artifacts.

Can I use Gemini to create both GUI and TUI screen designs for multi-screen workflows?▼

Yes, you can use Gemini to create both GUI and TUI screen designs for multi-screen workflows, as the skill generates UI mockups, component lists with props and states, and interaction-flow planning for both interface types.

Does Stitch MCP support dark and light glassmorphism theme variants?▼

Yes, Stitch MCP supports dark and light glassmorphism theme variants by rendering production-ready HTML/CSS prototypes from Gemini's design output for both glass_dark and glass_light themes.

Related Skills

Explore More Design & Creative Skills→
rafifosrafifos
6

design-md

Analyze Stitch projects to generate a semantic DESIGN.md design system document.

Community
Intermediate
telagodtelagod
238

glassmorphism

Standardize frosted-glass UI components with CSS tokens for blur, transparency, borders, and shadows.

Community
Intermediate
eliuhadseliuhads
2

design-md

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

Community
Advanced
ayesha-aziz123ayesha-aziz123
2

framer-motion

Automate Framer Motion animations for React and Next.js components.

Community
Intermediate