skills.rest
Leonxlnx
LeonxlnxCOMMUNITY
Explore all skills by this author →
Website𝕏@lexnlinGitHub

stitch-design-taste

Generate tokenized DESIGN.md files with hex codes, font stacks, and motion parameters for Stitch.

74.5k|5.1k|Updated Feb 19, 2026
Search Tags:#typography#design-system#motion#ui-patterns#stitch#design-spec
One-click install
npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste-leonxlnx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/Leonxlnx/taste-skill/tree/main/skills/stitch-skill
Command: npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste-leonxlnx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes ambiguity between creative design intentions and machine-readable Stitch inputs by producing a single-source-of-truth DESIGN.md that encodes premium UI tokens, precise color and typography values, layout systems, motion rules, and explicit anti-patterns so agents can generate consistent, high-quality screens.

Core Features & Use Cases

  • Structured DESIGN.md generation: Converts curated design rules into Stitch-friendly visual descriptions with exact hex codes, font stacks, grid specs, and responsive rules.
  • Motion and interaction specs: Encodes spring physics, staggered reveals, and hardware-accelerated animation constraints for downstream implementation.
  • Component & anti-pattern enforcement: Documents button, card, input, hero, and layout rules plus a clear list of banned patterns to prevent generic or low-quality outputs.
  • Use Case: Turn a product brief or existing UI audit into a Stitch-ready DESIGN.md that frontend agents can use to produce premium, non-generic screens.

Quick Start

Generate a DESIGN.md for a premium asymmetric web UI using stitch-design-taste with Electric Blue as the primary accent and spring motion parameters.

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 Stitch-ready design spec for frontend agents?▼

To generate a Stitch-ready design spec, you provide a product brief or UI audit and the Skill outputs a DESIGN.md file containing exact hex codes, typography scales, grid layouts, and motion parameters for frontend agents to consume.

What is a DESIGN.md file and how does it work with Google Stitch?▼

A DESIGN.md file is a machine-readable visual description that encodes premium UI tokens, color palettes, typography scales, and interaction semantics, allowing Google Stitch and downstream coding agents to generate consistent, high-quality screens.

Can I specify spring physics and motion parameters in a design system for UI generation?▼

Yes, you can specify spring physics and motion parameters in your design system. The Skill encodes spring stiffness, damping, staggered reveals, and hardware-accelerated animation constraints directly into the DESIGN.md output.

How do I prevent generic or low-quality UI outputs when using agent-driven frontend pipelines?▼

To prevent generic UI outputs, the generated DESIGN.md includes explicit anti-patterns and a banned patterns list alongside component usage guidance, ensuring frontend agents avoid low-quality designs and maintain premium visual standards.

Does this design spec generator require any external dependencies or component libraries?▼

No external dependencies or component libraries are required. The Skill operates independently to translate curated design rules into a structured DESIGN.md file with tokenized values and responsive rules ready for Stitch.

What should a premium UI design specification include for automated screen generation?▼

A premium UI design specification should include tokenized color palettes, exact font stacks, grid layouts, responsive rules, interaction semantics, and clear component usage guidance to ensure automated screen generation produces non-generic results.

Related Skills

Explore More Design & Creative Skills→
caobingshengcaobingsheng
1

design-md

Analyze Stitch projects to generate DESIGN.md files documenting design systems.

Community
Advanced
SnatchPlaySnatchPlay

stitch-design-taste

Generate a DESIGN.md file with UI/UX standards for Google Stitch designs.

Community
Advanced
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
lagarcesslagarcess
1

stitch-design-taste

Generate DESIGN.md files with Stitch-readable semantic design descriptions.

Community
Intermediate