stitch-design-taste

Mechanism

When It Triggers · How It Works · What It Produces

Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.

Trigger Timing

When a user needs to generate premium, non-generic UI screens via Google Stitch and lacks a structured design spec. Especially useful before prompting Stitch to ensure visual consistency.

Working Mechanism

Analyze project intent to set atmosphere (density, variance, motion)
Map calibrated color palette with hex and banned patterns
Define typography, hero, components, layout, responsive, motion rules
Encode explicit anti-patterns
Output a single DESIGN.md as Stitch's source of truth

Outcome

A agent-friendly DESIGN.md enforcing anti-slop UI standards, enabling Stitch to produce premium interfaces with strict typography, asymmetric layouts, and micro-motion.

Use Cases

Two Typical Use Cases

Scenario 01

Stitch SaaS dashboard design spec

A product designer plans to use Google Stitch to draft a new SaaS dashboard. They invoke this skill to produce a DESIGN.md with banned serif fonts, monospace numbers, and calibrated zinc palette. Stitch then generates screens matching the spec, avoiding AI clichés and saving redesign cycles.

Scenario 02

Stitch landing page creative direction

A startup founder wants a landing page via Stitch with asymmetric hero and inline image typography. Using this skill, they get a DESIGN.md enforcing variance 8, no centered hero, and perpetual micro-motion. The output is distinctive and premium without manual prompt engineering.

Skill Relationships

Which Skills I Use · Which Skills Use Me

Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.

Tier 1 · These Skills Use Me

No explicit dependency

Tier 2 · Current Skill

stitch-design-tasteStyle Guide

Tier 3 · I Use These Skills

No explicit dependency on other Skills

Full Relationship Graph

Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.

Skill File

SKILL.md

Open in GitHub ↗

SKILL.mdLoading from GitHub…

Skill Composition

Open in GitHub ↗

SKILL.md50.0%
other50.0%

▸skills/stitch-design-taste/
▸root
- ·DESIGN.md
- ·SKILL.md

Per the Agent Skills spec, SKILL.md is the only required file. The colored bars classify the rest into the three spec-aligned optional directories (scripts / references / assets) and an 'other' bucket. The full directory tree is below.

Related in Skillset

You May Also Need These Skills

imagegen-frontend-web

Elite frontend image-direction skill that generates premium, conversion-aware website design references. It enforces one separate horizontal image per section and uses a variation engine to break generic AI patterns. Outputs consistent, art-directed comps developers can accurately recreate.

Style Guide

image-to-code

Elite image-to-code skill for visually important web tasks. It first generates large section-specific design images, deeply analyzes them, then implements the website to match. Key methods: mandatory image-first rule, per-section fresh generation in Codex, deep design extraction. Value: premium, readable, faithful frontend from artistic references.

Workflow

brandkit

Premium brand-kit image generation skill that creates high-end brand-guideline boards, logo systems, and identity decks. It infers brand strategy, applies restrained composition and logo concept methods across flexible grid layouts. Output is a presentation-ready, visually expensive brand world image usable for identity, UI, and marketing.

Style Guide

gpt-taste

Elite UX/UI engineer skill that breaks LLM default biases by simulating Python RNG for true layout variance, enforcing AIDA structure, 2-line hero rule, gapless bento grids, and strict GSAP ScrollTriggers. It delivers award-level, motion-rich, non-templated frontend code with rigorous pre-flight design plans.

Style Guide · Workflow

/stitch-design-taste

When It Triggers · How It Works · What It Produces

Trigger Timing

Working Mechanism

Outcome

Two Typical Use Cases

Stitch SaaS dashboard design spec

Stitch landing page creative direction

Which Skills I Use · Which Skills Use Me

Full Relationship Graph

SKILL.md

Skill Composition

You May Also Need These Skills

imagegen-frontend-web

image-to-code

brandkit

gpt-taste

When It Triggers · How It Works · What It Produces

Trigger Timing

Working Mechanism

Outcome

Two Typical Use Cases

Stitch SaaS dashboard design spec

Stitch landing page creative direction

Which Skills I Use · Which Skills Use Me

Full Relationship Graph

SKILL.md

Skill Composition

You May Also Need These Skills

imagegen-frontend-web

image-to-code

brandkit

gpt-taste