skills.rest
gerald-ica
gerald-icaCOMMUNITY
Explore all skills by this author →
GitHub

stitch-design-taste

Generate DESIGN.md files enforcing premium UI standards for Google Stitch.

Updated Apr 14, 2026
Search Tags:#design#ux#design-system#stitch#design-taste#ui-prompting
One-click install
npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill stitch-design-taste-gerald-ica
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/gerald-ica/opencode-config-snapshot/tree/main/opencode/skills/stitch-skill
Command: npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill stitch-design-taste-gerald-ica

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs and UI language are often inconsistently documented across projects, making it hard to reproduce a premium, non-generic aesthetic at scale. This Skill provides a semantic blueprint that encodes a complete design system for Google Stitch, enabling automated generation of DESIGN.md documents that enforce a cohesive visual language and governance.

Core Features & Use Cases

  • Atmosphere Definition: captures mood, density, variance, and motion to guide visuals and layout decisions.
  • Color Calibration: specifies neutrals with a single accent, bans purple/neon aesthetics, and enforces a stable color system.
  • Typography Architecture: prescribes font stacks, scale hierarchy, and readability constraints for dashboards and apps.
  • Component Behaviors: details buttons, cards, inputs, loaders, and empty/error states to preserve a premium look-and-feel.
  • Layout & Grid Rules: enforces grid-first layouts, containment, responsive strategies, and motion guidelines.
  • Motion Philosophy: defines spring-based motion, perpetual micro-interactions, and performance boundaries.
  • Anti-Patterns: enumerates explicit design bans to prevent cliché or low-fidelity UI choices.

Use Case: Generate a DESIGN.md for a new Stitch UI project to ensure a premium, non-generic aesthetic across screens.

Quick Start

Generate a DESIGN.md for a new project applying the Taste Standard 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 a Google Stitch UI project?▼

To generate a DESIGN.md file for Google Stitch, use this Skill to encode your visual language, enforcing premium UI standards through structured sections for color calibration, typography, component behaviors, and motion philosophy. It outputs a complete semantic blueprint.

What is a design system prompt and how does it prevent generic UI?▼

A design system prompt prevents generic UI by enforcing explicit anti-pattern constraints, banning cliché aesthetics like neon colors, and prescribing stable tokens for atmosphere, layout, and typography. This ensures a cohesive, premium visual language across all generated screens.

Can I use this to define typography and color calibration rules for dashboards?▼

Yes, you can define typography architecture and color calibration rules for dashboards. The Skill specifies font stacks, scale hierarchy, readability constraints, and enforces neutrals with a single accent color to maintain a stable, premium dashboard design system.

How do I set up component behaviors and motion guidelines for a design system?▼

You set up component behaviors and motion guidelines by generating a structured DESIGN.md document that details buttons, cards, inputs, and empty states, while defining spring-based motion, perpetual micro-interactions, and performance boundaries for your UI.

Does this design system generator enforce layout and grid rules for responsive apps?▼

Yes, the design system generator enforces layout and grid rules for responsive apps by capturing density and variance constraints. It applies grid-first layouts, containment strategies, and responsive motion guidelines to preserve a premium look-and-feel across screen sizes.

What anti-patterns and design bans are enforced to maintain a premium aesthetic?▼

To maintain a premium aesthetic, the system enforces explicit design bans that prevent low-fidelity UI choices, specifically banning purple and neon aesthetics while restricting cliché visual elements through structured anti-pattern constraints in the generated documentation.

Related Skills

Explore More Design & Creative Skills→
clsandovalclsandoval

seedance-lighting

Specify named light sources and core parameters for Seedance 2.0 prompts.

Community
Intermediate
fatihkanfatihkan
7

stitch-design-taste

Generate DESIGN.md files encoding semantic UI specifications for Google Stitch screens.

Community
Advanced
christofferbergjchristofferbergj
5

frontend-design

Translate vague frontend briefs into distinctive UI components for React, Vue, or HTML/CSS/JS.

Community
Advanced
ChildoftheVibeChildoftheVibe

stitch-design-taste

Generate a DESIGN.md encoding a premium UI design language for Google Stitch.

Community
Advanced