skills.rest
dnkrow
dnkrowCOMMUNITY
Explore all skills by this author →
GitHub

stitch-design-taste

Generate an opinionated semantic DESIGN.md for Google Stitch with typography, color, layout, and motion constraints.

1|Updated May 15, 2026
Search Tags:#typography#design system#color palette#responsive layout#stitch#ui generation#semantic design rules
One-click install
npx skills add https://github.com/dnkrow/skill --skill stitch-design-taste-dnkrow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/dnkrow/skill/tree/main/clairement/stitch-design-taste
Command: npx skills add https://github.com/dnkrow/skill --skill stitch-design-taste-dnkrow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes inconsistency and “AI slop” in UI generation by encoding a strict, opinionated semantic design language into a single DESIGN.md file.

Core Features & Use Cases

  • Design-system authoring: Produces an agent-friendly DESIGN.md that specifies atmosphere, tokens (with hex), typography rules, and banned patterns.
  • Stitch screen alignment: Translates anti-pattern frontend directives into natural-language rules Stitch can reliably interpret for consistent screen generation.
  • Creative layout & motion intent: Includes layout constraints (grid-first, asymmetric hero rules, responsive collapse) and motion philosophy (spring physics, transform/opacity only).
  • Use case: When building multiple marketing/app screens for a project, generate a shared taste baseline so every new screen matches the same premium visual standard.

Quick Start

Generate a stitch DESIGN.md for your project by prompting the agent to create DESIGN.md using the stitch-design-taste skill so the output follows the documented palette, typography, layout, responsive, motion, and banned-pattern constraints.

Frequently Asked Questions about stitch-design-taste

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

FAQPage Schema
How do I prevent generic and inconsistent UI when generating designs with Google Stitch?▼

To prevent inconsistent UI outputs in Google Stitch, you can generate a semantic DESIGN.md file. This encodes strict typography rules, single-accent color palettes, and layout constraints to stop generic AI slop and ensure consistent screen generation.

What is a semantic design system document for AI UI generation?▼

A semantic design system document is an agent-friendly markdown file that specifies design tokens, typography rules, and banned UI patterns. It translates anti-pattern frontend directives into natural-language rules that AI generators reliably interpret for consistent screen outputs.

Does Google Stitch require a DESIGN.md file to generate responsive layouts?▼

Google Stitch does not strictly require a DESIGN.md file, but without one, UI outputs risk inconsistency. Providing grid-first responsive rules and layout collapse constraints ensures the generated screens reliably adhere to your specific design system.

How do I set up typography and color palette rules for AI design generation?▼

You set up typography and color palette rules by authoring an opinionated design system document. This involves defining single-accent color rules, typography calibration with hex tokens, and explicitly listing banned visual patterns for the UI generation agent.

Can I specify motion intent and animation guidelines for generated UI screens?▼

Yes, you can specify motion intent by including animation guidance in your design system rules. This covers hardware-accelerated animation directives, spring physics requirements, and transform/opacity-only constraints to control UI motion across generated screens.

Related Skills

Explore More Design & Creative Skills→
sandrasocialsandrasocial
1

stitch-design-taste

Generate a DESIGN.md defining a premium UI design system for Google Stitch.

Community
Intermediate
JoeyMckenzieJoeyMckenzie
27

stitch-design-taste

Generate DESIGN.md files encoding UI language for Google Stitch screen generation.

Community
Advanced
StonelukasStonelukas

frontend-design

Translate design references into production-grade frontend components and pages.

Community
Advanced
moshi-azzmoshi-azz
2

ckm:brand

Manage brand voice, visual identity, and asset validation using design tokens.

Community
Advanced