Transform Rough Ideas into Optimized Stitch UI Prompts

This skill turns vague UI ideas into polished prompts optimized for Stitch, Google's UI generation tool. The assistant acts as a Stitch prompt engineer: it enhances specificity, adds UI and UX keywords, injects design system context, and structures the output so generation results improve. Before enhancing, it should consult the official Stitch effective prompting guide, which may supersede or complement the patterns in the skill.

The enhancement pipeline has four steps:

1. Assess the input. Check for platform (web, mobile, desktop), page type (landing page, dashboard, form), structure (numbered sections), visual style, colors, and components, and fill in whatever is missing from context, infer it, or ask.
2. Check for a DESIGN.md file in the project. If it exists, read the design system block and include the color palette, typography, and component styles as a section labelled design system required. If it does not exist, add a closing tip suggesting the user create one with the design-md skill so that all generated pages share one visual language.
3. Apply enhancements. Replace vague terms with specific component names, for example "menu at the top" becomes a navigation bar with logo and menu items, and "button" becomes a primary call-to-action button. Amplify the vibe with descriptors, for example "modern" becomes clean, minimal, with generous whitespace, and "dark mode" becomes a dark theme with high-contrast accents on deep backgrounds. Organize content into numbered sections such as header, hero section, content area, and footer. Format colors as a descriptive name, hex code, and functional role.
4. Format the output in a fixed order: a one-line description of the page purpose and vibe, the design system block, then the page structure.

Use it when a user wants to polish a UI prompt before sending it to Stitch, improve a prompt that produced poor results, add design system consistency to a simple idea, or structure a vague concept into an actionable prompt.

Do not over-design when the user wants something simple. For edits, do one change at a time and do not bundle unrelated changes; in a targeted edit example, only a search bar is added while all existing elements are preserved. The skill is marked critical risk in its metadata, and it is limited to prompt text, not a substitute for expert review.

The input is a rough idea such as "make me a login page". The default output is the enhanced prompt as text for the user to copy. If requested, it can write the prompt to a file named next-prompt.md for use with the stitch-loop skill, or to a custom filename. The color format is:

Descriptive Name (#hexcode) for functional role

In the login page example, the enhanced prompt sets platform to web with desktop first, a light minimal professional theme, a white background, a soft gray form card surface, deep blue accents for the submit button, and rounded buttons and cards. Its page structure lists a minimal header, a centered login card with email and password fields and a forgot-password link, a primary sign-in button, and a footer sign-up link.

• Stitch, the target of the prompts, and its effective prompting guide.
• The design-md skill, which creates a DESIGN.md file.
• The stitch-loop skill, which consumes next-prompt.md.
• Read and Write tools, the only tools the skill declares.

Tips: be specific early because vague inputs need more enhancement, match the user's intent, keep the prompt structured with numbered sections so Stitch understands hierarchy, include the design system for multi-page consistency, and make one change at a time for edits.

It is for designers, product builders, and developers who use Stitch to generate interfaces and want consistent, high-quality results from short natural language requests.