skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

stitch-design-taste

Generates Google Stitch DESIGN.md design systems with typography, color, layout, and motion rules.

3|Updated Jul 17, 2026
Search Tags:#typography#frontend#design system#color palette#design tokens#ui design#google stitch
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill stitch-design-taste-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/stitch-design-taste
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill stitch-design-taste-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated screens often look generic, using default fonts, neon gradients, and clichéd layouts. This Skill produces a structured DESIGN.md that encodes premium design taste rules so Google Stitch generates distinctive, non-generic interfaces. ## Core Features & Use Cases - Design System Generation: Creates complete DESIGN.md files covering visual atmosphere, color palettes with hex codes, typography rules, component stylings, layout principles, and motion intent. - 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 Taste Dials: Adjusts creativity, density, variance, and motion levels to match each project's vibe. - Use Case: A designer building a SaaS dashboard in Google Stitch uses this Skill to generate a DESIGN.md specifying Geist typography, a single emerald accent, asymmetric bento layouts, and spring-physics motion intent, then feeds it to Stitch for screen generation. ## Quick Start Ask the AI to generate a Stitch DESIGN.md design system for your project, describing the desired vibe, accent color, and density level.

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?▼

Provide your project's vibe, accent color preference, and density level, and the Skill generates a DESIGN.md with visual atmosphere, color roles with hex codes, typography rules, component stylings, layout principles, and anti-patterns that Stitch interprets during screen generation.

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

A DESIGN.md is the single source of truth that guides Google Stitch's AI when generating screens. It describes visual themes, color values, font stacks, component behaviors, and banned patterns in natural language paired with precise values.

Does Google Stitch support animations from DESIGN.md?▼

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

Which fonts are banned in this design system?▼

Inter is banned in premium contexts, and generic serifs like Times New Roman, Georgia, and Garamond are banned everywhere. Recommended alternatives include Geist, Satoshi, Cabinet Grotesk, Outfit, and distinctive modern serifs like Fraunces.

What are the limitations of Stitch design system generation?▼

The Skill produces semantic guidance that Stitch may not render exactly. Generated DESIGN.md files still require review against the actual product brief, brand constraints, accessibility needs, and screen content before use.

Related Skills

Explore More Design & Creative Skills→
andersoncollabandersoncollab

aesthetic-direction

Generate 3–5 ranked visual aesthetic directions with typography and color guidance.

Community
Intermediate
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
vobasevobase
59

react:components

Convert Stitch HTML designs into modular React components with shadcn/ui and Tailwind.

Official
Advanced