stitch-design-taste

Generate a Stitch DESIGN.md from a project brief and visual direction.

Updated Jun 20, 2025
One-click install
npx skills add https://github.com/SaltFishGC/SaltFishGC.github.io --skill stitch-design-taste-saltfishgc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/SaltFishGC/SaltFishGC.github.io/tree/main/.trae/skills/stitch-design-taste
Command: npx skills add https://github.com/SaltFishGC/SaltFishGC.github.io --skill stitch-design-taste-saltfishgc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns a project brief into a high-quality DESIGN.md for Google Stitch, helping teams define a clear visual language instead of relying on generic or inconsistent UI taste.

Core Features & Use Cases

  • Design Direction Synthesis: Converts a product vibe into atmosphere, density, variance, and motion rules.
  • Visual System Definition: Specifies palette, typography, component styling, layout principles, responsiveness, and motion constraints.
  • Anti-Generic Guardrails: Encodes explicit bans for common AI-design clichés such as neon purple aesthetics, filler copy, and weak hierarchy.
  • Use Case: A product designer can use it to create a reusable design standard for a startup homepage, dashboard, or marketing site that needs to feel premium and distinctive.

Quick Start

Ask the skill to generate a Stitch DESIGN.md for your project using the desired mood, audience, and interface goals.

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?

To generate a design system for Google Stitch, provide a project brief with your desired mood, audience, and interface goals. The system synthesizes this input into a DESIGN.md file containing semantic specifications for palette, typography, layout, and motion constraints.

How do I avoid generic AI design clichés in UI generation?

To avoid generic AI design clichés in UI generation, use a design system that encodes explicit anti-pattern guardrails. This bans common issues like neon purple aesthetics, filler copy, and weak hierarchy, ensuring your interface feels premium and distinctive.

What is included in a Stitch design system documentation?

Stitch design system documentation includes atmosphere, density, variance, and motion rules derived from a product vibe. It specifies exact palette, typography, component styling, layout principles, responsiveness, and motion constraints in an AI-readable format.

Can I use this for a startup homepage and dashboard design?

Yes, you can use it for a startup homepage and dashboard design. It creates a reusable design standard that helps product designers define a clear visual language, ensuring consistent and premium UI across marketing sites and application screens.

Do I need visual direction input to generate a UI design system?

Yes, you need visual direction input to generate a UI design system. The process converts your product vibe and interface goals into strict semantic specifications, requiring defined colors, fonts, spacing, and responsiveness to build the documentation.

What is the best way to define typography and layout rules for AI screen generation?

The best way to define typography and layout rules for AI screen generation is to create a strict semantic specification document. This ensures the AI applies the correct visual language, spacing, and motion constraints to your interface automatically.