skills.rest
muhammaddadu
muhammaddaduCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

stitch-design-taste

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

1|1|Updated Jul 6, 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/muhammaddadu/ai-skill-collection --skill stitch-design-taste-muhammaddadu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/muhammaddadu/ai-skill-collection/tree/main/3-delivery/stitch-design-taste
Command: npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill stitch-design-taste-muhammaddadu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces 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 screens. ## Core Features & Use Cases - Design System Generation: Creates a complete DESIGN.md covering color palettes with hex codes, typography rules, component stylings, layout principles, responsive rules, and motion specs. - Anti-Pattern Enforcement: Encodes explicit banned patterns (Inter font, pure black, neon glows, 3-column card rows, AI copywriting clichés) to prevent generic output. - Configurable Dials: Adjusts creativity, density, variance, and motion intent levels to match each project's vibe. - Use Case: Before prompting Google Stitch to generate a SaaS dashboard, generate a DESIGN.md that forces Geist typography, a single emerald accent, asymmetric bento layouts, and spring-physics motion intent so every screen stays on-brand. ## Quick Start Generate a DESIGN.md design system file for my project using the stitch-design-taste skill with creativity 8 and an electric blue accent.

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 file for Google Stitch?▼

Define the visual atmosphere, color palette with hex codes, typography rules, component stylings, layout principles, and motion specs in a DESIGN.md file. Stitch interprets these semantic visual descriptions to generate screens matching your design language.

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

A DESIGN.md file is the single source of truth that tells AI design agents like Google Stitch which colors, fonts, layouts, and component behaviors to use. It also lists banned anti-patterns so generated screens avoid generic AI aesthetics.

Does Google Stitch support custom fonts and color palettes?▼

Yes, Stitch interprets descriptive design rules paired with specific values like hex codes and font names. Providing explicit typography stacks and calibrated accent colors produces consistent, on-brand screens instead of default styling.

Can I use the generated DESIGN.md with Cursor or other coding agents?▼

Yes, the DESIGN.md works with any coding agent including Cursor, Antigravity, or Gemini CLI, optionally via the Stitch MCP Server. The motion section documents intended animation behavior so coding agents implement it correctly.

Why do AI-generated interfaces look generic and how to avoid it?▼

AI defaults to safe patterns like Inter font, purple gradients, centered heroes, and 3-column card rows. Encoding explicit anti-pattern bans and opinionated rules for typography, color, and layout forces distinctive, curated output.

Related Skills

Explore More Design & Creative Skills→
OpenLaborOpenLabor
4

Brand Strategy

Define brand positioning, audience segments, and messaging hierarchy into actionable steps.

Official
Intermediate
naveedharrinaveedharri
53

stitch-design-taste

Generate DESIGN.md files encoding design rules for Google Stitch.

Community
Advanced
adilkalamadilkalam

design-qa-skill

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

Community
Basic
sheriaxsheriax

clerk-custom-ui

Create custom Clerk authentication flows and theme components with React hooks.

Official
Intermediate