skills.rest
w0lzard
w0lzardCOMMUNITY
Explore all skills by this author →
GitHub

stitch-design-taste

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

Updated Jul 1, 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/w0lzard/Wolzard-s-Marketplace --skill stitch-design-taste-w0lzard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/stitch-design-taste
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill stitch-design-taste-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated UI screens often look generic, with default fonts, purple gradients, and cookie-cutter layouts. This Skill produces a structured DESIGN.md file that encodes a curated, opinionated design language so Google Stitch generates premium, non-generic interfaces. ## Core Features & Use Cases - Design System Generation: Creates a complete DESIGN.md covering color palettes with hex codes, typography rules, component stylings, layout principles, and motion specs. - Anti-Pattern Enforcement: Encodes explicit banned patterns (Inter font, pure black, neon glows, 3-column card grids, AI copywriting clichés) to prevent generic output. - Configurable Taste Dials: Adjusts creativity, density, variance, and motion levels to match each project's vibe. - Use Case: Before prompting Stitch to generate a SaaS dashboard, generate a DESIGN.md that locks in Geist typography, a single Electric Blue accent, asymmetric bento layouts, and spring-physics motion intent. ## Quick Start Ask the assistant to generate a DESIGN.md design system for your project describing the desired vibe, then paste it into Google Stitch before generating screens.

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 palette with hex codes, typography rules, component stylings, layout principles, and motion specs. Stitch interprets these natural-language visual descriptions to produce screens matching your design language.

What is a DESIGN.md file used for?▼

A DESIGN.md file is a single source of truth that encodes a project's design language in semantic, agent-friendly text. AI tools like Stitch read it to generate UI screens that follow your specific colors, fonts, spacing, and component behaviors instead of generic defaults.

How do I stop AI-generated UI from looking generic?▼

Encode explicit anti-patterns in your design system: ban Inter font, pure black, neon glows, 3-column equal card grids, and AI copywriting clichés. Pair these bans with distinctive fonts like Geist or Satoshi and a single calibrated accent color.

Does Google Stitch support animations in generated designs?▼

Stitch generates static screens and does not animate. The DESIGN.md motion section documents intended behavior like spring physics and staggered reveals so coding agents such as Cursor or Antigravity can implement animations when building the live product.

Can I adjust the design style for different projects?▼

Yes, the system uses four configurable dials: Creativity, Density, Variance, and Motion Intent, each on a 1-10 scale. Low creativity produces quiet minimal interfaces while high values produce expressive editorial layouts with bold typography.

Related Skills

Explore More Design & Creative Skills→
arvindbattulaarvindbattula

design-setup

Define target audience, brand personality, typography, color, spacing, and layout for frontend design.

Community
Advanced
tanveerriaztanveerriaz
1

stitch-design-taste

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

Community
Intermediate
ferrarifankid04ferrarifankid04

stitch-design-taste

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

Community
Intermediate
google-labs-codegoogle-labs-code
8.2k

stitch::extract-design-md

Extract a design system document from frontend source code without building the app.

Official
Advanced