stitch-design-tasteby Leonxlnx

Stitch Design Taste Skill.

A Claude Code and Codex skill for brand and design-system work: writes a DESIGN.md for Google Stitch with an emphasis on visual distinctiveness.

Brand & Design Systems
DESIGN.md

Download OpenDesign View usage guide

Leonxlnx/taste-skill · skills/stitch-skill/SKILL.mdSKILL.md

--- name: stitch-design-taste description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. --- ## Prerequisites ## The Goal ## Analysis & Synthesis Instructions ## Output Format (DESIGN.md Structure) ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Front matter and section headings read from the upstream file on 2026-09-14 · 11,732 characters in full

01 What it does

What the stitch-design-taste Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill generates DESIGN.md files optimized for Google Stitch screen generation. It translates anti-slop frontend engineering directives into Stitch's native semantic design language — descriptive, natural-language rules paired with precise values that Stitch's AI agent can interpret. The file serves as the single source of truth for prompting Stitch to generate premium, non-generic interfaces.

It enforces strict typography rules, calibrated color palettes, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. The skill includes explicit anti-pattern lists that ban AI design clichés like Inter font, neon glows, centered hero sections, and generic placeholder content.

What it produces

A DESIGN.md file with seven structured sections: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles, Motion & Interaction, and Anti-Patterns

See the example prompt ↗

How It Works

01
Define the Atmosphere
Evaluate the target project's intent using evocative adjectives from the taste spectrum across three dimensions: Density (1-10 from Airy to Cockpit Dense), Variance (1-10 from Symmetric to Chaotic), and Motion (1-10 from Static to Cinematic).
02
Map the Color Palette
For each color provide descriptive name, hex code, and functional role. Maximum one accent color with saturation below 80%.
03
Define the Hero Section
Create striking first impressions using inline image typography (small photos embedded between words at type-height), asymmetric structures when variance exceeds 4, and maximum one primary CTA.
04
Describe Component Stylings
Specify shape, color, shadow depth, and interaction behavior for buttons, cards, inputs, loading states, and error states.
05
Encode Motion Philosophy
Define spring physics defaults (stiffness: 100, damping: 20), perpetual micro-interactions for active components, staggered orchestration for list reveals, and performance constraints limiting animation to transform and opacity only.

02 Find your fit

When to Use the stitch-design-taste Skill

Use the stitch-design-taste skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Generating DESIGN.md files optimized for Google Stitch screen generation that encode premium, non-generic design standards
Projects requiring strict anti-pattern enforcement to avoid AI design clichés like neon glows, Inter font, and generic placeholder content
High-density dashboards or cockpit-style interfaces that require monospace numerals and compact scanability

Know the Boundaries

Projects requiring Inter font or generic system fonts for premium contexts
Interfaces using centered hero layouts when variance exceeds 4 or three-column equal card layouts
Designs with emojis, neon outer glow shadows, custom mouse cursors, or AI copywriting clichés like Elevate, Seamless, Unleash

What to Provide

Target project intentUnderstanding of whether the project is an art gallery, daily app, cockpit interface, or other category to evaluate the appropriate density, variance, and motion spectrum.

03 Inside the skill

Rules the stitch-design-taste Skill Gives Claude Code and Codex

5 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Default Atmosphere Baseline
The default baseline for new projects is Variance 8, Motion 6, Density 4. These values should be adapted dynamically based on the user's vibe description.
No Centered Hero Sections Above Variance 4
Centered Hero layouts are banned when variance exceeds 4. Force Split Screen, Left-Aligned, or Asymmetric Whitespace layouts instead.
Mobile Viewport Uses min-h-[100dvh]
Full-height sections must use min-h-[100dvh], never h-screen, to avoid iOS Safari's catastrophic address bar jump behavior.
44px Minimum Touch Targets
All interactive elements must have a minimum 44px tap target to ensure accessibility and usability on mobile devices.
No Overlapping Elements
Text must never overlap images or other text. Every element occupies its own clean spatial zone with clear spatial separation. Absolute-positioned content stacking is not allowed.

04 Put it to work

Install stitch-design-taste in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add stitch-design-taste to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste

Generic skills CLI form for skills/stitch-skill/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Generate a DESIGN.md for [project name], a high-density financial dashboard targeting professional traders. The atmosphere should feel like a cockpit interface — variance 8, motion 6, density 9. Use a single cool accent (cyan or sky blue) and ban all generic patterns. All numbers must be monospace, and the hero section should use asymmetric layout with inline image typography showing [trading floor photos] between headline words.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Verify all color entries include descriptive name, hex code, and functional role with maximum one accent color at saturation below 80%
Confirm the anti-pattern list explicitly bans Inter font, generic serifs, pure black, neon glows, emojis, and AI copywriting clichés
Ensure mobile responsive rules enforce single-column collapse below 768px, 44px minimum touch targets, and min-h-[100dvh] for full-height sections

In OpenDesign import stitch-design-taste from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill file: skills/stitch-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
License: MIT From LICENSE. Near-duplicate of Google Stitch's taste-design; the Google version is not counted separately.
Repository stars: 86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for stitch-design-taste.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

OverviewDefines the skill's purpose: generating DESIGN.md files for Stitch using semantic design language and anti-generic standards.
PrerequisitesLists access requirements: Google Stitch via labs.google/stitch and optionally Stitch MCP Server for programmatic integration.
The GoalOutlines seven encoding targets: visual atmosphere, color calibration, typographic architecture, component behaviors, layout principles, motion philosophy, anti-patterns.
1. Define the AtmosphereUse evocative adjectives across density, variance, and motion spectrums with default baseline Variance 8, Motion 6, Density 4.
2. Map the Color PaletteProvide descriptive name, hex code, and functional role with maximum one accent color below 80% saturation, banning neon aesthetics.
3. Establish Typography RulesBan Inter for premium contexts and generic serifs; enforce distinctive fonts with hierarchy through weight and color, not size.
4. Define the Hero SectionCreate striking first impressions using inline image typography, asymmetric structures above variance 4, and maximum one CTA.
5. Describe Component StylingsSpecify shape, color, shadow depth, and interaction behavior with cards only used when elevation communicates hierarchy.
6. Define Layout PrinciplesNo overlapping elements, centered heroes banned above variance 4, CSS Grid over Flexbox, max-width containment, min-h-[100dvh] for full-height.
7. Define Responsive RulesMobile-first collapse to single column below 768px, 44px touch targets, clamp typography scaling, inline images stack on mobile.
8. Encode Motion PhilosophySpring physics defaults stiffness 100 damping 20, perpetual micro-interactions, staggered orchestration, hardware-accelerated transforms only.
9. List Anti-Patterns (AI Tells)Explicit NEVER DO rules: no emojis, Inter, generic serifs, pure black, neon glows, overlapping elements, AI clichés, filler text.

The Skill's Own Description

“Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.”

Front-matter description from SKILL.md. The full file is about 11,732 characters. Read the full file on GitHub.

Stitch Design Taste

Run stitch-design-taste on a Real Brand and design-system Work Task.

Download OpenDesign, import stitch-design-taste from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills