skills.rest
djkloop
djkloopCOMMUNITY
Explore all skills by this author →
GitHub

stitch-design-taste

Generate DESIGN.md files encoding semantic design systems for Google Stitch.

Updated Apr 17, 2026
Search Tags:#typography#ui-design#design-system#motion#design-tokens#stitch
One-click install
npx skills add https://github.com/djkloop/n --skill stitch-design-taste-djkloop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/djkloop/n/tree/main/.trae/skills/stitch-design-taste
Command: npx skills add https://github.com/djkloop/n --skill stitch-design-taste-djkloop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill removes ambiguity and design drift by producing a single-source DESIGN.md that encodes a curated, premium visual language for Google Stitch agents, enabling consistent, non-generic screen generation across projects.

Core Features & Use Cases

  • Semantic DESIGN.md generation that includes atmosphere, color tokens with hex codes, precise typography scales, component styling rules, layout principles, responsive constraints, motion intent, and explicit anti-patterns.
  • Agent integration for Stitch, Cursor, Antigravity, or Stitch MCP workflows to convert semantic rules into deterministic screen prompts and developer-ready specs.
  • Use cases: create a hero-driven landing screen with inline-image typography, produce dashboard component specs with spring physics, or enforce brand-safe banned patterns across multiple screen exports.

Quick Start

Generate a DESIGN.md for a left-aligned, high-variance SaaS landing page using Electric Blue as the single accent and spring-based motion semantics.

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 screen generation?▼

To generate a design system for Google Stitch, you use a semantic DESIGN.md file that encodes color tokens, typography scales, layout rules, and motion specifications. This provides a single source of truth for agent-driven screen synthesis.

What is a DESIGN.md file used for in UI design automation?▼

A DESIGN.md file is used to remove design ambiguity by encoding a premium visual language, including hex colors, grid constraints, and explicit anti-patterns, enabling consistent and non-generic automated UI screen generation across projects.

Can I use a DESIGN.md file with Cursor or Stitch MCP workflows?▼

Yes, a generated DESIGN.md can be integrated with Cursor, Antigravity, or Stitch MCP workflows. It converts semantic design rules into deterministic screen prompts and developer-ready component specs.

How do I enforce brand-safe patterns and prevent design drift in automated UI generation?▼

You can enforce brand-safe patterns by generating a DESIGN.md that includes an explicit anti-pattern list alongside semantic layout principles and motion intent. This ensures automated agents avoid banned visual patterns during screen exports.

Does generating design tokens for Stitch require specific prerequisite components?▼

No specific components or dependencies are required to generate design tokens for Stitch. The process outputs precise hex color values, typography scales, and animation parameters directly into a portable markdown file.

Related Skills

Explore More Design & Creative Skills→
hanamizukihanamizuki
127

taste-stitch

Translate design requirements into a DESIGN.md scaffold for Google Stitch.

Community
Advanced
RoyincogRoyincog

design-md

Analyze Stitch projects and generate a semantic DESIGN.md design-system document.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

paper

Standardize UI design with token-based spacing, color palettes, and font scales.

Community
Intermediate
AlexiosBluffMaraAlexiosBluffMara
2

popular-web-designs

Catalog design-system templates and tokens from real websites into structured HTML/CSS.

Community
Intermediate