stitch-design-taste

Generate Google Stitch design system files with DESIGN.md specifications.

Updated Jan 30, 2026

Search Tags:#typography #anti-patterns #layout #design system #motion #stitch #ui direction

Ready to run

npx skills add https://github.com/Rayzerrek/dotfiles --skill stitch-design-taste-rayzerrek

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/Rayzerrek/dotfiles/tree/main/.pi/agent/skills/stitch-design-taste
Command: npx skills add https://github.com/Rayzerrek/dotfiles --skill stitch-design-taste-rayzerrek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns a project’s visual intent into a clear, agent-friendly design system for Google Stitch, replacing generic UI output with precise rules for atmosphere, typography, color, layout, and motion.

Core Features & Use Cases

Design System Authoring: Creates a structured DESIGN.md that defines the full visual language for Stitch screen generation.
Premium UI Direction: Calibrates mood, density, variance, and motion so the output feels intentional instead of templated.
Guardrails and Constraints: Encodes banned patterns for typography, colors, spacing, layout, and motion to prevent generic or low-quality results.
Use Case: Use it when you need a Stitch-ready design brief for a product page, dashboard, marketing flow, or app interface that must feel polished and distinctive.

Quick Start

Use this skill to write a DESIGN.md for a premium Google Stitch interface with strict layout, typography, color, and anti-pattern rules.

Frequently Asked Questions about stitch-design-taste

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a design system for Google Stitch interfaces?▼

To generate a design system for Google Stitch, use this Skill to author a structured DESIGN.md file. This document defines the visual language, typography, color, layout, and motion rules that downstream agents follow for screen generation.

What are UI anti-patterns and how do I prevent them in generated layouts?▼

UI anti-patterns are generic or low-quality design choices in typography, spacing, and motion. This Skill prevents them by encoding banned-pattern constraints and guardrails directly into your design system specification.

Can I use this to create a design brief for dashboards and marketing flows?▼

Yes, you can create a design brief for dashboards, marketing flows, product pages, and app interfaces. The Skill calibrates mood, density, and motion so the generated UI feels intentional and polished.

How do I set typography and spacing rules for a premium UI direction?▼

You set typography and spacing rules by writing a natural-language DESIGN.md specification. This Skill translates your visual intent into precise, agent-friendly parameters that replace generic UI output.

Do I need a SKILL.md file to define visual direction for Stitch?▼

Yes, you need a SKILL.md frontmatter entry for discovery alongside your DESIGN.md specification. These files ensure downstream agents can follow your premium visual direction without ambiguity.

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

Generated UI looks generic when it lacks strict constraints for atmosphere and variance. Fix it by using this Skill to calibrate mood, density, and motion, and by defining banned-pattern constraints for colors and layout.