Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
acedergren avatar

Stitch Prompt Engineer

  • 10 installs
  • 22 repo stars
  • Updated May 28, 2026
  • acedergren/agentic-tools

stitch-prompt-engineer is a Claude Code skill that enhances and fixes Google Stitch UI-generation prompts with UI/UX vocabulary and hex-coded design tokens.

About

This skill enhances and fixes prompts used to generate UI in Google Stitch. It adds UI/UX vocabulary, injects design-system tokens, structures page hierarchy, and enforces hex color formatting. A developer uses it to turn a vague Stitch request into a precise prompt that produces consistent output. For multi-page projects it requires a DESIGN.md so tokens stay consistent across screens.

  • Enhances Stitch UI-generation prompts with UI/UX vocabulary and hex-coded tokens
  • Enforces DESIGN.md consistency for multi-page projects
  • Vocabulary-upgrade table turning vague requests into precise UI language

Stitch Prompt Engineer by the numbers

  • 10 all-time installs (skills.sh)
  • Ranked #1,450 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

stitch-prompt-engineer capabilities & compatibility

Capabilities
prompt engineering · ui generation · design tokens
Use cases
ui design · web design · copywriting
Pricing
Free
From the docs

What stitch-prompt-engineer says it does

**NEVER output colors as names** ("blue", "green") — always `Descriptive Name (#hexcode) for role`
SKILL.md
**NEVER skip DESIGN.md for multi-page projects** — consistency requires explicit tokens across screens
SKILL.md
npx skills add https://github.com/acedergren/agentic-tools --skill stitch-prompt-engineer

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs10
repo stars22
Last updatedMay 28, 2026
Repositoryacedergren/agentic-tools

What it does

Rewrite a Stitch UI-generation prompt with precise UI vocabulary and hex-coded design tokens.

Who is it for?

Rewriting vague Stitch prompts into structured prompts with precise UI vocabulary and design tokens.

Skip if: Extracting a design system (use stitch-design-system) or converting output to code (use stitch-to-react).

When should I use this skill?

When enhancing, polishing, or fixing Stitch UI generation prompts.

What you get

Prompts carry precise UI vocabulary, hex-coded tokens, and page structure for consistent Stitch output.

  • Enhanced Stitch prompt
  • Design-system block
  • Structured page hierarchy

By the numbers

  • 6-row assessment checklist
  • 8-row vocabulary-upgrade table

Files

SKILL.mdMarkdownGitHub ↗

Enhance Prompt for Stitch

NEVER

  • NEVER output colors as names ("blue", "green") — always Descriptive Name (#hexcode) for role
  • NEVER skip DESIGN.md for multi-page projects — consistency requires explicit tokens across screens
  • NEVER bundle unrelated enhancements in one pass — layout changes and color changes are separate asks
  • NEVER ignore an outdated DESIGN.md — surface the conflict to the user before proceeding
  • NEVER enhance without understanding intent — vague prompt often means unclear goal, not just poor wording
  • NEVER assume platform — if "web" vs "mobile" isn't clear, ask

Decision: Single Screen vs Multi-Page

Working on multiple screens?
│
├─ YES → Find DESIGN.md in project root
│   ├─ Found → Read it; include design system block as "DESIGN SYSTEM (REQUIRED)"
│   └─ Not found → Create it with `stitch-design-system` skill first
│
└─ NO → Skip DESIGN.md; proceed directly to enhancement

Assessment Checklist

Before enhancing, identify what's missing:

ElementIf missing...
PlatformAsk or infer from context
Page typeInfer ("landing page", "form", etc.)
StructureAdd numbered sections
Visual styleAdd mood adjectives
ColorsAdd hex-coded design tokens
ComponentsReplace vague nouns with UI vocabulary

Vocabulary Upgrades

VagueEnhanced
"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"
"modern""clean, minimal, with generous whitespace"
"professional""sophisticated, trustworthy, with subtle shadows"
"dark mode""dark theme with high-contrast accents on deep backgrounds"

Output Structure

[One-line description of page purpose and vibe]

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Light/Dark], [style descriptors]
- Background: [Name] (#hex)
- Primary Accent: [Name] (#hex) for [role]
- Text Primary: [Name] (#hex)
- Buttons: [corner radius], [width behavior]
- Cards: [corner radius], [elevation style]

**Page Structure:**
1. **[Section]:** [description]
2. **[Section]:** [description]

For targeted edits (not full-page prompts), include:

  • Exact location in UI
  • Style spec with hex codes
  • "Context: This is a targeted edit. Make only this change."

Troubleshooting

SymptomFix
Output doesn't match promptAdd numbered section structure for visual hierarchy
Colors apply inconsistentlyCreate/reference DESIGN.md with explicit hex tokens
Layout breaks across screensAdd "mobile-first" or "desktop-first" explicitly
Components look genericReplace "modern" with specific mood adjectives
Still poor results after enhanceReturn to DESIGN.md and validate consistency first

Output Format

Return enhanced prompt as text by default. If user requests file output: write next-prompt.md (for use with stitch-loop skill).

Related skills

FAQ

How should colors be written in a Stitch prompt?

Always as 'Descriptive Name (#hexcode) for role', never as bare color names like 'blue'.

When is a DESIGN.md required?

For multi-page projects, since consistency requires explicit design tokens shared across screens.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.