skills.rest
KlyrhonMiko
KlyrhonMikoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

stitch-design-taste

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

Updated Aug 25, 2026
Search Tags:#typography#frontend#design system#color palette#design tokens#ui design#google stitch
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill stitch-design-taste-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/stitch-skill
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill stitch-design-taste-klyrhonmiko

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 strict typography, color, layout, and motion rules 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, and motion philosophy. - Anti-Pattern Enforcement: Encodes explicit banned patterns such as Inter font, pure black, neon glows, 3-column equal card grids, and AI copywriting clichés. - Configurable Dials: Adjusts creativity, density, variance, and motion levels to match each project's vibe. - Use Case: A designer starting a SaaS dashboard project uses this Skill to generate a DESIGN.md, then feeds it to Google Stitch so every generated screen follows the same calibrated design language. ## Quick Start Use the stitch-design-taste skill to generate a DESIGN.md design system file for my new productivity dashboard project.

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 that describes visual atmosphere, color palette with hex codes, typography rules, component stylings, layout principles, and motion intent in natural language. Stitch interprets these visual descriptions to generate screens aligned with your design language.

What is a DESIGN.md file used for in Stitch?▼

A DESIGN.md file acts as the single source of truth for prompting Google Stitch to generate new screens. It pairs descriptive design rules with precise values like hex codes and rem sizes so Stitch's AI agent produces consistent, premium interfaces.

Does Google Stitch generate animations from DESIGN.md?▼

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

Can I use the generated design system with Cursor or Gemini CLI?▼

Yes, the DESIGN.md output works with Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI. The documented motion and component specs guide coding agents when building the exported designs into live products.

Why does AI-generated UI look generic and how to avoid it?▼

Generic AI UI comes from default fonts like Inter, purple neon gradients, and symmetric three-card layouts. Enforcing explicit anti-pattern bans, a single calibrated accent color, distinctive fonts, and asymmetric grid rules produces distinctive output.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

Generate brand identity kits with logos, color palettes, typography, and style guides.

Community
Advanced
tanveerriaztanveerriaz
1

stitch-design-taste

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

Community
Intermediate
adilkalamadilkalam

design-qa-skill

Automate design QA checks across breakpoints and generate severity-scored reports.

Community
Basic
lushly-devlushly-dev
4

implement-designs

Extract Figma design tokens and convert them to CSS custom properties.

Official
Advanced