stitch-design-taste

Generates DESIGN.md design system files for Google Stitch screen generation.

3|1|Updated Apr 29, 2026
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill stitch-design-taste-firstsun-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/frontend-product-design/skills/stitch-design-taste
Command: npx skills add https://github.com/firstsun-dev/skills --skill stitch-design-taste-firstsun-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, relying on default fonts, purple gradients, and predictable card layouts. This Skill encodes a strict, opinionated design language into a DESIGN.md file so Google Stitch produces premium, non-generic screens consistently. ## Core Features & Use Cases - Semantic Design System Generation: Produces a complete DESIGN.md covering atmosphere, color palette with hex codes, typography rules, component stylings, layout principles, motion specs, and responsive rules. - Anti-Pattern Enforcement: Encodes explicit banned patterns (Inter font, pure black, neon glows, 3-column card rows, AI copywriting clichés) so Stitch avoids common AI design tells. - Configurable Taste Dials: Adjusts creativity, density, variance, and motion levels to match each project's vibe before generating the design system. - Use Case: A designer starting a SaaS dashboard project uses this Skill to generate a DESIGN.md with a Zinc-neutral palette, Geist typography, bento grid layouts, and spring-physics motion intent, then feeds it to Stitch to generate on-brand screens. ## Quick Start Ask the agent to generate a DESIGN.md design system for your project using the stitch-design-taste skill, describing your desired vibe and accent color.

Frequently Asked Questions about stitch-design-taste

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

FAQPage Schema
How do I create a design system for Google Stitch?▼

Generate a DESIGN.md file describing visual atmosphere, color roles with hex codes, typography rules, component stylings, layout principles, and motion intent in natural language. Stitch interprets these semantic descriptions to produce screens matching your design language.

How to avoid generic AI-generated UI design?▼

Encode explicit anti-patterns in your design system: ban default fonts like Inter, pure black, neon glows, 3-column equal card grids, and AI copywriting clichés. Pair these bans with specific alternatives such as Geist typography, Zinc neutrals, and asymmetric bento layouts.

Does Google Stitch support custom fonts and colors?▼

Yes, Stitch interprets descriptive design language paired with precise values. Provide font family names like Geist or Satoshi and exact hex codes for each color role, and Stitch applies them when generating screens.

Can Stitch generate animations in the designs it produces?▼

No, Stitch generates static screens only. The DESIGN.md motion section documents intended animation behavior, such as spring physics and staggered reveals, so coding agents like Cursor or Antigravity can implement it during development.

What are the limitations of prompt-based design systems?▼

Prompt-based systems guide rather than guarantee output, so results can vary between generations. They also cannot enforce code-level constraints directly; precise values and explicit banned patterns improve consistency but require review of generated screens.