stitch-ui-design-spec-generator

Translate UI requests or PRD documents into Stitch-compatible design specification JSON objects.

38|5|Updated Feb 18, 2026
One-click install
npx skills add https://github.com/gabelul/stitch-kit --skill stitch-ui-design-spec-generator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-ui-design-spec-generator
Source: https://github.com/gabelul/stitch-kit/tree/main/skills/stitch-ui-design-spec-generator
Command: npx skills add https://github.com/gabelul/stitch-kit --skill stitch-ui-design-spec-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates inconsistent, unstructured design inputs for AI-generated UIs with Google Stitch, removing guesswork when defining visual style, theme, and layout parameters for screen generation.

Core Features & Use Cases

  • Structured Design Spec Generation: Parses natural language UI requests or PRD documents to output a standardized JSON design spec with theme, color, typography, density, and device type values.
  • Context-Aware Logic: Applies predefined design rules to map tone, use case, and context to Stitch-compatible enum values for consistent high-fidelity or wireframe output.
  • Use Case: When building a SaaS dashboard, the Skill automatically derives professional color schemes, compact density, and desktop device type from your request without manual configuration.

Quick Start

Ask your AI coding agent to generate a design spec for a warm, friendly food delivery app home screen to receive a structured JSON output ready for Stitch prompt generation.

Frequently Asked Questions about stitch-ui-design-spec-generator

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

FAQPage Schema
How do I generate a design spec from a PRD for Google Stitch UI generation?

Google Stitch UI generation requires a structured JSON design spec to ensure pixel-perfect screens. This format defines theme, color, typography, density, and device type values mapped to Stitch API enums, removing guesswork from visual style definition.

Can I use natural language to create a Stitch-compatible design spec?

Yes, you can use natural language to create a Stitch-compatible design spec. Providing a one-shot input like a request for a food delivery app automatically derives professional color schemes, compact density, and desktop device type without manual configuration.

How do I map UI tone and use case to Stitch API enum values?

To map UI tone and use case to Stitch API enum values, context-aware logic applies predefined design rules to your request. This ensures consistent high-fidelity or wireframe output by matching tone, use case, and context to Stitch-compatible enums.

Does this design spec generator support existing project design constraints?

Yes, the design spec generator supports existing project design constraints. It can inherit design constraints from your existing project to ensure consistent visual style definition across newly generated UI screens.

What is the best way to define visual style for AI coding agent workflows?

The best way to define visual style for AI coding agent workflows is translating requests into a standardized JSON design spec. This satisfies functional requirements for consistent theme, primary color, typography, roundness, density, and device type mapping.