skills.rest
khulnasoft-bot
khulnasoft-botCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

stitch::generate-design

Generate and edit UI design screens from text prompts or images using Stitch MCP.

Updated Jun 27, 2026
Search Tags:#ui design#ux#mockup#prompt enhancement#stitch mcp#screen generation#design variants
One-click install
npx skills add https://github.com/khulnasoft-bot/scalify --skill stitch-generate-design-khulnasoft-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch::generate-design
Source: https://github.com/khulnasoft-bot/scalify/tree/main/skills/plugins/stitch-design/skills/generate-design
Command: npx skills add https://github.com/khulnasoft-bot/scalify --skill stitch-generate-design-khulnasoft-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning vague design ideas into structured, professional UI screens requires design expertise and iterative refinement. This Skill bridges that gap by enhancing raw prompts with professional UI/UX terminology and orchestrating Stitch MCP tools to generate, edit, and vary design screens. ## Core Features & Use Cases - Prompt Enhancement Pipeline: Converts vague requests into structured prompts using design mappings and professional UI/UX keyword references, while keeping theme tokens out of generation prompts. - Four Generation Flows: Generate screens from text, recreate designs from uploaded images or mockups, edit existing screens with targeted prompts, and generate layout/color/content variants. - Asset Management: Downloads HTML and screenshot outputs to a local .stitch/designs directory and updates project metadata after edits. - Use Case: A founder describes a fitness app landing page in one sentence; the Skill enhances the prompt with structured page sections, generates the screen via Stitch MCP, downloads the HTML and screenshot, and iterates with targeted edits. ## Quick Start Ask the AI to generate a desktop landing page for your app idea using the Stitch generate-design skill, describing the page sections and content you want.

Frequently Asked Questions about stitch::generate-design

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

FAQPage Schema
How do I generate a UI design from a text prompt with Stitch?▼

Describe your page's purpose, platform, and structure, and the Skill enhances the prompt with professional UI/UX terminology before calling the generate_screen_from_text tool. The output includes HTML and screenshot assets downloaded to the .stitch/designs directory.

How to recreate a design from a screenshot or mockup in Stitch?▼

Upload the image to a Stitch project via the upload-to-stitch skill, which creates a new screen from the image. Then refine it with the edit_screens tool using a descriptive prompt explaining the intent behind the mockup.

Can I generate design variants of an existing screen?▼

Yes, the generate_variants tool produces 1-5 variants of a selected screen. You can control the creative range (REFINE, EXPLORE, or REIMAGINE) and focus on specific aspects like layout, color scheme, images, or text.

Why should generation prompts avoid hex codes and font names?▼

Design tokens such as colors, fonts, and roundness are applied at the project level by the manage-design-system skill. Including them in a generation prompt causes conflicts, so prompts should focus only on layout, content, and structure.

What are the limitations of editing Stitch screens?▼

Edits work best when focused on one targeted change at a time with specific location and visual details. If the fundamental layout is wrong, a full re-generation is more appropriate than repeated edits.

Related Skills

Explore More Design & Creative Skills→
tranhoainam298tranhoainam298
1

stitch::manage-design-system

Create, update, and apply Stitch design systems from DESIGN.md files using MCP tools.

Community
Intermediate
DozyboyDozyboy

hs:stitch

Generate UI designs from text prompts via Google Stitch and export Tailwind HTML.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

stitch::generate-design

Generate and edit UI screens from text prompts or images using Stitch MCP.

Official
Advanced
zakad00e2zakad00e2

design-taste-brutalism

Generate brutalist UI/UX designs with adjustable variance, motion, and density.

Community
Advanced