skills.rest
dxiiren
dxiirenCOMMUNITY
Explore all skills by this author →
GitHub

stitch-design-taste

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

Updated Aug 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/dxiiren/project-skeleton --skill stitch-design-taste-dxiiren
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/dxiiren/project-skeleton/tree/main/.claude/skills-optional/taste-skill/stitch-skill
Command: npx skills add https://github.com/dxiiren/project-skeleton --skill stitch-design-taste-dxiiren

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated UI screens often look generic, using default fonts, purple gradients, and clichéd layouts. This Skill produces a structured DESIGN.md 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 atmosphere, color palette with hex codes, typography rules, component stylings, layout principles, motion specs, and responsive rules. - 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 Dials: Adjusts creativity, density, variance, and motion levels to match each project's vibe. - Use Case: Before prompting Google Stitch to generate screens for a new SaaS dashboard, generate a DESIGN.md that locks in Geist typography, a single emerald accent, asymmetric layouts, and spring-physics motion intent. ## Quick Start Ask the assistant to generate a DESIGN.md design system for your project using the stitch-design-taste skill, describing your desired vibe and 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?▼

Generate a DESIGN.md file describing visual atmosphere, color palette with hex codes, typography rules, component stylings, layout principles, and motion intent. Stitch interprets these natural-language visual descriptions to generate screens matching your design language.

What should a DESIGN.md file contain for AI screen generation?▼

A DESIGN.md should include visual theme and atmosphere, color roles with hex values, typography stacks and scale, component behaviors, layout and responsive rules, motion philosophy, and an explicit anti-patterns list of banned design clichés.

Can I use this design system with Cursor or other coding agents?▼

Yes. The generated DESIGN.md works with Google Stitch directly and via the Stitch MCP server for programmatic integration with Cursor, Antigravity, or Gemini CLI. The motion section also guides coding agents implementing the exported designs.

Why does AI-generated UI look generic and how do I fix it?▼

AI defaults to safe patterns like Inter font, purple gradients, and 3-column card grids. Fix this by encoding explicit bans and opinionated rules in a design system file: unique fonts, single calibrated accent, asymmetric layouts, and banned clichés.

Does the design system support responsive mobile layouts?▼

Yes. The rules mandate mobile-first collapse below 768px, no horizontal scroll, 44px minimum touch targets, clamp-based typography scaling, and verification at 375px, 768px, and 1440px viewports.

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
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
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate