stitch-design-taste

Generate DESIGN.md specifications for Google Stitch from design taste rules.

Updated Apr 22, 2026
One-click install
npx skills add https://github.com/anonymouswhite07/Portfolio-v1 --skill stitch-design-taste-anonymouswhite07
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/anonymouswhite07/Portfolio-v1/tree/main/.agents/skills/stitch-design-taste
Command: npx skills add https://github.com/anonymouswhite07/Portfolio-v1 --skill stitch-design-taste-anonymouswhite07

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design skill automates the creation of DESIGN.md files optimized for Google Stitch by translating frontend design taste into semantic, Stitch-friendly specifications for color, typography, layout, and motion.

Core Features & Use Cases

  • Visual atmosphere mapping to mood, density, and motion intensity that Stitch can interpret for prompts.
  • Color calibration with neutral bases and a single accent, including hex codes and usage rules.
  • Typography architecture with font stacks, scale hierarchy, and anti-patterns.
  • Component behaviors: buttons, cards, inputs, loaders, and empty/error states defined for Stitch output.
  • Layout principles: grid-first structures, max-width containment, responsive rules, and non-overlapping layouts.
  • Motion philosophy: spring-based dynamics, perpetual micro-interactions, and cascade reveals.
  • Anti-patterns: explicit bans to prevent generic AI UI clichés and unsafe patterns.

Quick Start

Provide a project brief and I will generate a DESIGN.md tuned for Google Stitch that encodes atmosphere, color, typography, layout, and motion 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.md file for Google Stitch?

To generate a DESIGN.md file for Google Stitch, provide a project brief to translate frontend design taste into semantic specifications covering visual atmosphere, color, typography, layout, and motion rules.

What is a Stitch-friendly design system specification?

A Stitch-friendly design system specification is a structured DESIGN.md file that encodes visual atmosphere, color palettes, typography architecture, layout principles, and motion philosophy into semantic tokens interpretable by Google Stitch.

How do I prevent generic AI UI clichés in generated frontend designs?

Prevent generic AI UI clichés in frontend designs by applying explicit anti-pattern bans within a DESIGN.md file, restricting unsafe layouts and enforcing structured design tokens for component behaviors.

Does Google Stitch support custom typography hierarchy and motion planning?

Google Stitch supports custom typography hierarchy and motion planning when these rules are defined as structured tokens within a DESIGN.md file, specifying font stacks, scale hierarchy, and spring-based motion dynamics.

Can I define component behaviors for empty and error states in a design system?

You can define component behaviors for empty and error states by generating a DESIGN.md specification that maps button, card, input, and loader interactions into structured, Stitch-friendly visual rules.

What is the best way to translate frontend design taste into Stitch prompts?

The best way to translate frontend design taste into Stitch prompts is to map mood, density, and motion intensity into a structured DESIGN.md file with explicit color calibration and grid-first layout principles.