skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

stitch-design-taste

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

Updated Jun 30, 2026
Search Tags:#typography#anti-patterns#design system#color palette#design tokens#ui design#google stitch
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill stitch-design-taste-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_agents/skills/stitch-design-taste
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill stitch-design-taste-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, relying on default fonts, purple gradients, and cookie-cutter card layouts. This Skill encodes a strict, opinionated design system into a DESIGN.md file that Google Stitch can interpret, so generated screens follow premium typography, color, layout, and motion standards instead of AI design clichés. ## Core Features & Use Cases - Semantic Design System Generation: Produces a structured DESIGN.md covering atmosphere, color palette with hex codes, typography rules, component stylings, layout principles, responsive rules, and motion philosophy. - Configurable Taste Dials: Adjusts Creativity, Density, Variance, and Motion Intent levels (1-10) to match each project's vibe before generating the design system. - Anti-Pattern Enforcement: Encodes explicit banned patterns such as Inter font, pure black, neon glows, 3-column equal card grids, filler scroll text, and AI copywriting clichés. - Use Case: A designer starting a SaaS dashboard project uses this Skill to generate a DESIGN.md with Geist typography, a single Electric Blue accent, bento grid layouts, and spring-physics motion specs, then feeds it to Google Stitch to generate consistent, non-generic screens. ## Quick Start Generate a DESIGN.md design system for my project using the stitch-design-taste skill with creativity level 8 and an emerald 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?▼

Define the project's atmosphere using density, variance, and motion dials, then document color roles with hex codes, typography stacks, component behaviors, layout principles, and anti-patterns in a DESIGN.md file. Stitch interprets these semantic visual descriptions when generating screens.

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

A DESIGN.md file is the single source of truth that prompts Google Stitch to generate new screens aligned with a curated design language. It pairs descriptive natural-language rules with precise values like hex codes, rem sizes, and spring physics parameters.

Does Google Stitch generate animations from a design system?▼

No, Stitch generates static screens and does not animate. The motion section of DESIGN.md documents intended behavior such as spring stiffness, damping, and staggered delays so coding agents like Cursor or Antigravity can implement animations later.

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

Yes, the Stitch MCP Server enables programmatic integration with Cursor, Antigravity, or Gemini CLI. The generated DESIGN.md guides these coding agents when building the exported static designs into live products.

Why are fonts like Inter banned in this design system?▼

Inter is banned in premium and creative contexts because it signals generic AI-generated design. The system forces distinctive alternatives like Geist, Outfit, Cabinet Grotesk, or Satoshi, and bans generic serifs in favor of modern options like Fraunces or Instrument Serif.

What are the limitations of AI-generated UI without a design system?▼

Without explicit constraints, AI tools default to purple neon gradients, centered heroes, three equal feature cards, circular spinners, and clichéd copy. A DESIGN.md with anti-pattern bans prevents these tells and enforces consistent, intentional output.

Related Skills

Explore More Design & Creative Skills→
Ohh-889Ohh-889
792

design-taste-frontend

Generates non-templated frontend designs for landing pages, portfolios, and redesigns.

Community
Advanced
cherishwinscherishwins
3

stitch-design-taste

Generates DESIGN.md files encoding premium UI design standards for Google Stitch screen generation.

Community
Intermediate
danieliudidanieliudi

stitch-design-taste

Generates DESIGN.md files that enforce premium UI standards for Google Stitch screen generation.

Community
Intermediate
AradotsoAradotso
3

figma-flutter-mcp-design-to-code

Extract Figma design tokens, components, and screens into structured Flutter guidance.

Official
Intermediate