Authoring Stitch Prompts

Authoring Stitch Prompts

Quick Start

1. Collect context – accept natural language, specs, or referenced files describing the screen/app. 1.5. Discover design context (optional) – check for design-intent/:

• If exists: Extract Project Type, Design System from design-intent/memory/constitution.md
• If not found: Scan codebase for framework hints (package.json)
• Falls back gracefully to standalone mode
• See WORKFLOW.md for details.

2. Parse essentials – identify app type, screen focus, layout elements, and visual cues. 3. Detect split points – analyze if input contains multiple screens or distinct intents (>2). Apply smart defaults: split if >2 screens/intents, else combine. Users can request regeneration with different approach. 4. Filter aggressively – strip ALL non-UI concerns (backend, auth, APIs, caching, error handling, performance metrics, code-level specs). Focus EXCLUSIVELY on visual layout, components, colors, typography, spacing, and interaction patterns. 5. Condense – rewrite into one atomic Stitch directive using "Design/Create/Add…" phrasing. 6. Structure output – follow the Stitch prompt template (directive sentence → bullet list → 3–6 style cues → constraints). If design context was discovered, inject project-appropriate style cues. Do NOT use multi-section headings. 7. Validate – ensure UI nouns are present, word count <250, NO technical implementation terms, and format matches EXAMPLES.md structure before returning the prompt.

Use this Skill whenever users need Stitch-ready wording, prompt refinements, or style-consistent rewrites.

---

File Output

Prompts are saved to feature-based directories under design-intent/google-stitch/{feature}/:

• Feature name derived from screen/page purpose (kebab-case, semantic, concise)
• Prompt files: prompt-v{version}.md (auto-incremented from existing versions)
• Pre-created subdirectories: exports/ (Stitch outputs) and wireframes/ (reference mockups)
• File composition: <!-- Layout: {Name} --> header, then --- separators between component sections (<!-- Component: {Name} -->)
• 6-prompt Stitch limit: If >6 prompts, split into prompt-v{version}-part{N}.md files (max 6 per part)
• Copy-paste ready: Entire file works directly in Stitch interface

See WORKFLOW.md for detailed file composition rules, REFERENCE.md for Stitch best practices, and EXAMPLES.md for worked examples (Examples 14–16 cover multi-component and split scenarios).

---

Input Types

Accepted

• Natural-language descriptions (single screen or short flows)
• Markdown/YAML/JSON specs (/specs/dashboard.md)
• Revision directives ("move KPI cards above chart", "convert to French", "change button to green")
• References to uploaded wireframes or images
• Language conversion requests ("switch to Spanish", "German version")
• Structured input from /prompt command (see below)

---

Structured Input (from /prompt command)

When invoked via /prompt, the skill may receive pre-parsed preferences (Brief, Components, Style, Structure). Parse structured fields and apply style mappings before proceeding. See WORKFLOW.md for field handling and style mapping tables.

All input detail levels are valid — Stitch infers patterns from minimal descriptions. Use adjectives to convey vibe when details are sparse ("vibrant fitness app", "minimal meditation app").

---

Workflow Overview

High-level loop: parse → condense → format → validate. Detailed branching logic, including cue extraction and revision handling, lives in WORKFLOW.md.

---

Output Structure

Prompts must follow the Stitch-friendly template:

• One-sentence description of the app/screen + primary intent.
• Bullet list (3–6 items) covering layout, components, or flows.
• Visual style cues (palette, typography, density, tone).
• Optional behavior/constraint reminders (responsiveness, export format).

Reference templates/authoring-stitch-prompts-template.md for wording patterns and templates/layout-prompt-template.md for layout/foundation prompts.

---

Examples

Representative before/after samples (SaaS dashboard, banking app, iterative edits, spec conversions) are in EXAMPLES.md. Use them to mirror tone and formatting; keep this file lean by not re-embedding the full transcripts here.

---

Design Context Integration

When design-intent/ exists in the project, the skill enhances style cues with project context:

• Project Type influences tone (e.g., "enterprise-grade" for Enterprise, "friendly, approachable" for Consumer)
• Design System names appear in style cues (e.g., "Fluent UI styling", "Material Design patterns")

The skill does NOT inject specific tokens (hex colors, spacing values)—only high-level descriptors that help Stitch generate contextually appropriate designs.

Fallback behavior: If design-intent/ is not found, the skill works standalone using default style cues.

See WORKFLOW.md for discovery logic and WORKFLOW.md for injection rules.

---

MCP Integration (Optional)

When @_davideast/stitch-mcp is configured, prompts can be sent directly to Stitch for generation after authoring.

With MCP: Author prompt -> Generate screens -> Fetch images/code Without MCP: Author prompt -> Copy to Stitch manually

After authoring, offer: "Stitch MCP is available. Generate screens now? [Yes / No / Just save prompts]"

If accepted, invoke the generating-stitch-screens skill with the authored prompt file.

---

Common Issues

• Prompts too verbose – Re-run formatting with the template and trim narration. See TROUBLESHOOTING.md.
• Missing style cues – Derive palette/typography keywords from user input or prior session context before finalizing. See TROUBLESHOOTING.md.
• Multi-goal briefs – Split into multiple prompts; re-emphasize Stitch's atomic focus. See TROUBLESHOOTING.md.

---

Reference Files

For advanced usage:

• REFERENCE.md — Overview of Stitch best practices
• EXAMPLES.md — Sample transformations
• WORKFLOW.md — Detailed processing loop
• TROUBLESHOOTING.md — Error-handling guidance
• templates/authoring-stitch-prompts-template.md — Output format template

Google Stitch Prompt Examples

This file provides before/after examples demonstrating how to transform natural language or structured specs into optimized Stitch-ready prompts.

Claude uses these examples as reference for tone, structure, and style when authoring new prompts.

---

Example 1 — SaaS Analytics Dashboard

Input (natural language):

We need a web dashboard for our SaaS platform with metrics like MRR and churn rate.

It should feel professional but not boring, and show charts and cards for KPIs.

Optimized Stitch Prompt:

Design a responsive web dashboard for a SaaS analytics app.

Include:

- Left sidebar with logo and navigation (Overview, MRR, Churn, Cohorts, Settings)

- Top header with search, notifications, and user avatar

- Main dashboard with KPI cards (MRR, Active Users, Churn Rate, ARPU)

- Line chart for revenue over time and a table of recent subscriptions

Style: clean, minimal, enterprise-grade, neutral background with deep blue accents, sans-serif typography, subtle shadows.

Optimize for desktop first, single-column layout on mobile.

---

Example 2 — Mobile Banking App (screen-based)

Input (short brief):

Create a mobile banking interface with account overview, transaction list, and payments.

Optimized Stitch Prompt:

Design a mobile banking app with the following screens:

- Accounts Overview: balance summary, account cards, quick links for transfers

- Transactions: scrollable list with categories, amounts, and icons

- Payments: form for bill payment with amount, payee, and schedule fields

Style: modern, clean, deep teal accents, white background, geometric sans-serif type.

Use consistent 8px spacing and smooth animations between screens.

---

Example 3 — Dashboard Spec File Conversion

Input (`specs/marketing.md`):

# Marketing Analytics Dashboard
- Sidebar: Campaigns, Performance, Budgets
- Header: date range filter, search, notifications
- Main: performance chart + campaign cards
- Style: editorial, warm beige background, bold serif headings

Optimized Stitch Prompt:

Create a marketing analytics dashboard for a web app.

Include:

>

* Left sidebar with navigation (Campaigns, Performance, Budgets)

* Top header with date range filter, search, and notifications

* Main area with line chart of campaign performance and a 3-column grid of campaign cards

Style: editorial, warm beige background, bold serif headings, clean spacing, subtle shadows.

Optimize for desktop; single-column layout for mobile export.

---

Example 4 — Prompt Refinement (iterative edit)

Input (user revision):

On the dashboard, move the KPI cards above the chart and add a dropdown to filter by region.

Optimized Stitch Prompt:

On the dashboard screen, reposition KPI cards above the revenue chart.

Add a small dropdown labeled “Region” aligned right in the chart header.

Maintain existing typography, colors, and layout proportions.

Avoid regenerating the sidebar or other elements.

---

Example 5 — Prompt with Image Reference

Input:

Use the uploaded wireframe as base for a habit tracker app.

Keep bottom navigation, but make it more colorful and rounded.

Optimized Stitch Prompt:

Use the uploaded wireframe as the base layout for a mobile habit-tracking app.

Retain bottom navigation with four icons, add subtle labels underneath.

Use rounded cards for daily habits with progress rings.

Style: friendly, pastel purple and teal color palette, playful rounded typography, light shadows.

Focus on a calm, approachable tone suitable for everyday use.

---

Example 6 — Form-Based Workflow

Input (semi-structured spec):

screen: Onboarding
steps:
  - Welcome
  - Personal Info Form
  - Confirmation
theme: light, minimal, blue accents
layout: centered card

Optimized Stitch Prompt:

Design a 3-step onboarding flow for a web app.

Include:

>

* Step 1: Welcome screen with app logo and “Get Started” button

* Step 2: Personal info form with name, email, and password fields

* Step 3: Confirmation screen with success message and login link

Style: light, minimal, blue accents, centered card layout, rounded inputs, soft shadows.

Ensure consistent transitions between steps.

---

Usage Notes

When testing this Skill, you can use these example inputs directly:

Optimize this input into a Google Stitch prompt:
"A dashboard for subscription analytics with revenue chart and customer table."

Claude should automatically invoke the authoring-stitch-prompts Skill and return a concise, directive, and visually structured Stitch-ready output.

---

Example 7 — Multi-Prompt Split (Dashboard + Settings)

Input (natural language):

Create a SaaS app with a dashboard showing metrics and a settings page for user preferences.

Split Detection & Auto-Application:

This input contains 2 distinct screens:

1. Dashboard (metrics visualization)

2. Settings page (user preferences)

>

Applying smart default: Generate as 2 separate prompts for better atomicity.

Optimized Prompt 1 (Dashboard):

Design a responsive web dashboard for a SaaS analytics app.

Include: left sidebar (logo, navigation links), top header (search, notifications, user avatar), main section with KPI cards (MRR, Active Users, Churn Rate, ARPU), line chart for revenue over time.

Style: clean, minimal, enterprise-grade, neutral background with deep blue accents, sans-serif typography, subtle shadows.

Optimize for desktop first, single-column layout on mobile.

File Created: design-intent/google-stitch/dashboard/prompt-v1.md

Directory Created:

design-intent/google-stitch/dashboard/
├── prompt-v1.md
├── exports/
└── wireframes/

Note:

---
Additional prompts needed:
2. Settings page: User preferences with profile, notifications, billing
   → Will save as: settings/prompt-v1.md

Optimized Prompt 2 (Settings):

Design a settings page for user preferences in a SaaS app.

Include: left sidebar (Profile, Notifications, Billing, Security), main area with form sections for each category, save/cancel buttons at bottom.

Style: clean, minimal, neutral background, deep blue accents, sans-serif typography, clear section dividers.

Optimize for desktop, stack sections on mobile.

File Created: design-intent/google-stitch/settings/prompt-v1.md

Directory Created:

design-intent/google-stitch/settings/
├── prompt-v1.md
├── exports/
└── wireframes/

---

Example 8 — Single Screen, Multiple Intents

Input:

Article page with reading pane, comment section, and related articles grid.

Split Detection:

This input contains 3 distinct intents:

1. Content consumption (reading pane)

2. User engagement (comment section)

3. Content discovery (related articles grid)

>

Recommendation: Generate as 3 separate prompts for better atomicity.

Proceed with split? [Split / Combine]

User Response: Split

Optimized Prompt 1 (Reading Pane):

Design a reading pane for long-form article content on web.

Include: article title, author byline with avatar, publish date, featured image, formatted text with headings and paragraphs, inline images.

Style: editorial, serif headings (Georgia), sans-serif body (Helvetica), generous line spacing (1.6), max-width 720px, cream background.

Optimize for readability, responsive images.

Optimized Prompt 2 (Comment Section):

Design a comment section below article content.

Include: comment count header, comment thread with avatars and timestamps, nested replies (1 level), "Add Comment" form with textarea and submit button.

Style: clean, minimal, neutral gray background, sans-serif typography, subtle borders between comments.

Optimize for threaded discussions, keyboard navigation.

Optimized Prompt 3 (Related Articles Grid):

Design a related articles grid at page bottom.

Include: "Related Articles" heading, 3-column grid (stack on mobile) with thumbnail, title, excerpt (80 chars), read time badge.

Style: clean, neutral background, subtle card shadows, sans-serif typography, Ocean Blue (#005A8D) accents.

Optimize for mobile-first responsive layout.

Files Created:

• design-intent/google-stitch/reading-pane/prompt-v1.md
• design-intent/google-stitch/comments/prompt-v1.md
• design-intent/google-stitch/related-grid/prompt-v1.md

Directories Created: Each feature gets its own directory with exports/ and wireframes/ subdirectories.

---

Example 9 — Keep Together (Single Intent)

Input:

Login form with email, password, submit button, "Forgot password?" link, and "Sign up" link.

Split Detection:

This input contains 1 intent:

1. User authentication (login workflow)

>

All components serve a single goal. Recommendation: Keep as 1 prompt.

Optimized Prompt:

Design a login form for a web app.

Include: centered card with logo, email input field, password input field, "Sign In" button, "Forgot password?" link below, "Don't have an account? Sign up" link at bottom.

Style: clean, modern, centered layout, Ocean Blue (#005A8D) primary button, rounded inputs, subtle card shadow.

Optimize for mobile-first, full keyboard navigation.

File Created: design-intent/google-stitch/login/prompt-v1.md

Directory Created:

design-intent/google-stitch/login/
├── prompt-v1.md
├── exports/
└── wireframes/

---

Example 10 — Language Localization

Input:

Convert the login form prompt to Spanish

Optimized Prompt:

Design a login form for a web app with Spanish text.

Include: centered card with logo, email input field labeled "Correo electrónico", password input field labeled "Contraseña", "Iniciar sesión" button, "¿Olvidaste tu contraseña?" link below, "¿No tienes cuenta? Regístrate" link at bottom.

Style: clean, modern, centered layout, Ocean Blue (#005A8D) primary button, rounded inputs, subtle card shadow.

Optimize for mobile-first, full keyboard navigation.

File Created: design-intent/google-stitch/login/prompt-es-v1.md

Note:

• Technical UI terms (button, input field, card) remain in English—only user-facing labels are translated.
• Localized versions use language suffix: prompt-es-v1.md, prompt-fr-v1.md, etc.
• All versions stored in same feature directory (login/)

---

Example 11 — Image Modification

Input (Scenario 1):

On the dashboard, make the hero image smaller and add a subtle gradient overlay to match the blue theme

Optimized Prompt:

On the dashboard screen, resize the hero image to 60% width, add a subtle blue-to-transparent gradient overlay (Ocean Blue #005A8D at 20% opacity).

Maintain existing layout proportions for other elements.

Ensure image coordinates with the deep blue accent theme and modern aesthetic.

File Updated: design-intent/google-stitch/dashboard/prompt-v2.md

Note: Auto-increment detected existing prompt-v1.md, created prompt-v2.md in same directory. Both versions coexist:

design-intent/google-stitch/dashboard/
├── prompt-v1.md      ← Original version
├── prompt-v2.md      ← Updated version
├── exports/
└── wireframes/

---

Input (Scenario 2):

Replace all profile thumbnails with rounded versions and add a blue border

Optimized Prompt:

Update all user profile thumbnails to circular shape (border-radius: 50%).

Apply consistent 2px border in Ocean Blue (#005A8D).

Maintain existing thumbnail sizes and grid layout.

File Updated: design-intent/google-stitch/user-grid/prompt-v2.md

Note:

• Image modifications should be specific (which images), precise (what changes), and coordinated with the overall theme.
• Version history maintained in same directory for easy comparison

---

Example 12 — Minimal Input (High-Level)

Input (very minimal):

A professional project management dashboard

Optimized Prompt:

Design a responsive web dashboard for a professional project management tool.

Include: left sidebar with navigation (Projects, Tasks, Team, Reports), top header with search and notifications, main area with project cards showing status and progress bars, task timeline chart below cards.

Style: clean, professional, neutral gray background with blue accents, modern sans-serif typography, organized grid layout, subtle shadows.

Optimize for desktop first, mobile-responsive single-column layout.

Note: Stitch accepts minimal inputs—adjectives like "professional" guide visual direction when specific details aren't provided. The skill infers common patterns for the app type.

File Created: design-intent/google-stitch/pm-dashboard/prompt-v1.md

Directory Created:

design-intent/google-stitch/pm-dashboard/
├── prompt-v1.md
├── exports/
└── wireframes/

---

Example 13 — Micro-Refinements (Small Changes)

Input (Scenario 1):

Change the primary button color to green

Optimized Prompt:

Update the primary "Sign In" button color to Forest Green (#228B22).

Maintain all other colors, layout, and typography.

File Updated: design-intent/google-stitch/login-form/prompt-v2.md

---

Input (Scenario 2):

Move the search bar to the left side of the header

Optimized Prompt:

Reposition the search bar to the left side of the header, before the logo.

Keep all other header elements (notifications, user avatar) in current positions.

File Updated: design-intent/google-stitch/header/prompt-v3.md

Note: Micro-refinements focus on single, specific changes while explicitly maintaining all other existing elements.

---

Example 14 — Multi-Component Dashboard (Feature Directory Format)

Input:

Create an analytics dashboard with KPI cards at the top, a revenue chart on the left, and a subscriptions table on the right

Detection:

• Multiple components: KPI cards, revenue chart, subscriptions table (3 components)
• Full page keyword: "dashboard"
• Multiple regions: top section, left side, right side
• Total: 4 prompts (layout + 3 components) - within 6-prompt limit ✓
• Generates feature directory with prompt file and subdirectories

Directory Created: design-intent/google-stitch/dashboard/

File Generated: dashboard/prompt-v1.md

File Content:

<!-- Layout: Analytics Dashboard -->
Design a web dashboard page for SaaS analytics overview.

Include:
- Top section with key performance metrics (4-column grid spanning full width, cards displaying primary KPIs)
- Main content area with revenue analytics chart (below metrics, left side 60% width, interactive time controls)
- Side panel with recent subscription activity (right of chart, 40% width, scrollable list)

Interactions:
- Metric cards filter chart and activity panel when clicked
- Chart time range selector updates entire page data
- Activity panel scrolls independently from main content

Style: clean dashboard aesthetic, ample whitespace, card-based sections, subtle depth

Optimize for desktop-first responsive layout, smooth transitions between filtered states

---

<!-- Component: KPI Metrics -->
Design metric cards displaying key SaaS performance indicators.

Include:
- Four cards showing revenue, active users, churn rate, and MRR
- Each card with large primary number, label, and delta percentage
- Sparkline chart showing 7-day trend below each metric
- Color-coded delta indicators (green for positive, red for negative)
- Clickable cards that act as filters

Style: minimal cards, light background, prominent numbers, subtle borders, blue accent for positive trends

Optimize for responsive 4-column grid on desktop, 2-column on tablet, single-column on mobile

---

<!-- Component: Revenue Chart -->
Design an interactive line chart for monthly revenue tracking.

Include:
- Line chart with monthly data points for current year
- Time range selector (7D, 30D, 90D, 1Y, All)
- Hover tooltips showing exact values and dates
- Y-axis with formatted currency labels
- Vertical grid lines for readability
- Highlighted current month with annotation

Style: clean chart design, blue line color, light gray gridlines, smooth curves, professional typography

Optimize for responsive scaling, touch-friendly hover states on mobile

---

<!-- Component: Subscription Activity -->
Design a subscription activity table showing recent changes.

Include:
- Scrollable list of recent subscriptions (upgrades, downgrades, cancellations)
- Each row with user avatar, name, action type, plan name, and timestamp
- Status badges (upgraded, downgraded, cancelled) with color coding
- Sort controls for date and action type
- Show 10 items with "Load more" button at bottom

Style: compact table design, neutral backgrounds, green/yellow/red status badges, small avatar thumbnails

Optimize for fixed height with internal scrolling, responsive single-column on mobile

Presentation:

📂 Feature: dashboard/
📄 File: prompt-v1.md

Contains 4 prompts (within 6-prompt limit ✓):
  • Layout: Analytics Dashboard
  • Component: KPI Metrics
  • Component: Revenue Chart
  • Component: Subscription Activity

Directory structure:
  design-intent/google-stitch/dashboard/
  ├── prompt-v1.md      ← Generated prompt
  ├── exports/          ← Place Stitch outputs here
  └── wireframes/       ← Place mockups/references here

Usage:
  1. Copy prompt file → Paste into Stitch → Generate designs
  2. Save Stitch exports to exports/ directory
  3. Store wireframes/mockups in wireframes/ directory

Key Points:

• Feature directory groups all related artifacts
• Single file contains all prompts separated by ---
• HTML comment labels for easy navigation
• Layout uses generic terms (no file references)
• Pre-created subdirectories for exports and wireframes
• Each prompt independently usable when separated
• File can be copy-pasted directly into Stitch
• Total 4 prompts stays within Stitch's 6-screen limit

---

Example 15 — Two-Region Landing Page (Feature Directory Format)

Input:

Landing page with hero section and feature highlights grid below it

Detection:

• Multiple components: hero section, feature grid (2 components)
• Full page keyword: "landing page"
• Multiple regions: hero, features section
• Total: 3 prompts (layout + 2 components) - within 6-prompt limit ✓
• Generates feature directory with prompt file and subdirectories

Directory Created: design-intent/google-stitch/landing/

File Generated: landing/prompt-v1.md

File Content:

<!-- Layout: Landing Page -->
Design a responsive web landing page for SaaS product marketing.

Include:
- Hero section with headline and primary call-to-action (full width, above fold, centered content)
- Feature highlights grid below hero (3-column layout on desktop, icon-led feature descriptions)

Interactions:
- Hero CTA button scrolls smoothly to feature section when clicked
- Feature cards expand slightly on hover to reveal more detail

Style: modern design, bold typography, vibrant blue gradient hero background, white feature section

Optimize for mobile-first responsive design, single-column stacked layout on mobile, smooth scroll behavior

---

<!-- Component: Hero Section -->
Design a hero section for SaaS product landing page.

Include:
- Large headline emphasizing main value proposition
- Supporting subheadline with brief product description
- Primary CTA button ("Start Free Trial") with high contrast
- Secondary text link below CTA ("See demo video")
- Product screenshot or illustration on right side (desktop only)

Style: bold sans-serif headline, vibrant blue gradient background, white text, prominent orange CTA button, clean spacing

Optimize for centered single-column on mobile, two-column on desktop with text left and image right

---

<!-- Component: Feature Grid -->
Design a feature highlights grid showcasing product capabilities.

Include:
- Three feature cards in horizontal grid layout
- Each card with icon, feature title, short description (2-3 sentences)
- Icons in circular backgrounds with brand color
- Cards with subtle shadow and rounded corners
- Equal height cards with consistent spacing

Style: clean white cards, subtle shadows, blue circular icon backgrounds, dark text, generous padding

Optimize for 3-column grid on desktop, 2-column on tablet, single-column on mobile, equal card heights

Presentation:

📂 Feature: landing/
📄 File: prompt-v1.md

Contains 3 prompts (within 6-prompt limit ✓):
  • Layout: Landing Page
  • Component: Hero Section
  • Component: Feature Grid

Directory structure:
  design-intent/google-stitch/landing/
  ├── prompt-v1.md      ← Generated prompt
  ├── exports/          ← Place Stitch outputs here
  └── wireframes/       ← Place mockups/references here

Usage:
  1. Copy prompt file → Paste into Stitch → Generate designs
  2. Save Stitch exports to exports/ directory
  3. Store wireframes/mockups in wireframes/ directory

Key Points:

• Simpler example with just 3 total prompts shows scalability
• Feature directory organizes all page artifacts
• Single file contains all prompts separated by ---
• Layout describes high-level interactions (CTA scroll, hover effects)
• Component prompts add specific implementation details
• Pre-created subdirectories for exports and wireframes
• File can be copy-pasted directly into Stitch

---

Example 16 — Large Multi-Component Split (>6 Prompts)

Input:

Create an admin panel with navigation sidebar, dashboard overview, user management table, role permissions matrix, system settings form, audit logs viewer, and notification center

Detection:

• Multiple components: navigation, dashboard, users, roles, settings, audit logs, notifications (7 components)
• Full page keyword: "admin panel"
• Total: 8 prompts (layout + 7 components) - exceeds 6-prompt limit ⚠️
• Generates feature directory with multiple part files

Directory Created: design-intent/google-stitch/admin-panel/

File Generated Part 1: admin-panel/prompt-v1-part1.md

File Content:

<!-- Layout: Admin Panel -->
Design a comprehensive web admin panel for application management.

Include:
- Left sidebar with navigation menu (fixed width 240px, icons + labels for Dashboard, Users, Roles, Settings, Logs, Notifications)
- Top header bar spanning full width (breadcrumbs, search, user profile dropdown)
- Main content area for active section (right of sidebar, responsive width, scrollable content)

Interactions:
- Sidebar navigation highlights active section
- Main content area updates when navigation items clicked
- Header breadcrumbs reflect current section hierarchy
- All data tables support sorting, filtering, and pagination

Style: clean enterprise interface, neutral gray sidebar (#F8F9FA), white main area, Ocean Blue (#005A8D) accents, modern sans-serif typography

Optimize for desktop-first layout, collapsible sidebar on tablet, hamburger menu on mobile

---

<!-- Component: Navigation Sidebar -->
Design a navigation sidebar for admin panel.

Include:
- Logo and app name at top
- Vertical menu with 6 items (Dashboard, Users, Roles, Settings, Logs, Notifications)
- Each item with icon and label
- Active state highlighting
- Collapse/expand toggle button at bottom
- Version number at footer

Style: light gray background (#F8F9FA), dark text (#212529), Ocean Blue (#005A8D) active state, icons from modern icon set, 16px spacing between items

Optimize for fixed positioning, smooth transitions on hover/active, keyboard navigation support

---

<!-- Component: Dashboard Overview -->
Design an admin dashboard overview with key metrics.

Include:
- 4 metric cards in horizontal row (Total Users, Active Sessions, System Health, Storage Used)
- Each card with large number, label, trend indicator (up/down arrow), and sparkline chart
- Activity timeline below cards showing recent admin actions
- System status panel on right (server status, database status, API status with colored indicators)

Style: white card backgrounds, subtle shadows, Ocean Blue (#005A8D) for positive trends, red for alerts, green for healthy status

Optimize for responsive 4-column grid on desktop, 2-column on tablet, single-column on mobile

---

<!-- Component: User Management Table -->
Design a user management table with actions.

Include:
- Search and filter controls above table (search by name/email, filter by role/status)
- Table columns: Avatar, Name, Email, Role, Status, Last Login, Actions
- Inline actions per row (Edit, Delete, Reset Password icons)
- Bulk actions toolbar when rows selected (Delete, Export, Change Role)
- Pagination controls at bottom (showing 25 per page, total count)
- "Add New User" button at top right

Style: clean table design, alternating row colors, hover highlight, Ocean Blue (#005A8D) action icons, status badges (green Active, gray Inactive, red Suspended)

Optimize for responsive table with horizontal scroll on mobile, sticky header row

---

<!-- Component: Role Permissions Matrix -->
Design a role permissions configuration matrix.

Include:
- Roles as rows (Admin, Manager, Editor, Viewer, Guest)
- Permission categories as columns (Users, Content, Settings, Reports, System)
- Checkbox toggles at intersections for granular permissions
- "Select All" checkboxes for rows and columns
- Save/Cancel buttons at bottom
- Permission descriptions on hover tooltips

Style: grid layout with borders, checkboxes in Ocean Blue (#005A8D), alternating row backgrounds, clear visual hierarchy

Optimize for wide desktop layout, simplified mobile view with expandable role sections

---

<!-- Component: System Settings Form -->
Design a system settings configuration form.

Include:
- Tabbed sections (General, Security, Email, Integrations, Advanced)
- Each tab with relevant form fields (text inputs, toggles, dropdowns, file uploads)
- Field validation indicators and help text
- "Save Changes" and "Reset to Defaults" buttons at bottom
- Change notification banner when unsaved changes present

Style: clean form layout, single-column with labels above fields, Ocean Blue (#005A8D) for toggle switches, subtle borders, clear section dividers

Optimize for vertical scroll, sticky save buttons, responsive single-column on mobile

Presentation:

📂 Feature: admin-panel/
📄 File: prompt-v1-part1.md

Contains 6 prompts (Stitch limit reached ✓):
  • Layout: Admin Panel
  • Component: Navigation Sidebar
  • Component: Dashboard Overview
  • Component: User Management Table
  • Component: Role Permissions Matrix
  • Component: System Settings Form

⚠️ This page requires 8 total prompts - additional components in part2

---

File Generated Part 2: admin-panel/prompt-v1-part2.md

File Content:

<!-- Component: Audit Logs Viewer -->
Design an audit logs viewer with filtering and search.

Include:
- Date range selector at top (preset ranges: Today, Last 7 Days, Last 30 Days, Custom)
- Filter controls (by user, action type, resource type, severity level)
- Log entries table with columns: Timestamp, User, Action, Resource, Details, IP Address
- Expandable rows showing full event details in JSON format
- Export button for filtered results (CSV, JSON formats)
- Real-time log streaming toggle

Style: monospace font for log details, color-coded severity badges (green Info, yellow Warning, red Error), compact table design, dark text on light background

Optimize for horizontal scroll on narrow screens, sticky filter controls, efficient rendering for large datasets

---

<!-- Component: Notification Center -->
Design a notification center panel for system alerts.

Include:
- Notification list with timestamps and icons (newest first)
- Notification types: System alerts, user activity, security events, scheduled tasks
- Mark as read/unread toggle per notification
- "Mark all as read" and "Clear all" buttons at top
- Filter by notification type dropdown
- Unread count badge
- Individual notification actions (View Details, Dismiss, Snooze)

Style: card-based list layout, unread notifications with blue left border, icons color-coded by type (blue info, yellow warning, red critical), relative timestamps

Optimize for scrollable panel with lazy loading, real-time updates via WebSocket, mobile-friendly tap targets

Presentation:

📂 Feature: admin-panel/
📄 File: prompt-v1-part2.md

Contains 2 prompts (remainder):
  • Component: Audit Logs Viewer
  • Component: Notification Center

Directory structure:
  design-intent/google-stitch/admin-panel/
  ├── prompt-v1-part1.md    ← First 6 prompts
  ├── prompt-v1-part2.md    ← Remaining 2 prompts
  ├── exports/              ← Place Stitch outputs here
  └── wireframes/           ← Place mockups/references here

⚠️ Warning: Use part1 first in Stitch, then part2 in separate session
Total: 8 prompts across 2 files

Usage Workflow:

Step 1: Copy admin-panel/prompt-v1-part1.md → Paste into Stitch
        → Generates layout + first 5 components (6 screens)

Step 2: Copy admin-panel/prompt-v1-part2.md → Paste into Stitch
        → Generates remaining 2 components

Step 3: Save all Stitch exports to admin-panel/exports/ directory

Result: Complete 8-screen admin panel (processed in 2 batches)

Key Points:

• Demonstrates automatic splitting when >6 prompts detected
• Feature directory contains all part files and subdirectories
• Part 1 always includes layout + first 5 components (6 total)
• Part 2 contains remaining components (max 6 per part)
• Clear warnings about sequential processing requirement
• Each file independently copy-pasteable into Stitch
• Part numbering makes processing order explicit (part1, part2)
• Pre-created subdirectories for exports and wireframes
• Total prompt count communicated clearly to user

---

Example 17 — Design-Aware Prompt (Enterprise + Fluent UI)

Context Detected:

Design Context Discovered:
- Source: design-intent/memory/constitution.md
- Project Type: Enterprise
- Design System: Fluent UI

Will inject: "enterprise-grade, professional, Fluent UI styling"

Input:

Create a dashboard showing customer metrics and recent activity

Optimized Stitch Prompt (Design-Aware):

Design a responsive web dashboard for customer analytics overview.

>

Include:

- Left sidebar with navigation (Overview, Customers, Analytics, Settings)

- Top header with search bar and user avatar

- Main section with KPI cards (Total Customers, Active Users, Churn Rate, NPS Score)

- Activity table below cards showing recent customer interactions

>

Style: enterprise-grade, professional, Fluent UI styling, deep blue accents, clean sans-serif typography, data-dense layout, subtle borders, organized grid.

>

Optimize for desktop-first, keyboard navigation, clear information hierarchy.

File Created: design-intent/google-stitch/dashboard/prompt-v1.md

Note: Style cues "enterprise-grade, professional, Fluent UI styling" were injected from design context. User-provided details and Stitch defaults handle specific values.

---

Example 18 — Design-Aware Prompt (Consumer + Material UI)

Context Detected:

Design Context Discovered:
- Source: design-intent/memory/constitution.md
- Project Type: Consumer
- Design System: Material UI

Will inject: "friendly, approachable, Material Design patterns"

Input:

Recipe app with cooking timer and ingredient checklist

Optimized Stitch Prompt (Design-Aware):

Design a mobile recipe detail screen for a cooking app.

>

Include:

- Hero image of dish at top with overlay title

- Recipe timing badges (prep time, cook time, servings)

- Ingredient checklist with checkboxes

- Step-by-step instructions with expandable sections

- Floating action button for starting timer

>

Style: friendly, approachable, Material Design patterns, warm color palette, generous whitespace, rounded corners, playful iconography, smooth transitions.

>

Optimize for mobile-first, touch-friendly 44px targets, single-column layout.

File Created: design-intent/google-stitch/recipe-detail/prompt-v1.md

Note: Style cues "friendly, approachable, Material Design patterns" were injected from design context.

---

Example 19 — Standalone Mode (No Design Context)

Context Detected:

Design Context: Not found (standalone mode)

Input:

Landing page for a new product launch

Optimized Stitch Prompt (Standalone):

Design a responsive web landing page for product launch.

>

Include:

- Hero section with headline, subheadline, and primary CTA button

- Feature grid with 3 icon-led cards

- Social proof section with testimonial carousel

- Footer with links and social icons

>

Style: clean, modern, neutral background with accent color, sans-serif typography, subtle shadows, balanced whitespace.

>

Optimize for mobile-first responsive design, clear visual hierarchy.

File Created: design-intent/google-stitch/landing/prompt-v1.md

Note: No design context found. Style cues use neutral defaults that work for any project.

---

Example 20 — Partial Context (Design System Only from package.json)

Context Detected:

Design Context Discovered:
- Source: package.json (fallback detection)
- Project Type: Unknown
- Design System: Tailwind CSS

Will inject: "modern Tailwind aesthetic"

Input:

Settings page with profile, notifications, and security tabs

Optimized Stitch Prompt (Partial Context):

Design a settings page with tabbed navigation for web application.

>

Include:

- Horizontal tab bar (Profile, Notifications, Security, Billing)

- Main content area showing active tab content

- Form fields for each section with labels

- Save and Cancel buttons at bottom

>

Style: clean, modern Tailwind aesthetic, utility-first styling, neutral grays with accent highlights, compact form layout, clear section dividers.

>

Optimize for responsive layout, keyboard navigation, accessible form fields.

File Created: design-intent/google-stitch/settings/prompt-v1.md

Note: Only design system detected from package.json. Project type defaults omitted, design system name injected.

---

Example 21 — Interactive Flow via /prompt Command

Demonstrates how the /prompt command gathers user preferences before invoking the skill.

User runs:

/prompt "dashboard for fitness app"

Step 1: Command detects components

I detected these components from your brief:

• Activity Summary: Daily progress cards (steps, calories, active minutes)
• Workout Chart: Exercise history visualization
• Goals Progress: Goal completion indicators

Which components should I include in the Stitch prompt?

→ All components (recommended)
→ Select specific components
→ Add more components
→ Quick generation (skip all questions, use smart defaults)

User selects: All components (recommended)

Step 2: Command asks about style

What visual style should these prompts target?

→ Enterprise (professional, data-dense, formal)
→ Consumer (friendly, approachable, vibrant)
→ Minimal (clean, simple, lots of whitespace)
→ Playful (colorful, fun, animated feel)
→ Custom (describe your preference)

User selects: Consumer (friendly, approachable, vibrant)

Step 3: Command asks about structure

How should I structure the output for 4 components?

→ Combined (single file with layout + all components)
→ Split (separate prompt per component)
→ Auto-detect (let skill decide based on complexity)

User selects: Combined (single file with layout + all components)

Structured input passed to skill:

Brief: dashboard for fitness app
Components: activity-summary, workout-chart, goals-progress
Style: Consumer
Structure: Combined

Skill generates (with user preferences applied):

<!-- Layout: Fitness Dashboard -->
Design a responsive mobile dashboard for a fitness tracking app.

Include:
- Top section with daily activity summary (step count, calories, active minutes in card format)
- Main content area with workout history chart (weekly view, bar/line hybrid)
- Bottom section with goal progress indicators (circular progress rings)
- Floating action button for logging new workout

Interactions:
- Activity cards update in real-time
- Chart supports swipe gestures for date navigation
- Goal rings animate on achievement

Style: friendly, approachable, vibrant accents, generous whitespace, energetic color palette, smooth transitions

Optimize for mobile-first, touch-friendly interactions, dark mode support

---

<!-- Component: Activity Summary -->
Design activity summary cards for fitness dashboard.

Include:
- Three cards showing steps, calories burned, and active minutes
- Each card with large number, icon, and daily goal percentage
- Subtle animation on value changes
- Tap to expand for weekly breakdown

Style: friendly, approachable, vibrant gradients, rounded corners, playful icons

Optimize for glanceable information, high contrast for outdoor visibility

---

<!-- Component: Workout Chart -->
Design a workout history chart for fitness tracking.

Include:
- Weekly bar chart showing workout duration per day
- Line overlay showing intensity trend
- Date range selector at top
- Tap on bar for workout details

Style: friendly, approachable, clean chart lines, vibrant accent colors, smooth animations

Optimize for touch interactions, accessible color coding

---

<!-- Component: Goals Progress -->
Design goal progress indicators for fitness dashboard.

Include:
- Circular progress rings for each active goal
- Goal name and current/target values below each ring
- Celebration animation when goal achieved
- Tap to view goal details and history

Style: friendly, approachable, gradient-filled progress rings, motivational micro-copy

Optimize for motivational feedback, accessibility for color-blind users

File Created: design-intent/google-stitch/fitness-dashboard/prompt-v1.md

Key Points:

• User selected "Consumer" style → "friendly, approachable, vibrant" applied throughout
• User selected "Combined" → Single file with all components using --- separators
• All 4 components included as user selected "All components"
• Questions were asked because this was a new generation (not a revision)

---

Example 22 — Quick Generation (Skip Questions)

User runs:

/prompt "e-commerce product page"

Step 1: Command asks about components

User selects: Quick generation (skip all questions, use smart defaults)

Result: Command skips remaining questions, uses smart defaults:

• Components: All detected
• Style: Auto (from design context or neutral defaults)
• Structure: Auto (skill decides based on complexity)

Input passed to skill:

e-commerce product page

Skill generates: Standard product page prompt using autonomous workflow (same as pre-interactive behavior)

Note: "Quick generation" option allows users who prefer speed to bypass all questions.

---

Example 23 — Revision Request (Questions Skipped)

User runs:

/prompt "change the header to sticky and add a search bar"

Detection: Input starts with "change" — classified as revision request

Result: All interactive questions skipped automatically

Skill generates:

On the current screen, update the header component:
- Make header position sticky (fixed to top on scroll)
- Add search bar to header (right side, with magnifying glass icon)
- Maintain all other header elements unchanged

Style: Match existing header styling, subtle shadow on scroll

Optimize for smooth scroll behavior, accessible search input

Note: Revision requests skip interactive flow because they're targeted edits to existing prompts, not new generations requiring preference gathering.

---

Example 24 — Full MCP Pipeline (Author + Generate)

Demonstrates the end-to-end flow when Stitch MCP is configured.

User runs:

/prompt "dashboard for fitness app"

Steps 1-7: Standard interactive flow (same as Example 21).

Step 8: MCP Generation Offer

After prompt file is created, MCP tools are detected:

Stitch MCP is available. Generate screens from this prompt?
  → Yes (generate screens in Stitch now)
  → No (just keep the prompt file)

User selects: Yes

Generation Flow: 1. Prompt file parsed: 4 sections (layout + 3 components) 2. Project created: "Fitness Dashboard Design" 3. Screens generated via MCP:

   [1/4] Generating: Layout: Fitness Dashboard...
   [2/4] Generating: Component: Activity Summary...
   [3/4] Generating: Component: Workout Chart...
   [4/4] Generating: Component: Goals Progress...

4. Images fetched and saved

Final Output:

Prompt authored and screens generated.

Prompt: design-intent/google-stitch/fitness-dashboard/prompt-v1.md
Project: Fitness Dashboard Design

Screens (4/4):
  1. Layout: Fitness Dashboard       -> exports/fitness-dashboard.png
  2. Component: Activity Summary     -> exports/activity-summary.png
  3. Component: Workout Chart        -> exports/workout-chart.png
  4. Component: Goals Progress       -> exports/goals-progress.png

Directory:
  design-intent/google-stitch/fitness-dashboard/
  ├── prompt-v1.md
  └── exports/
      ├── fitness-dashboard.png
      ├── activity-summary.png
      ├── workout-chart.png
      └── goals-progress.png

Next steps:
  - Review exported images in exports/
  - Iterate: /prompt "adjust the activity cards layout"
  - Re-generate: /stitch-generate @design-intent/google-stitch/fitness-dashboard/prompt-v1.md

Key Points:

• MCP generation is offered as a seamless extension of the /prompt workflow
• Same prompt authoring quality — MCP adds automated generation on top
• Images saved to the same feature directory structure
• User can iterate and re-generate from authored prompts

---

Example 25 — No MCP Fallback (Standard Prompt Output)

Same input as Example 24, but MCP is NOT configured.

User runs:

/prompt "dashboard for fitness app"

Steps 1-7: Standard interactive flow produces prompt file.

Step 8: MCP tools not detected. Step is silently skipped — no error, no warning.

Final Output:

📂 Feature: fitness-dashboard/
📄 File: prompt-v1.md

Contains 4 prompts (within 6-prompt limit ✓):
  • Layout: Fitness Dashboard
  • Component: Activity Summary
  • Component: Workout Chart
  • Component: Goals Progress

Directory structure:
  design-intent/google-stitch/fitness-dashboard/
  ├── prompt-v1.md      ← Generated prompt
  ├── exports/          ← Place Stitch outputs here
  └── wireframes/       ← Place mockups/references here

Usage:
  1. Copy prompt file → Paste into Stitch → Generate designs
  2. Save Stitch exports to exports/ directory
  3. Store wireframes/mockups in wireframes/ directory

Key Points:

• No mention of MCP, no error, no "MCP not configured" warning
• Fully functional standalone output with copy-paste instructions
• Same prompt quality regardless of MCP availability
• User can set up MCP later via /stitch-setup to unlock automated generation

Google Stitch Prompt Authoring Reference

This document summarizes Google Stitch's official prompt authoring best practices for UI generation. Use it whenever transforming text or specs into optimized Stitch prompts.

---

Core Goal

Turn natural language or design specs into short, directive, atomic prompts for Stitch that produce clean UI layouts and exportable code.

---

1. Stitch Prompt Fundamentals

Stitch prompt = UI specification in natural language, not chat instructions. It defines:

• App concept and flow
• Layout structure
• Visual style and tone
• Export / handoff details

Output type: UI layouts + front-end code (HTML/CSS/JSX) + Figma components.

---

2. Structure of a Strong Stitch Prompt

Always include these sections:

1. Purpose / context: What app or screen you’re designing 2. Layout directives: Key sections, hierarchy, and relationships 3. Visual style cues (3–6): Color, typography, mood, tone 4. Constraints: Responsiveness, export goals, or platform (web, mobile) 5. (Optional) Specific change instructions (for iterative edits)

Example:

Design a responsive web dashboard for a SaaS analytics app.

Include: sidebar navigation, header with search + user menu, KPI cards, revenue chart.

Style: minimal, enterprise, cool blue tones, modern sans-serif font.

Optimize for desktop first, mobile single-column layout.

---

3. Prompting Principles

---

4. Layout Prompts: Foundation/Wireframe Approach

When generating prompts for multi-component pages (2+ components or full screens), create two types of prompts:

1. Layout prompt — Foundation/wireframe showing spatial structure 2. Component prompts — Detailed specifications for individual elements

Purpose of Layout Prompts

Layout prompts create the high-level page structure that:

• Shows spatial relationships between major regions
• Defines page-level interactions and user flows
• Uses generic descriptive terms (NOT file/component references)
• Works independently in Stitch as a standalone foundation prompt
• Can be enhanced later with detailed component prompts

Key Characteristics

Generic Terminology Guidelines

✅ Use generic descriptive terms:

• "key performance metrics section" (purpose-focused)
• "analytics chart area" (function-focused)
• "activity feed panel" (content-focused)
• "top section", "main content area", "side panel" (position-focused)

❌ Avoid file/component references:

• "kpi-cards component" (references specific component)
• "revenue-chart-v1" (references file name)
• "subscription-table component" (references implementation)

Layout Prompt Structure

Design a [platform] [page/screen type] for [purpose].

Include:
- [Region] with [generic description] ([spatial position], [key behavior])
- [Region] with [generic description] ([relative position], [interaction])
- [Region] for [purpose] ([position], [relationship to others])

Interactions:
- [How regions relate/communicate at high level]
- [Primary user flows between sections]

Style: [page-level style cues: layout mood, spacing, visual hierarchy]

Optimize for [page-level concerns: responsiveness, scrolling, transitions]

Example: Multi-Component Dashboard

Layout Prompt (Foundation):

Design a web dashboard page for SaaS analytics overview.

Include:
- Top section with key performance metrics (4-column grid spanning full width, cards displaying primary KPIs)
- Main content area with revenue analytics chart (below metrics, left side 60% width, interactive time controls)
- Side panel with recent subscription activity (right of chart, 40% width, scrollable list)

Interactions:
- Metric cards filter chart and activity panel when clicked
- Chart time range selector updates entire page data
- Activity panel scrolls independently from main content

Style: clean dashboard aesthetic, ample whitespace, card-based sections, subtle depth

Optimize for desktop-first responsive layout, smooth transitions between filtered states

Component Prompts (Detailed sections in same file): Following the layout prompt, separate component sections provide detailed specifications for:

• KPI Metrics: Detailed spec for metric cards with sparklines, deltas, color coding
• Revenue Chart: Detailed spec for interactive line chart with tooltips, annotations
• Subscription Activity: Detailed spec for activity table with avatars, status badges

All sections combined in single file dashboard/prompt-v1.md, separated by ---.

When to Generate Layout Prompts

Generate layout prompt when:

• 2+ distinct UI components mentioned
• Full page/screen keywords present ("dashboard", "page", "screen", "app")
• Multiple regions described (header + content, sidebar + main, navigation + body)
• Layout structure keywords used ("grid", "sections", "panels", "areas")

Skip layout prompt when:

• Single isolated component (button, form field, icon)
• Partial update/modification to existing design
• Component is already part of known larger layout

Feature-Based Directories with --- Separators

Organization: Each feature gets its own directory containing prompts and design artifacts:

design-intent/google-stitch/
├── dashboard/
│   ├── prompt-v1.md           (all prompts in one file with --- separators)
│   ├── prompt-v2.md           (version history in same directory)
│   ├── exports/               (Stitch-generated outputs: PNG, SVG, HTML)
│   └── wireframes/            (pre-work mockups and references)
├── landing/
│   ├── prompt-v1.md
│   ├── exports/
│   └── wireframes/
├── settings/
│   ├── prompt-v1.md
│   ├── exports/
│   └── wireframes/
└── admin-panel/
    ├── prompt-v1-part1.md     (split files for >6 prompts)
    ├── prompt-v1-part2.md
    ├── exports/
    └── wireframes/

File Content Structure:

<!-- Layout: {Title Case Name} -->
[layout prompt content]

---

<!-- Component: {Title Case Name} -->
[component prompt content]

---

<!-- Component: {Title Case Name} -->
[component prompt content]

Naming Convention:

• Feature directory: {feature}/ (semantic name, kebab-case)
• Standard (≤6 prompts): prompt-v{version}.md
• Split files (>6 prompts): prompt-v{version}-part{N}.md
• Subdirectories: exports/ and wireframes/ (pre-created)

Examples:

• dashboard/prompt-v1.md (layout + 3 components = 4 prompts)
• landing/prompt-v1.md (layout + 2 components = 3 prompts)
• admin-panel/prompt-v1-part1.md (layout + 5 components = 6 prompts)
• admin-panel/prompt-v1-part2.md (2 remaining components = 2 prompts)

HTML Comment Labels:

• <!-- Layout: Analytics Dashboard --> - For layout/foundation prompts
• <!-- Component: KPI Metrics --> - For component detail prompts
• Title case names for readability
• Labels help navigate within large files

6-Prompt Stitch Limit:

• Stitch can generate maximum 6 screens/components at once
• Files automatically split if >6 prompts needed
• Part 1 always contains layout + first 5 components
• Subsequent parts contain max 6 components each
• Users must process part files sequentially in Stitch

Using Single-File Prompts in Stitch

Workflow option 1: Batch generation (recommended) 1. Copy entire file content 2. Paste into Stitch prompt interface 3. Stitch processes all prompts separated by --- 4. Generates complete page with all components

Workflow option 2: Targeted refinement 1. Copy specific component section (between --- separators) 2. Paste into Stitch for individual component generation 3. Use for iterative refinement of specific elements

Workflow option 3: Split files (>6 prompts) 1. Use part1 file first → generates layout + first 5 components 2. Use part2 file next → generates remaining components 3. Process sequentially due to Stitch's 6-screen limit

Independence principle: Each prompt within the file works standalone when separated by ---.

---

5. Common Pitfalls

❌ Vague prompts

“Make it look modern and cool.”

✅ Instead

“Use a clean layout with flat cards, muted blue-gray palette, sans-serif typography.”

❌ Long multi-topic prompts

“Add new features, redesign layout, change colors, and make it responsive.”

✅ Instead

Split into 2–3 smaller, focused prompts.

❌ Excessive narrative or chatty phrasing

“Can you please create a screen that maybe has some buttons?”

✅ Instead

“Create a settings screen with toggle switches and save button.”

---

6. Advanced Usage

With Spec Files When input comes from structured specs:

• Read section headers as screens
• Convert bullet points to Stitch layout directives
• Merge style notes into concise visual cues

With Uploaded Wireframes / Images

• Mention their purpose explicitly: “Use uploaded image as layout reference, modernize typography.”

---

7. Validation Checklist

Before finalizing an optimized Stitch prompt:

• [ ] ≤ 250 words (absolute max 400)
• [ ] One clear screen or task (atomic focus)
• [ ] Uses explicit UI terms (cards, sidebar, buttons, modal)
• [ ] Includes 3–6 style cues (colors, typography, spacing, mood)
• [ ] Includes responsiveness or export detail
• [ ] Avoids overexplaining or repeating context
• [ ] NO ## markdown headings in output
• [ ] Bullets average 10-20 words each (max 25)
• [ ] NO performance metrics (<Nkb, Nms, bundle sizes)
• [ ] NO compliance specs (WCAG X.X XX format)
• [ ] NO platform parentheticals ((iOS/Android), (Chrome/Firefox/Safari))
• [ ] NO implementation logic (graceful degradation, fallback when unavailable)
• [ ] Matches structure in EXAMPLES.md (directive → bullets → style → constraints)

---

8. Tone and Formatting

• Use imperative, professional tone.
• Prefer Markdown-style bulleting.
• Avoid conversational framing.
• Output must be ready to paste directly into Stitch.

---

9. Iteration & Experimentation

Stitch works best with iterative refinement:

1. Start broad, then refine: Generate initial version from high-level prompt, review output, identify specific elements to improve. 2. One change per iteration: Create focused refinement prompt for one element at a time (color, layout, component). 3. Build incrementally: Each refinement prompt produces a new version (v1 → v2 → v3). 4. Explore alternatives: Try variations by creating multiple prompt versions with different approaches (different color palettes, alternative layouts, varied typography). 5. Track iterations: Use the file versioning system ({component-slug}-v{version}.md) to maintain history and compare results.

Experimentation workflow:

• Generate baseline design (v1)
• Test variation A: different color scheme (v2)
• Test variation B: alternative layout (v3)
• Refine winning approach (v4)

Best practices:

• Review Stitch output before next refinement
• Focus refinements on specific visual/spatial concerns
• Maintain atomic focus (don't bundle multiple changes)
• Use git commits to group related prompt iterations

---

References

• Google Developers Blog – “Introducing Stitch”
• Google AI Developers Forum – Stitch Prompt Guide
• Index.dev – Google Stitch AI Review
• Bitovi – Product Designer’s Review

Stitch Prompt Template

Use this structure when generating optimized Google Stitch prompts.

CRITICAL: Output must be a SINGLE BLOCK of text without ## markdown section headings. Do NOT structure output with headings like "## Layout" or "## Visual Style"—those create PRD-style documents, not Stitch prompts.

---

Template Structure (for reference only—do NOT use headings in actual output)

Format: Directive sentence → bullet list → style cues → constraints (all in one continuous block)

Example:

Design a responsive web dashboard for a project management tool.

Include: left sidebar (logo, navigation links), top header (search, notifications, user avatar), main section with project cards and progress chart.

Style: clean, professional, muted blue palette, modern sans-serif, light neutral background.

Optimize for desktop; maintain consistent 8px spacing and component reuse for export.

---

Key Requirements

1. Opening sentence: Use Stitch verbs (Design/Create/Add/Update) + app/screen description 2. Layout bullets: 3-6 items using "Include:", "Add:", or similar prefixes 3. Style cues: 3-6 descriptors (colors, typography, spacing, mood) 4. Constraints: Responsiveness, platform, accessibility goals

---

What NOT to Include

❌ No multi-section headings like:

## Layout & Components
## Visual Style
## Constraints & Behavior

❌ No backend/technical details like:

• Authentication (JWT, OAuth, Supabase)
• APIs, caching, rate limiting
• Bundle sizes, performance metrics
• Error handling logic
• ARIA implementation details

✅ Only visual/spatial UI concerns like:

• Layout structure, components
• Colors, typography, spacing
• Interaction patterns
• Accessibility goals (keyboard nav, screen readers)

---

Design-Aware Style Cues (When Available)

When design context is discovered from design-intent/, enhance style cues with project context.

Pattern:

Style: [project-type-tone], [design-system-name], [user-provided-cues], [visual-details].

Examples:

With Enterprise + Fluent UI context:

Style: enterprise-grade, professional, Fluent UI styling, deep blue accents, clean sans-serif typography, organized information hierarchy.

With Consumer + Material UI context:

Style: friendly, engaging, Material Design patterns, vibrant accents, generous whitespace, smooth hover transitions.

Without design context (standalone):

Style: clean, modern, neutral background, sans-serif typography, subtle shadows.

Key Principle: Inject high-level descriptors only. Let Stitch infer specific values.

---

Template Pattern

[Imperative verb] a [platform] [app/screen type] for [purpose].

Include:
- [Component 1 with brief description]
- [Component 2 with spatial relationship]
- [Component 3 with interaction pattern]

Style: [3-6 cues: colors, typography, spacing, mood, tone].

Optimize for [responsiveness], [accessibility], [export format].

---

Complete Example

Design a content engagement toolbar for cultural heritage educational pages optimized for mobile-first responsive design.

>

Include:

- Share button with native dialog (mobile) and Facebook/copy link options (desktop)

- Four emoji reactions (Love, Helpful, Interesting, Thank you) with counts

- Copy link button with one-click copy and confirmation toast

- Suggest improvement button opening contact form

- Print button for browser print dialog

- Related content grid (3-5 tag-matched items) below toolbar

>

Style: Clean, inviting, culturally respectful, Ocean Blue (#005A8D), Valley Green (#3E7D5A), Bougainvillea Pink (#D90368), Sunny Yellow (#F7B801), Merriweather headings, Lato body text, 44px touch targets, subtle shadows.

>

Optimize for mobile-first (320px minimum), full keyboard navigation, screen reader support, dark mode.

---

Final Checklist

• [ ] <250 words total
• [ ] NO ## headings in output
• [ ] Starts with imperative verb (Design/Create/Add/Update)
• [ ] 3-6 layout bullets
• [ ] 3-6 style cues
• [ ] NO backend/auth/API/performance details
• [ ] Matches structure in EXAMPLES.md

Remember: Output should be paste-ready for Google Stitch—not a planning document.

Layout Prompt Template

This template provides the structure for generating foundation/wireframe layout prompts for Google Stitch.

Purpose

Layout prompts create the spatial structure and regional organization of multi-component pages. They are self-contained, use generic descriptive terms, and work independently in Stitch as foundation prompts.

Key Principles

• Generic descriptive terms: "metrics section", "chart area" (NOT "kpi-cards component", file references)
• Foundation-focused: High-level purpose and spatial relationships (NOT implementation details)
• Standalone usable: Must work in Stitch without other prompts or file context
• Concise: Target 150-200 words maximum

Template Structure

Design a [platform] [page/screen type] for [purpose].

Include:
- [Region name] with [generic component description] ([spatial position], [key behavior])
- [Region name] with [generic component description] ([relative position], [interaction pattern])
- [Region name] for [purpose] ([position], [relationship to other regions])

Interactions:
- [How regions relate/communicate at high level]
- [Primary user flows between sections]

Style: [page-level style cues: layout mood, spacing approach, visual hierarchy]

Optimize for [page-level concerns: responsiveness, scrolling, transitions]

Component Guidelines

Region Names (Generic, Descriptive)

• ✅ "Top section", "Main content area", "Side panel", "Header region"
• ✅ "Left sidebar", "Primary workspace", "Activity feed"
• ❌ "component-1", "kpi-cards section", "revenue-chart area"

Component Descriptions (Purpose-Focused)

• ✅ "key performance metrics (4 cards with primary KPIs)"
• ✅ "revenue analytics chart (interactive, time-filterable)"
• ✅ "recent subscription activity (scrollable list)"
• ❌ "4 metric cards with sparklines showing delta percentages" (too detailed)
• ❌ "line chart component" (too vague)

Spatial Positioning

• Use relative positioning: "below metrics", "right of chart", "above fold"
• Include proportions: "60% width", "full width", "spanning height"
• Specify grid patterns: "4-column grid", "3×3 grid", "single column"

Interactions (High-Level Only)

• ✅ "Metric cards filter chart when clicked"
• ✅ "Chart time range updates all sections"
• ❌ "Click handler triggers Redux action to update chart state" (too technical)

Example: Analytics Dashboard

Design a web dashboard page for SaaS analytics overview.

Include:
- Top section with key performance metrics (4-column grid spanning full width, cards displaying primary KPIs)
- Main content area with revenue analytics chart (below metrics, left side 60% width, interactive time controls)
- Side panel with recent subscription activity (right of chart, 40% width, scrollable list)

Interactions:
- Metric cards filter chart and activity panel when clicked
- Chart time range selector updates entire page data
- Activity panel scrolls independently from main content

Style: clean dashboard aesthetic, ample whitespace, card-based sections, subtle depth

Optimize for desktop-first responsive layout, smooth transitions between filtered states

Example: Landing Page

Design a responsive web landing page for SaaS product marketing.

Include:
- Hero section with headline and primary call-to-action (full width, above fold, centered content)
- Feature highlights grid (below hero, 3-column layout, icon-led descriptions)
- Social proof section with testimonial cards (below features, 2-column alternating layout)
- Footer with navigation links (bottom, multi-column layout)

Interactions:
- Hero CTA scrolls to feature section smoothly
- Feature cards expand on hover to show more details
- Testimonials rotate automatically every 5 seconds

Style: modern, bold typography, vibrant gradients, generous spacing, playful yet professional

Optimize for mobile-first responsive design, fast initial render, smooth scroll animations

Validation Checklist

Before finalizing layout prompt:

• [ ] Uses generic descriptive terms (no file references or component names)
• [ ] Includes spatial relationships between all regions
• [ ] Specifies high-level interactions between regions
• [ ] Under 200 words (foundation-focused, not over-detailed)
• [ ] Independently usable in Stitch without other context
• [ ] Includes page-level style cues
• [ ] Addresses page-level optimization concerns

Usage Notes

When to generate layout prompts:

• 2+ distinct UI components mentioned
• Full page/screen keywords (dashboard, page, screen, app)
• Multiple regions (header + content, sidebar + main)
• Layout structure keywords (grid, sections, panels, areas)

Feature directory format with --- separators:

Each page/feature gets its own directory containing prompt file and artifact subdirectories:

design-intent/google-stitch/{feature}/
├── prompt-v{version}.md      (layout + all components with --- separators)
├── exports/                  (Stitch-generated outputs)
└── wireframes/               (pre-work mockups)

Prompt file content:

<!-- Layout: {Title Case Name} -->
[layout prompt content]

---

<!-- Component: {Title Case Name} -->
[component prompt content]

---

<!-- Component: {Title Case Name} -->
[component prompt content]

File naming:

• Feature directory: design-intent/google-stitch/{feature}/ (semantic name, kebab-case)
• Standard (≤6 prompts): {feature}/prompt-v{version}.md
• Split files (>6 prompts): {feature}/prompt-v{version}-part{N}.md
• Subdirectories: exports/ and wireframes/ (pre-created)

Examples:

• dashboard/prompt-v1.md (layout + 3 components = 4 prompts)
• landing/prompt-v1.md (layout + 2 components = 3 prompts)
• admin-panel/prompt-v1-part1.md (layout + 5 components = 6 prompts)
• admin-panel/prompt-v1-part2.md (2 remaining components = 2 prompts)

6-Prompt Stitch limit:

• Stitch can generate maximum 6 screens/components at once
• Files automatically split when >6 prompts needed
• Part 1 always contains layout + first 5 components (6 total)
• Subsequent parts contain max 6 components each
• Users must process part files sequentially in Stitch

Directory structure benefits:

• All feature artifacts grouped together (prompts, exports, wireframes)
• Version history maintained in same directory
• Pre-created subdirectories ready for design files
• Natural workflow: generate prompts → run in Stitch → save exports

Relationship to component prompts:

• All prompts for a page/feature combined in one file
• Layout prompt = Foundation/wireframe (first section)
• Component prompts = Detailed specifications (following sections)
• Each section independently usable when separated by ---
• No cross-references between sections
• File can be copy-pasted directly into Stitch
• Exports and wireframes stored alongside prompts for easy reference

Authoring Stitch Prompts — Troubleshooting

Anti-Patterns: What NOT to Include

Stitch generates UI layouts and visual designs—it does NOT implement backend logic, authentication, or technical infrastructure. Prompts must focus exclusively on visual/spatial concerns.

❌ NEVER Include These:

Backend/Infrastructure:

• Authentication flows (JWT, OAuth, Supabase Auth, login logic)
• API endpoints, rate limiting, caching strategies
• Database operations (queries, migrations, schema details)
• Server-side validation, error handling logic
• Security implementation (honeypot, CSRF tokens, spam prevention)

Technical Performance Metrics:

• Bundle sizes (<15kb compressed, lightweight bundle)
• Load times, timeout values (<100ms feedback, 120ms interaction, 5-minute cache)
• Performance budgets, optimization targets (<30kb gzipped)
• Network request limits, debounce intervals (10/min per user)

Code-Level Implementation:

• Library/framework names (Tailwind is OK in style cues, but NOT implementation details)
• Browser API specifics (Clipboard API fallback logic, Share API behavior)
• ARIA implementation details (prefer "keyboard navigation" over "ARIA live regions with role=alert")
• State management logic (optimistic UI rollback, local storage strategies)

Compliance Implementation:

• WCAG technical specifications (prefer "keyboard accessible" / "high contrast" over WCAG 2.1 AA, Level A criterion 2.1.1, 3:1 contrast minimum)
• Browser support matrices (prefer "modern browsers" over last 2 versions Chrome/Firefox/Safari/Edge, HTTPS required)
• Legal/privacy implementation (GDPR cookie logic, consent workflows beyond UI)
• Platform parentheticals (remove (iOS/Android), (mobile/desktop) in technical contexts)
• Implementation degradation logic (avoid "graceful degradation when native APIs unavailable", "fallback when clipboard unavailable")

✅ DO Include These:

Visual/Spatial Concerns:

• Layout structure (sidebar, header, cards, grids, modals, overlays)
• Component types (buttons, forms, charts, toggles, dropdowns, tooltips)
• Visual style (colors, typography, spacing, shadows, borders, icons)
• Interaction patterns (click, hover, drag, scroll animations)
• Accessibility goals (keyboard navigation, screen reader support, high contrast)
• Responsiveness (mobile-first, breakpoints, touch targets)

Example: Before & After

❌ WRONG (PRD-style with technical details):

## Layout & Components
- **Share Button**: Native mobile share dialog (iOS/Android), fallback UI on desktop
- **Reactions**: Authentication requirement, JWT token validation, real-time count updates,
  optimistic UI, single selection per user with toggle-off capability
- **Copy Link**: Clipboard API with accessible fallback modal, visual + ARIA live region confirmation
- **Suggest Form**: Pre-filled contact form with rate-limiting (5/hour), honeypot spam protection

## Constraints & Behavior
- Supabase Auth integration required for reactions
- Performance: <15kb compressed bundle, <100ms interaction feedback, 5-minute caching
- Browser Support: Last 2 versions Chrome/Firefox/Safari/Edge, HTTPS required
- WCAG 2.1 AA compliance with focus indicators (3:1 contrast minimum), NVDA/JAWS/VoiceOver testing
- Graceful degradation when native APIs unavailable, clipboard action fallback modal

✅ CORRECT (Stitch-optimized):

Design a content engagement toolbar for cultural heritage pages optimized for mobile-first responsive design.

Include:
- Share button with native dialog (mobile) and Facebook/copy link options (desktop)
- Four emoji reactions (Love, Helpful, Interesting, Thank you) with counts
- Copy link button with one-click copy and confirmation toast
- Suggest improvement button opening contact form
- Print button for browser print dialog
- Related content grid (3-5 tag-matched items) below toolbar

Style: Clean, inviting, culturally respectful, Ocean Blue (#005A8D), Valley Green (#3E7D5A),
Bougainvillea Pink (#D90368), Sunny Yellow (#F7B801), Merriweather headings, Lato body text,
44px touch targets, subtle shadows.

Optimize for mobile-first (320px minimum), full keyboard navigation, screen reader support, dark mode.

File saved as: design-intent/google-stitch/toolbar/prompt-v1.md

Key Differences:

• ❌ Removed: JWT, Supabase, API details, rate limiting, <15kb bundle, <100ms feedback, browser versions (Last 2 versions...), WCAG 2.1 AA, 3:1 contrast minimum, (iOS/Android), "graceful degradation", "clipboard action"
• ✅ Kept: UI components, visual style, colors, typography, accessibility goals (keyboard nav, screen readers, high contrast), responsiveness
• ❌ Removed: Multi-section headings (## Layout & Components, ## Constraints & Behavior)
• ✅ Used: Single directive paragraph → bullets → style → constraints
• ❌ Removed: Implementation logic ("fallback when unavailable", "Clipboard API with fallback")
• ✅ Used: Simple UI terms ("copy link", "native share", "high contrast")

---

Prompts Are Too Verbose

• Symptom: Output reads like marketing copy or exceeds a few paragraphs.
• Fix: Re-run the template with succinct bullets; drop storytelling sentences. Focus on layout nouns and style cues.
• Tip: If the source brief is wordy, summarize it first in plain bullet points, then rewrite.

Missing Style Cues

• Symptom: Prompt lacks palette, typography, or tone guidance.
• Fix: Re-scan the source text for adjectives/colors; if absent, ask the user or pull from session context. Include 3–6 cues (palette + typography + density).
• Tip: When no cues exist, provide neutral defaults (e.g., “clean, neutral palette, sans-serif typography”) and note the assumption.

Multi-Screen Prompts

• Symptom: User requests multiple screens/flows in a single brief.
• Fix: Split into separate prompts. Respond with the highest-priority screen and recommend follow-up prompts for the rest.
• Tip: Reference the Stitch Session Manager skill if the user already has a logged session.

Split vs Combine Decision

When to SPLIT into multiple prompts:

• Multiple screens/pages mentioned (e.g., "Dashboard + Settings + Profile")
• >2 distinct user intents within single screen
• Components serve different user goals
• Total word count >150 words AND can be separated logically
• User wants to iterate on sections independently
• Different visual styles or user contexts

When to COMBINE into single prompt:

• Single cohesive component (e.g., login form with all fields)
• All actions serve one user goal
• Components tightly coupled (removing one breaks others)
• Total word count <150 words
• Rapid prototyping phase where cohesion matters

Decision Examples:

✅ Split these:

• "Article page with reading pane, comment section, and related content grid" → 3 prompts (3 intents: consume, engage, discover)
• "Dashboard + Settings + Profile pages" → 3 prompts (3 screens)
• "E-commerce product page with gallery, specs, reviews, and recommendations" → 3-4 prompts (multiple intents)
• "Toolbar with 6 actions + related content grid below" → 2 prompts (2 intents: engage + discover)

❌ Don't split these:

• "Login form with email, password, submit, forgot password link" → 1 prompt (1 intent: authenticate)
• "Toolbar with 5 action buttons" → 1 prompt (1 intent: actions, unless >150 words)
• "Contact form with name, email, message, submit" → 1 prompt (1 intent: contact)
• "Navigation header with logo, menu, search, user avatar" → 1 prompt (1 intent: navigate)

How the Skill Handles Splits: 1. Detects split points automatically (Step 1.5 in WORKFLOW.md) 2. Applies smart defaults (Step 1.6): split if >2 screens/intents, else combine 3. Generates prompt immediately with override hint 4. If split applied, generates first prompt + lists remaining prompts needed 5. User can request regeneration with different approach ("combine" or "split into N")

Component Ambiguity

• Symptom: Input says “add charts” without specifying type.
• Fix: Choose a sensible default (bar/line chart) based on context and mention the assumption. Encourage the user to clarify if precision matters.

Unclear Platform or Responsiveness

• Symptom: Prompt doesn't mention web vs. mobile or responsive behavior.
• Fix: Infer from context (e.g., mention of sidebar ⇒ desktop/web). If uncertain, produce a desktop-first prompt and highlight the assumption. Add responsive note in constraints.

Image Modification Requests

• Symptom: User wants to change specific images but prompt is too vague or ambiguous.
• Fix: Identify exact images using spatial references ("the hero image at top", "profile photo in header", "product thumbnails in grid") and specify the precise change (resize, reposition, restyle, add effects). Coordinate image styling with theme when relevant.
• Tip: When multiple similar images exist, be explicit: "all profile thumbnails" vs "the profile photo in the user card". Include sizing, positioning, styling, and any effects (gradients, borders, opacity) in clear visual terms.

---

Design Context Integration Issues

Context Not Detected When Expected

Symptom: design-intent/ directory exists but style cues don't reflect project type or design system.

Causes:

• AUTO-FILL markers not replaced in constitution.md (still contain <!-- AUTO-FILL: ... -->)
• Files created but not customized after running /setup
• Reading from wrong project root directory

Fix: 1. Check if design-intent/memory/constitution.md has actual values, not AUTO-FILL template markers 2. Run /setup in the project to auto-detect and fill values 3. Manually edit constitution.md to add Project Type and Design System values:

   **Project Type:** Enterprise
   **Design System:** Fluent UI

Wrong Context Injected

Symptom: Style cues mention wrong design system or project type (e.g., "Fluent UI" when using Material UI).

Causes:

• Outdated constitution.md after project changes
• Multiple design systems in package.json (fallback detection picked wrong one)
• Incorrect values entered in constitution.md

Fix: 1. Update design-intent/memory/constitution.md with correct values 2. Re-run /setup to re-detect project configuration 3. Manually specify style cues in input to override: "Use Material Design style, not Fluent"

Want to Override Detected Context

Symptom: User wants different style than what design context suggests (e.g., playful style for an Enterprise project).

Fix: Explicitly state desired style in the input. User-provided cues take precedence over injected context:

• Input: "Create a playful, colorful dashboard" → overrides "enterprise-grade, professional"
• Input: "Use Material Design patterns" → overrides detected Fluent UI

Design Context Not Available (Working Standalone)

Symptom: No design context detected, prompts use default neutral style cues.

Expected Behavior: This is normal. The skill works standalone when:

• No design-intent/ directory exists
• constitution.md exists but has AUTO-FILL markers (not customized)
• package.json doesn't contain recognizable design system dependencies

Note: Standalone mode is valid. Default style cues ("clean, modern, neutral palette") work for any project. Users can always provide specific style cues in their input.

---

MCP Integration Issues

MCP Tools Not Detected After Authoring

Symptom: After authoring a prompt, the skill doesn't offer MCP generation even though you set up the Stitch MCP server.

Causes:

• MCP server not configured in .mcp.json
• Stitch API access not approved (403 errors)
• Claude Code session needs restart

Fix: 1. Run /stitch-setup to verify MCP configuration 2. Check MCP status: claude mcp list 3. If not configured, add to your project's .mcp.json (see plugin README) 4. Restart Claude Code to reload MCP servers

Note: Stitch API requires preview/allowlist access from Google.

Generation Failed After Authoring

Symptom: MCP generation was offered and accepted, but screens failed to generate.

Causes:

• Authentication expired
• Project ID not set or invalid
• Stitch service issue

Fix: 1. Refresh credentials: gcloud auth application-default login 2. Verify project ID: Check STITCH_PROJECT_ID environment variable 3. Try again: /stitch-generate @{prompt-file-path} 4. Check Stitch service at stitch.withgoogle.com

Want MCP But Not Set Up

Symptom: User wants automated generation but MCP is not configured.

Fix: 1. Run /stitch-setup for guided setup 2. Or manually: npx @_davideast/stitch-mcp init 3. After setup, authored prompts will automatically offer generation

---

Stitch Platform Behaviors

These are known Stitch platform limitations, not prompting issues.

Design Resets During Editing

Symptom: Stitch resets or significantly alters your design when you make sequential edits.

Cause: This is expected Stitch behavior during iterative editing sessions.

Workaround: 1. Save screenshots of designs you like before making further iterations 2. Use Stitch's built-in export features to preserve good designs 3. Keep edit prompts focused and minimal to reduce reset likelihood 4. If a reset occurs, use your saved screenshot as reference for a new prompt

Complex Table Limitations

Symptom: Multi-row tables lose structure or become inconsistent across sequential prompts.

Cause: Stitch has difficulty maintaining complex multi-row table layouts when modified across prompts.

Workaround:

• Keep table prompts simple and self-contained
• Avoid modifying table structure in subsequent prompts
• Generate tables as standalone components rather than editing existing ones
• For tables with 4+ rows or complex nesting, consider generating the entire table fresh
• If table structure is critical, include complete table specification in each prompt rather than incremental changes

Authoring Stitch Prompts — Workflow

0.5. Design Context Discovery (Optional Enhancement)

Before parsing input, check for design-intent project setup to enhance prompt generation with project-appropriate style cues.

Discovery Priority Order

1. Check for design-intent directory

   Resolve repo root: git rev-parse --show-toplevel
   Check: {root}/design-intent/memory/

2. If design-intent exists: Extract context

   Read: design-intent/memory/constitution.md
   Read: design-intent/memory/project-vision.md (if available)

3. If design-intent not found: Scan codebase

   Check package.json for design system dependencies:
   - @fluentui/* → Fluent UI
   - @mui/* → Material UI
   - @chakra-ui/* → Chakra UI
   - tailwindcss → Tailwind CSS

4. If neither found: Work standalone

• Use default behavior
• Style cues come purely from user input

Context Extraction from constitution.md

Parse these AUTO-FILL sections (if values present, not template markers):

**Project Type:** [Enterprise/Consumer/Internal/Marketing]
**Framework:** [React/Next.js/Vue/Angular]
**Design System:** [Fluent UI/Material UI/Chakra/Tailwind]

If AUTO-FILL comment markers remain (e.g., <!-- AUTO-FILL: ... -->), treat as "not detected".

Derived Style Cue Mappings

Based on Project Type, inject appropriate tone adjectives:

Based on Design System, inject system name:

Context Report (Internal)

Before proceeding to Step 1, note discovered context:

Design Context Discovered:
- Source: design-intent/memory/constitution.md
- Project Type: Enterprise
- Design System: Fluent UI

Will inject: "enterprise-grade, professional, Fluent UI styling"

If nothing discovered:

Design Context: Not found (standalone mode)

Fallback Behavior

This step is enhancement only. If:

• design-intent/ doesn't exist → continue without injection
• Files exist but AUTO-FILL not completed → continue without injection
• Read errors occur → log and continue without injection

Never block prompt generation due to missing design context.

---

0.8. Parse Structured Input (If Present)

When invoked via the /prompt command, the skill may receive pre-parsed user preferences. Check for structured input format before proceeding.

Structured Input Format

Brief: [original user input]
Components: [comma-separated list]
Style: [Enterprise/Consumer/Minimal/Playful/Custom/Auto]
Structure: [Combined/Split/Auto]

Detection

Check if input starts with Brief: - this indicates structured input from the command.

Parsing Steps

1. Extract Brief

• Text after Brief: until next field
• Store as primary input for Step 1

2. Extract Components (if present)

• Parse comma-separated list after Components:
• Store for use in Step 2 (skip auto-detection)
• If "All" or missing, proceed with normal detection

3. Extract Style (if present)

• Parse value after Style:
• Map to style cues:

• Store for use in Step 3.7 (override design context if not Auto)

4. Extract Structure (if present)

• Parse value after Structure:
• Store for use in Step 1.5/1.6:

Pass-Through for Non-Structured Input

If input does NOT start with Brief:, treat entire input as raw brief and proceed normally with all detection steps.

Example

Structured Input:

Brief: dashboard for fitness app
Components: activity-summary, workout-chart, goals-progress
Style: Consumer
Structure: Combined

Parsed Result:

• Brief: "dashboard for fitness app"
• Components: ["activity-summary", "workout-chart", "goals-progress"]
• Style: "friendly, approachable, vibrant"
• Structure: "Combined" (skip split detection)

---

1. Parse Input Context

1. Detect source type (free text, spec file, revision request, image reference, image modification request). 2. Extract:

• App/screen name and primary intent.
• Required components (cards, charts, forms, nav).
• Style cues (color, tone, typography) and platform/responsiveness hints.
• Language requirements (default English, or specify target language).

Color Specification Strategies:

• Specific hex codes: When brand colors are defined (#005A8D, #228B22)
• Named colors: For common colors (Ocean Blue, Forest Green, Slate Gray)
• Mood-based: When exact colors unknown ("warm tones", "cool palette", "vibrant accents")
• Hybrid: Combine both approaches ("deep blue like #0066CC", "warm beige background")

3. If prior session data exists (e.g., from Stitch Session Manager), merge palette/typography cues before rewriting.

1.5. Detect Split Points

Analyze whether the input should generate 1 prompt or multiple prompts:

1. Screen Count Check:

• Count distinct screens/pages mentioned (e.g., "Dashboard + Settings", "Login, Signup, Reset")
• IF >1 screen → Plan N prompts (1 per screen)

2. Component Clustering (for single screen):

• List all major components/sections
• Group by semantic relationship:
• Navigation cluster (header, sidebar, footer, menu)
• Primary content cluster (main area, content pane, feed)
• Interaction cluster (forms, buttons, toolbars, action panels)
• Discovery cluster (related content, recommendations, search results)
• Overlay cluster (modals, drawers, tooltips, popovers)

3. Intent Analysis:

• For each cluster, identify user intent ("What is the user trying to accomplish?")
• Count distinct intents:
• 1 intent → Keep together (1 prompt)
• 2 intents → Evaluate split (see threshold rules)
• 3+ intents → Always split

4. Split Threshold Rules:

• IF 2 intents AND any of:
• Combined word count >150 words
• Components can be developed independently
• Different visual styles or user contexts

→ Recommend split

5. Smart Defaults (when split detected):

• Apply automatic decision rules
• Generate prompt immediately with override hint
• User can request regeneration with different approach

1.6. Apply Split Strategy (Smart Defaults)

When split detected, apply automatic decision rules (never block execution):

Decision Rules: 1. Multiple screens (>1) → Always split 2. Single screen with multiple intents:

• IF >2 distinct intents → Split
• IF 2 intents AND (word count >150 OR components independently developable OR different visual styles) → Split
• Otherwise → Combine

If SPLIT applied: 1. Order prompts by user flow (navigation → content → actions → discovery) 2. Generate highest-priority prompt first 3. Save as: {component-slug}-v1.md 4. Present prompt inline with note:

   ---
   Additional prompts needed:
   2. [Intent name]: [brief description]
      → Will save as: {component-slug}-v1.md
   3. [Intent name]: [brief description]
      → Will save as: {component-slug}-v1.md

   💡 To combine into 1 prompt instead, say "combine" or "regenerate as single prompt"

If COMBINE applied: 1. Generate single comprehensive prompt with all components 2. Save as: {component-slug}-v1.md 3. Add note at end:

   💡 To split into separate prompts, say "split into N prompts" or specify grouping

User Override: User can request alternative approach at any time:

• "Combine those into 1 prompt"
• "Split that into 3 separate prompts"
• "Regenerate as [N] prompts: [grouping]"
• "Keep first prompt, regenerate second as..."

1.7. Detect Layout Prompt Need

After determining split/combine strategy, detect if a layout/foundation prompt should be generated:

Detection Criteria (ANY of these triggers layout prompt generation): 1. Multiple components (2+ distinct UI components mentioned) 2. Full page/screen keywords ("dashboard", "page", "screen", "app", "view") 3. Multiple regions (header + content, sidebar + main, navigation + body) 4. Layout structure keywords ("grid", "sections", "panels", "areas", "zones")

Layout Prompt Purpose:

• Creates foundation/wireframe showing spatial structure
• Uses generic descriptive terms (NOT file/component references)
• Focuses on high-level regions, positioning, and interactions
• Independently usable in Stitch as standalone prompt
• Target 150-200 words (foundation-focused)

When Layout Prompt IS Generated: 1. Extract region information:

• Major page sections/areas
• Spatial relationships between regions
• High-level purpose of each area
• Page-level interactions

2. Generate page/feature slug from main intent 3. Compose single file with layout + components:

• Start with <!-- Layout: {Title Case Name} --> comment label
• Add layout prompt content
• Add --- separator
• For each component:
• Add <!-- Component: {Title Case Name} --> comment label
• Add component prompt content
• Add --- separator (between components)

4. Count total prompts (layout + components) 5. Apply 6-prompt limit:

• If ≤6 prompts: Save as {page-slug}-v{version}.md
• If >6 prompts: Split into {page-slug}-part{N}-v{version}.md files

6. Use generic terms: "metrics section", "chart area" (NOT "kpi-cards component")

When Layout Prompt is NOT Generated:

• Single isolated component (button, form field, icon)
• Partial update/modification to existing design
• Component is already part of known larger layout

File Output Pattern (Feature Directories with --- Separators):

design-intent/google-stitch/
├── dashboard/
│   ├── prompt-v1.md           (contains layout + all components with --- separators)
│   ├── exports/               (for Stitch-generated outputs)
│   └── wireframes/            (for pre-work mockups)
├── landing/
│   ├── prompt-v1.md
│   ├── exports/
│   └── wireframes/
└── admin-panel/
    ├── prompt-v1-part1.md     (split files for >6 prompts)
    ├── prompt-v1-part2.md
    ├── exports/
    └── wireframes/

File Content Format:

<!-- Layout: Analytics Dashboard -->
[layout prompt content]

---

<!-- Component: KPI Metrics -->
[component prompt content]

---

<!-- Component: Revenue Chart -->
[component prompt content]

Feature Name Generation:

• Derive from main screen/page purpose
• Use kebab-case (lowercase with hyphens)
• Keep semantic and concise
• Examples:
• "analytics dashboard" → dashboard/ (or analytics-dashboard/ if specific)
• "landing page" → landing/
• "settings screen" → settings/
• "user profile" → profile/

6-Prompt Stitch Limit:

• Stitch can process maximum 6 screens/components at once
• Layout + components must total ≤6 prompts per file
• If >6 prompts needed, automatically split into part files:
• Part 1: Layout + first 5 components (6 total)
• Part 2: Next 6 components
• Part N: Remaining components (max 6 per part)
• Example: 8 prompts → admin-panel/prompt-v1-part1.md (6) + prompt-v1-part2.md (2)

See templates/layout-prompt-template.md for layout prompt structure and examples.

2. Condense & Reframe

1. Rewrite the brief into a single-screen/single-goal directive using Stitch verbs ("Design/Create/Add/Update"). 2. Aggressively filter non-UI concerns—remove ALL:

• Backend implementation (auth flows, JWT, API endpoints, Supabase/database details)
• Technical performance metrics (bundle sizes, cache durations, rate limits, timeouts)
• Code-level specifications (library names, browser APIs, ARIA implementation details)
• Error handling logic (retry strategies, fallback flows, optimistic UI rollback)
• Security/compliance implementation (honeypot details, token validation, spam prevention)

3. Retain ONLY visual/spatial UI concerns:

• Layout structure (sidebar, header, cards, grids, modals)
• Component types (buttons, forms, charts, toggles, tooltips)
• Visual style (colors, typography, spacing, shadows, borders)
• User interaction patterns (click, hover, scroll, drag)
• Responsiveness and accessibility goals (mobile-first, keyboard nav, screen readers)
• Image specifications (placement, sizing, styling, effects)

4. Normalize terminology (use UI nouns like "sidebar", "KPI cards", "line chart", "modal"). 5. Enforce template format: Output must be single directive paragraph + bullet list + style cues—NOT multi-section headings like "## Layout & Components" or "## Constraints & Behavior". 6. For image modification requests:

• Identify which specific image(s) to target (hero image, profile photos, product thumbnails, background images, icons)
• Specify the precise change (resize, reposition, replace, restyle, add effects, apply filters, adjust opacity)
• Coordinate with theme when relevant (e.g., "apply blue tint to match palette", "rounded corners matching button style")
• Use precise language: "the hero image at top" not just "the image"
• For multiple similar images, be explicit: "all profile thumbnails" vs "the profile photo in the header"

2.5. Apply Language Requirements

1. If user specifies target language (e.g., "in Spanish", "French version", "convert to German"):

• Note language in directive sentence: "Design a [Spanish] login form..." or "Design a login form with Spanish text..."
• Translate all UI text labels in component bullets to target language (button labels, field labels, link text, headings)
• Maintain English for technical UI terms (button, modal, sidebar, card, form, etc.)
• Example: "email field labeled 'Correo electrónico'" not "correo electrónico field"

2. Default to English if no language specified. 3. For multi-language requests (multiple languages for same design):

• Recommend separate prompts per language
• Suggest naming convention: {feature}/prompt-{lang-code}-v{version}.md (e.g., login-form/prompt-es-v1.md, login-form/prompt-fr-v1.md)

3. Structure Output

1. Follow template sections:

• Heading sentence summarizing the screen/app and platform.
• Layout bullets (3–6) covering navigation, hierarchy, and key components.
• Style cues (3–6) capturing palette, typography, density, tone.
• Constraints highlighting responsiveness, export requirements, or iteration notes.

2. Keep bullets short (10–20 words) and action-oriented. 3. Maintain atomicity—if the brief mixes multiple screens, note the split and produce the highest-priority prompt first. 4. If split strategy active (from Step 1.6):

• Generate ONLY the first prompt in current output
• Derive component slug from the GENERATED PROMPT's header
• Save as: {component-slug}-v{version}.md
• After the prompt, add note listing remaining prompts:

     ---
     Additional prompts needed:
     2. [Intent name]: [brief description]
        → Will save as: {component-slug}-v1.md
     3. [Intent name]: [brief description]
        → Will save as: {component-slug}-v1.md
     ...

• User can request subsequent prompts explicitly

3.5. Generate Layout Prompt (If Detected)

If Section 1.7 detected the need for a layout prompt, generate it now:

Layout Prompt Generation Steps:

1. Extract region information from parsed input:

• Identify major page sections (top section, main area, sidebar, footer, etc.)
• Note spatial relationships (above, below, left of, right of, spanning, etc.)
• Capture high-level purpose of each region
• Identify page-level interactions between regions

2. Use generic descriptive terminology:

• ✅ "key performance metrics section", "analytics chart area", "activity feed panel"
• ✅ "top section", "main content area", "side panel", "navigation region"
• ❌ "kpi-cards component", "revenue-chart-v1", file/component references

3. Follow layout prompt template structure:

   Design a [platform] [page/screen type] for [purpose].

   Include:
   - [Region] with [generic description] ([spatial position], [behavior])
   - [Region] with [generic description] ([relative position], [interaction])

   Interactions:
   - [High-level cross-region interactions]

   Style: [page-level style cues]

   Optimize for [page-level concerns]

4. Keep foundation-focused:

• Target 150-200 words maximum
• High-level purpose, not implementation details
• Spatial structure and relationships
• Page-level interactions only
• Must be independently usable in Stitch

5. Generate feature name (directory):

• Derive from page/feature purpose: "analytics dashboard" → dashboard
• Use kebab-case: lowercase with hyphens
• Keep semantic and concise (prefer "dashboard" over "analytics-dashboard")
• Examples: dashboard, landing, admin-panel, settings

6. Create feature directory structure:

• Create: design-intent/google-stitch/{feature}/
• Pre-create subdirectories:
• {feature}/exports/ - For Stitch-generated outputs (PNG, SVG, HTML)
• {feature}/wireframes/ - For pre-work mockups and reference images
• Prompt files will be saved to feature root

7. Detect existing versions and auto-increment:

• Scan design-intent/google-stitch/{feature}/prompt-v*.md
• Find highest version number (e.g., v1, v2, v3)
• Increment to next version automatically
• If no existing prompts, start at v1
• Each feature maintains independent version history

8. Compose single file with all prompts:

• Start with HTML comment label: <!-- Layout: {Title Case Name} -->
• Add layout prompt content
• Add separator line: ---
• For each component prompt:
• Add HTML comment label: <!-- Component: {Title Case Name} -->
• Add component prompt content
• Add separator line: --- (between components, not after last one)

9. Apply 6-prompt limit and save file:

• Count total prompts (layout + all components)
• If ≤6 prompts total:
• Save as: design-intent/google-stitch/{feature}/prompt-v{version}.md
• Example: design-intent/google-stitch/dashboard/prompt-v1.md
• If >6 prompts total:
• Split into multiple part files
• Part 1 gets: Layout + first 5 components (6 prompts)
• Part 2 gets: Next 6 components
• Part N gets: Remaining components (max 6)
• Save as: design-intent/google-stitch/{feature}/prompt-v{version}-part{N}.md
• Examples: admin-panel/prompt-v1-part1.md, admin-panel/prompt-v1-part2.md
• Warn user: "⚠️ Generated {total} prompts split across {N} files. Stitch can process maximum 6 screens at once. Use each part file separately."

10. Present generated file(s):

• Show feature directory and file path(s)
• Show directory structure with exports/ and wireframes/ subdirectories
• Indicate total prompt count per file
• Note relationship: layout = structure, components = details
• Explain subdirectory purposes
• If split: Explain to use part files sequentially

Example Layout Prompt Output:

Design a web dashboard page for SaaS analytics overview.

Include:
- Top section with key performance metrics (4-column grid spanning full width, cards displaying primary KPIs)
- Main content area with revenue analytics chart (below metrics, left side 60% width, interactive time controls)
- Side panel with recent subscription activity (right of chart, 40% width, scrollable list)

Interactions:
- Metric cards filter chart and activity panel when clicked
- Chart time range selector updates entire page data
- Activity panel scrolls independently from main content

Style: clean dashboard aesthetic, ample whitespace, card-based sections, subtle depth

Optimize for desktop-first responsive layout, smooth transitions between filtered states

File Presentation Format: Present generated file with clear prompt inventory and directory structure:

📂 Feature: dashboard/
📄 File: prompt-v1.md

Contains 4 prompts (within 6-prompt limit ✓):
  • Layout: Analytics Dashboard
  • Component: KPI Metrics
  • Component: Revenue Chart
  • Component: Subscription Activity

Directory structure:
  design-intent/google-stitch/dashboard/
  ├── prompt-v1.md      ← Generated prompt
  ├── exports/          ← Place Stitch outputs here
  └── wireframes/       ← Place mockups/references here

Usage:
  1. Copy prompt file → Paste into Stitch → Generate designs
  2. Save Stitch exports to exports/ directory
  3. Store wireframes/mockups in wireframes/ directory

For split files (>6 prompts):

📂 Feature: admin-panel/
📄 Files Generated (8 total prompts):

prompt-v1-part1.md (6 prompts):
  • Layout: Admin Panel
  • Component: Navigation
  • Component: Dashboard
  • Component: Users
  • Component: Roles
  • Component: Settings

prompt-v1-part2.md (2 prompts):
  • Component: Audit Logs
  • Component: Notifications

Directory structure:
  design-intent/google-stitch/admin-panel/
  ├── prompt-v1-part1.md
  ├── prompt-v1-part2.md
  ├── exports/
  └── wireframes/

⚠️ Stitch Limit: Use part1 first, then part2 in separate session.

See templates/layout-prompt-template.md for detailed guidance and additional examples.

3.6. Post-Processing Cleanup

Before validation, apply final cleanup to remove edge-case technical details:

1. Strip forbidden patterns:

• Performance metrics: Remove <Nkb, bundle size, compressed, Nms feedback/timeout
• Compliance specs: Replace WCAG X.X XX with "accessible", "high contrast", or "screen reader support"
• Implementation logic: Remove "graceful degradation", "fallback when X unavailable", "retry strategies"
• Platform parentheticals: Remove (iOS/Android), (Chrome/Firefox/Safari/Edge) — use "mobile/desktop" without OS names
• API-specific terms: Replace "clipboard action" → "copy", "native mobile share dialog" → "native share"

2. Condense verbose bullets:

• If any bullet exceeds 25 words, condense to 10-20 words using:
• Em-dashes for sublists (e.g., "grid with thumbnails, titles, excerpts" → "grid—thumbnails, titles, excerpts")
• Parallel structure (e.g., "displaying 3-5 articles in responsive grid" → "3-5 articles, responsive grid")
• Remove redundant phrases ("that triggers", "that opens", "that displays" → direct nouns)

3. Simplify constraint language:

• "graceful degradation when native APIs unavailable" → remove entirely
• "WCAG 2.1 AA compliance with NVDA/JAWS testing" → "screen reader support"
• "Last 2 versions Chrome/Firefox/Safari/Edge" → "modern browsers"
• "<15kb compressed bundle" → remove entirely

3.7. Inject Design Context into Style Cues

If Step 0.5 discovered design context, enhance the Style section of generated prompts.

Injection Rules

1. Project type cues first - Set the overall tone 2. Design system name - Identify visual language 3. User-provided cues - Specific colors, typography from input

Injection Examples

With Enterprise + Fluent UI context:

Style: enterprise-grade, professional, Fluent UI styling, deep blue accents, clean typography, subtle shadows, organized grid layout.

With Consumer + Material UI context:

Style: friendly, approachable, Material Design patterns, vibrant accent colors, generous whitespace, smooth transitions, card-based layout.

Standalone (no context discovered):

Style: clean, minimal, neutral palette, sans-serif typography, subtle shadows.

What NOT to Inject

• Specific spacing values (16px, 24px) - let Stitch decide
• Exact hex colors from design tokens - use descriptive color names
• Component implementation details - focus on visual outcomes
• Framework-specific props or APIs

User Override

User-provided style cues in the input take precedence over injected context. If user specifies "playful, colorful style" but context indicates Enterprise, use the user's explicit cues.

---

4. Validate for Stitch Compatibility

1. Strict word count: Target <250 words (absolute max 400). If over 250, condense further. 2. Format validation:

• Output must have NO ## markdown headings (headings = wrong format).
• Must match template: directive sentence → bullet list → style cues → constraints.
• Compare structure against EXAMPLES.md (e.g., Example 1, lines 16-24) to ensure format matches.

3. Content validation—confirm inclusion of:

• At least three concrete UI nouns/components (cards, sidebar, buttons, chart, etc.).
• Explicit style cues (3-6 descriptors: colors, typography, spacing, mood).
• Clear intent statement using Stitch verbs (Design/Create/Add/Update...).
• Bullets average 10-20 words each (max 25 words per bullet).

4. Technical filter check—ensure output contains ZERO:

• Backend/auth terms (JWT, Supabase, API, token, auth flow, rate limiting).
• Performance metrics (bundle size, cache duration, <Nkb, Nms, timeout values, compressed).
• Code implementation (library names, ARIA implementation details, Clipboard API specifics).
• Error handling logic (retry, fallback, rollback, validation strategies, graceful degradation).
• Compliance specs in format WCAG X.X XX (use "accessible", "high contrast", "screen reader support" instead).
• Platform parentheticals like (iOS/Android), (Chrome/Firefox/Safari) (use "mobile", "desktop", "modern browsers").
• Verbose implementation phrases ("that triggers", "that opens", "when unavailable").

5. Ensure instructions avoid:

• Conversational filler ("please", "thanks", "maybe").
• Vague adjectives without context ("nice", "modern" alone without specifics).

6. When revising existing prompts:

• Specify which elements stay untouched.
• Highlight only the delta (e.g., "Move KPI cards above chart").

7. Layout prompt validation (if layout prompt generated):

• Word count: Target 150-200 words (absolute max 250 for complex layouts).
• Generic terminology: Uses descriptive terms ("metrics section", "chart area") NOT file/component references ("kpi-cards-v1", "component").
• Spatial relationships: Includes explicit positioning for all major regions (above, below, left, right, spanning).
• High-level focus: Describes purpose and behavior, NOT implementation details or micro-interactions.
• Independence: Can be used standalone in Stitch without other prompts or file context.
• Interactions: Includes page-level cross-region interactions (how regions relate/communicate).
• Structure: Follows template format (directive → regions → interactions → style → optimize).

5. Finalize & Return

1. Present the final prompt in Markdown with short paragraphs or bullet lists for readability. 2. If major assumptions were made (e.g., inferred color palette), call them out succinctly. 3. Suggest next steps if the brief indicates additional screens ("Create separate prompt for Settings screen to maintain atomicity").

6. MCP Generation (Optional)

After finalizing and saving the prompt file, check if MCP-based generation is available.

Detection

Check for the generate_screen_from_text MCP tool. This indicates the Stitch MCP server is configured.

If MCP Available

Offer generation:

Stitch MCP is available. Generate screens now?
  → Yes (generate screens from this prompt)
  → No (just save the prompt file)

If user accepts: Delegate to the generating-stitch-screens skill with the authored prompt file path.

If MCP Not Available

No action needed. Present standard prompt output with copy-paste instructions. Do not show any error or warning about MCP — the skill works fully in standalone mode.

When to Skip This Step

• Revision requests (changes to existing prompts are not auto-generated)
• User explicitly requested "just save" or "prompt only"
• Previous generation attempt for same feature already completed