skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

stitch-ui-design

Generates structured prompts for Google Stitch AI UI design generation.

1|Updated Aug 17, 2025
Search Tags:#prompt engineering#responsive design#ui design#wireframe#google stitch#figma export#ai ui generator
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill stitch-ui-design-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-ui-design
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/stitch-ui-design
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill stitch-ui-design-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing vague prompts for Google Stitch produces generic, low-quality UI designs. This Skill provides structured prompting principles, templates, and examples so your text-to-UI generations produce specific, professional interfaces for web and mobile. ## Core Features & Use Cases - Prompt Structuring: Templates covering components, visual style, platform targets, and functional requirements for Stitch prompts. - Prompt Example Library: 30+ ready-to-adapt prompts for landing pages, mobile apps, dashboards, e-commerce, forms, and SaaS interfaces. - Advanced Workflows: Guidance on image-to-UI conversion, design system tokens, responsive breakpoints, accessibility (WCAG), and Stitch-to-Figma/code export handoff. - Use Case: You need a SaaS analytics dashboard. Instead of typing "create a dashboard", you apply the template specifying metric cards, chart types, dark mode styling, and desktop-first responsive behavior, then iterate with annotations. ## Quick Start Ask the AI to help you write a detailed Google Stitch prompt for your target screen, specifying its components, visual style, and platform.

Frequently Asked Questions about stitch-ui-design

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

FAQPage Schema
How do I write effective prompts for Google Stitch?▼

Effective Stitch prompts specify components, visual style, and platform explicitly. List key features with details, define colors and design aesthetic, state mobile or desktop targets, and describe interactions and states rather than using vague requests.

What is Google Stitch used for in UI design?▼

Google Stitch is an experimental AI UI generator powered by Gemini 2.5 Flash that converts text prompts and visual references into interface designs. It supports multi-screen flows, responsive layouts, and exports to HTML/CSS, Figma, and code.

Can Google Stitch convert sketches or wireframes into UI designs?▼

Yes, Stitch supports image-to-UI conversion from hand-drawn sketches, wireframes, and screenshots. Upload a clear image with labeled components and pair it with a text prompt describing the desired style and modifications.

How do I make Stitch designs responsive across devices?▼

Specify breakpoints and layout changes directly in the prompt, such as one-column grids on mobile and multi-column layouts on desktop. A mobile-first sequence works well: generate the 375px layout first, then adapt for tablet and desktop.

Why does Google Stitch produce generic-looking designs?▼

Generic output results from vague prompts lacking visual direction. Include a color palette, design aesthetic such as minimalist or glassmorphic, typography preferences, and concrete component details to get tailored results.

How do I export Google Stitch designs to Figma or code?▼

Stitch offers HTML/CSS export, a Paste to Figma option, and component-level code snippets. After export, refine the code with semantic HTML, accessibility attributes, and organized CSS before production use.

Related Skills

Explore More Design & Creative Skills→
InNoobWeTrustInNoobWeTrust
4

ai-ui-generation

Automates AI-generated UI integration into React/Next.js codebases with design constraints and QA checklists.

Community
Advanced
reason-machinesreason-machines
4

figma-bridge-html-export

Convert Figma designs into semantic HTML and CSS for LLM-assisted development.

Official
Intermediate
camilooscargbaptistacamilooscargbaptista
7

ux-review

Evaluate UI mockups for usability, accessibility, and interaction issues, producing prioritized recommendations.

Community
Intermediate
partme-aipartme-ai
610

uizard

Generate UI designs and wireframes from text prompts in Uizard.

Official
Basic