stitch-design-taste

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

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill stitch-design-taste-gmolike
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/stitch-design-taste
Command: npx skills add https://github.com/gmolike/Claude-Template --skill stitch-design-taste-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, with default fonts, purple gradients, and predictable card layouts. This Skill produces a structured DESIGN.md file that encodes a curated, opinionated design language so Google Stitch generates premium, non-generic screens. ## Core Features & Use Cases - Design System Generation: Creates a complete DESIGN.md covering atmosphere, color palette with hex codes, typography rules, component stylings, layout principles, motion specs, and banned anti-patterns. - Configurable Taste Dials: Adjusts creativity, density, variance, and motion levels (1-10) to match each project's vibe before generating the design system. - Anti-Pattern Enforcement: Explicitly bans AI design clichés such as Inter font, pure black, neon glows, 3-column equal card grids, and filler UI text. - Use Case: Before prompting Stitch to generate a SaaS dashboard, run this Skill to produce a DESIGN.md that forces asymmetric layouts, spring-physics motion intent, and a single calibrated accent color. ## 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 containing visual atmosphere descriptions, color palettes with hex codes, typography rules, component stylings, layout principles, and motion specs. Stitch interprets these semantic visual descriptions to produce consistent, non-generic screens.

What is a DESIGN.md file used for in AI UI generation?

A DESIGN.md file acts as the single source of truth for prompting AI design tools like Google Stitch. It encodes color roles, font stacks, component behaviors, and banned anti-patterns so generated screens follow a curated design language.

How do I avoid generic AI-generated UI designs?

Enforce explicit anti-patterns: ban Inter font, pure black, neon purple gradients, 3-column equal card layouts, and filler text like scroll arrows. Use distinctive fonts such as Geist or Satoshi, one accent color under 80% saturation, and asymmetric layouts.

Does Google Stitch generate animations from a design system?

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 semantic design system prompts?

Semantic descriptions guide but do not guarantee pixel-perfect output, since the AI interprets natural-language rules. Precise hex codes and values improve consistency, but generated screens still require review against responsive and accessibility requirements.