UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
$ npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install google-labs-code/stitch-skills enhance-prompt --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/stitch-utilities/skills/enhance-prompt .claude/skills/enhance-prompt && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "enhance-prompt" agent skill from https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-prompt into .claude/skills/enhance-prompt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "enhance-prompt", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-promptType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install google-labs-code/stitch-skills enhance-prompt --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/stitch-utilities/skills/enhance-prompt .agents/skills/enhance-prompt && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "enhance-prompt" agent skill from https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-prompt into .agents/skills/enhance-prompt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "enhance-prompt", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install google-labs-code/stitch-skills enhance-prompt --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/stitch-utilities/skills/enhance-prompt .cursor/skills/enhance-prompt && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "enhance-prompt" agent skill from https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-prompt into .cursor/skills/enhance-prompt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "enhance-prompt", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/google-labs-code/stitch-skills.git --path plugins/stitch-utilities/skills/enhance-prompt--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install google-labs-code/stitch-skills enhance-prompt --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/stitch-utilities/skills/enhance-prompt .gemini/skills/enhance-prompt && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "enhance-prompt" agent skill from https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-prompt into .gemini/skills/enhance-prompt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "enhance-prompt", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install google-labs-code/stitch-skills enhance-promptInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/stitch-utilities/skills/enhance-prompt .github/skills/enhance-prompt && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "enhance-prompt" agent skill from https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-prompt into .github/skills/enhance-prompt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "enhance-prompt", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install google-labs-code/stitch-skills enhance-prompt --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/stitch-utilities/skills/enhance-prompt .opencode/skills/enhance-prompt && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "enhance-prompt" agent skill from https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-prompt into .opencode/skills/enhance-prompt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "enhance-prompt", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
enhance-promptRewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
Given a rough UI idea, the skill checks what is missing: platform, page type, a logical structure of sections or components, visual style descriptors, specific colors, and proper UI component terminology, filling gaps by inference or by asking. It then checks the current project for a DESIGN.md file; when one exists, it reads out the color palette, typography and component styles and folds them into a required design-system section of the output, and when none exists it appends a tip suggesting a separate design-md skill to create one for consistency across screens.
The enhancement step replaces vague phrases with specific component names, for example turning menu at the top into a navigation bar with logo and menu items, or list of items into a card grid layout or a vertical list with thumbnails, using a bundled keywords reference. The skill also points to Stitch's own official prompting guide as a source of current best practices that may supersede its own patterns.
4 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 0337446. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteFrom allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
stitch.withgoogle.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Stitch Prompt Enhancer loads about 1.7k tokens when it runs, and up to ~2.3k if it reads all its reference files. Until then it costs about 52 tokens; SKILL.md has 534 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from google-labs-code/stitch-skills at commit 0337446, republished under its Apache-2.0 licence (© google-labs-code). 534 words, ~1,655 tokens.
.claude/skills/enhance-prompt/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.You are a Stitch Prompt Engineer. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.
Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
Activate when a user wants to:
Follow these steps to enhance any prompt:
Evaluate what's missing from the user's prompt:
| Element | Check for | If missing... |
|---|---|---|
| Platform | "web", "mobile", "desktop" | Add based on context or ask |
| Page type | "landing page", "dashboard", "form" | Infer from description |
| Structure | Numbered sections/components | Create logical page structure |
| Visual style | Adjectives, mood, vibe | Add appropriate descriptors |
| Colors | Specific values or roles | Add design system or suggest |
| Components | UI-specific terms | Translate to proper keywords |
Look for a DESIGN.md file in the current project:
If DESIGN.md exists:
If DESIGN.md does not exist:
---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md
file using the `design-md` skill. This ensures all generated pages share the
same visual language.Transform the input using these techniques:
Replace vague terms with specific component names:
| Vague | Enhanced |
|---|---|
| "menu at the top" | "navigation bar with logo and menu items" |
| "button" | "primary call-to-action button" |
| "list of items" | "card grid layout" or "vertical list with thumbnails" |
| "form" | "form with labeled input fields and submit button" |
| "picture area" | "hero section with full-width image" |
Add descriptive adjectives to set the mood:
| Basic | Enhanced |
|---|---|
| "modern" | "clean, minimal, with generous whitespace" |
| "professional" | "sophisticated, trustworthy, with subtle shadows" |
| "fun" | "vibrant, playful, with rounded corners and bold colors" |
| "dark mode" | "dark theme with high-contrast accents on deep backgrounds" |
Organize content into numbered sections:
**Page Structure:**
1. **Header:** Navigation with logo and menu items
2. **Hero Section:** Headline, subtext, and primary CTA
3. **Content Area:** [Describe the main content]
4. **Footer:** Links, social icons, copyrightWhen colors are mentioned, format them as:
Descriptive Name (#hexcode) for functional roleExamples:
Structure the enhanced prompt in this order:
[One-line description of the page purpose and vibe]
**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Light/Dark], [style descriptors]
- Background: [Color description] (#hex)
- Primary Accent: [Color description] (#hex) for [role]
- Text Primary: [Color description] (#hex)
- [Additional design tokens...]
**Page Structure:**
1. **[Section]:** [Description]
2. **[Section]:** [Description]
...Default: Return the enhanced prompt as text for the user to copy.
Optional file output: If the user requests, write to a file:
next-prompt.md — for use with the stitch-loop skillUser input:
"make me a login page"
Enhanced output:
A clean, trustworthy login page with a centered form and subtle branding.
**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Light, minimal, professional
- Background: Clean White (#ffffff)
- Surface: Soft Gray (#f9fafb) for form card
- Primary Accent: Deep Blue (#2563eb) for submit button and links
- Text Primary: Near Black (#111827) for headings
- Text Secondary: Medium Gray (#6b7280) for labels
- Buttons: Subtly rounded (8px), full-width on form
- Cards: Gently rounded (12px), soft shadow for elevation
**Page Structure:**
1. **Header:** Minimal logo, centered
2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
3. **Submit Button:** Primary blue "Sign In" button
4. **Footer:** "Don't have an account? Sign up" link
---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md
file using the `design-md` skill.User input:
"add a search bar"
Enhanced output:
Add a search bar to the header navigation.
**Specific changes:**
- Location: Header, right side before user avatar
- Style: Pill-shaped input with subtle gray background (#f3f4f6)
- Icon: Magnifying glass icon on the left, inside the input
- Placeholder: "Search..." in light gray (#9ca3af)
- Behavior: Expands on focus with subtle shadow
- Width: 240px default, 320px on focus
**Context:** This is a targeted edit. Make only this change while preserving all existing elements.© google-labs-code, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 2 other files (references) in plugins/stitch-utilities/skills/enhance-prompt of google-labs-code/stitch-skills.
Open the folder on GitHubat commit 0337446
We found 20 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 6 other GitHub owners. This page covers the copy in google-labs-code/stitch-skills, which our catalogue first saw on October 7, 2026.
Stitch Prompt Enhancer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Stitch Prompt Enhancer this skillgoogle-labs-code/stitch-skills | 8.4k | 6 repos | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Improve UI Audit and Plansibelick/ui-skills | 9.4k | — | ~2k | Automated safety check: Pass | MIT | |
| DaisyUI Component Librarysaadeghi/daisyui | 43k | — | ~1.3k | Automated safety check: Pass | MIT |
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
ibelick/ui-skills
Audits one product surface against its own design evidence and writes self-contained implementation plans for another agent, without touching product source.
saadeghi/daisyui
Official daisyUI skill for Tailwind CSS projects, routing to install, usage, configuration, color and per-component guides before writing any HTML or JSX with its classes.
bitjaru/styleseed
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…
google-labs-code/stitch-skills
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
google-labs-code/stitch-skills
Guides finding, installing, customizing and wiring up shadcn/ui components in a project, with MCP tools for the component catalog and registries.
google-labs-code/stitch-skills
Generates a DESIGN.md design-language file for Google Stitch that encodes color, typography, layout, component behavior and motion rules to avoid generic AI-looking UI.
google-labs-code/stitch-skills
Builds a website page by page with Stitch in an autonomous loop, passing a baton file from one iteration to the next that names the next page and prompt.
google-labs-code/stitch-skills
Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data.
google-labs-code/stitch-skills
Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop
Categories
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one. Given a rough UI idea, the skill checks what is missing: platform, page type, a logical structure of sections or components, visual style descriptors, specific colors, and proper UI component terminology, filling gaps by inference or by asking.md file; when one exists, it reads out the color palette, typography and component styles and folds them into a required design-system section of the output, and when none exists it appends a tip suggesting a separate design-md skill to create one for consistency across screens.
Stitch Prompt Enhancer fits situations like: polishing a rough UI idea before sending it to Stitch; fixing a Stitch prompt that produced poor results; adding a project's design system to a UI generation prompt automatically.
Run `npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a claude-code`. Or copy the skill folder (plugins/stitch-utilities/skills/enhance-prompt in google-labs-code/stitch-skills) into .claude/skills/enhance-prompt in your project. Claude Code loads it when a task matches its description.
Run `npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a codex`. Or copy the skill folder (plugins/stitch-utilities/skills/enhance-prompt in google-labs-code/stitch-skills) into .agents/skills/enhance-prompt in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/enhance-prompt, .gemini/skills/enhance-prompt, .github/skills/enhance-prompt and .opencode/skills/enhance-prompt in your project.
SKILL.md names no scripts, command-line tools or credentials: Stitch Prompt Enhancer is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write.
SKILL.md names 1 domain. As links in the text: stitch.withgoogle.com. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Stitch Prompt Enhancer is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 672 tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Stitch Prompt Enhancer: UI Styling (Ohh-889/skyroc, 795 stars), Design Dna (zanwei/design-dna, 1.9k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Improve UI Audit and Plans (ibelick/ui-skills, 9.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
google-labs-code (a GitHub organization, an official publisher) maintains it in google-labs-code/stitch-skills, which has 8,431 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on August 17, 2026.
Source: google-labs-code/stitch-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.