102.7K+Download
Skip to the usage guide
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 OpenDesignView 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 interfaces following that particular aesthetic.

The source specifies an opinionated typography, palette, asymmetry and motion policy. Its output is a design document, not implemented screens or measured rendering performance. Several bans are aesthetic choices, and perpetual-motion directives need a separate accessibility and reduced-motion review before implementation.

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

  1. 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).

  2. 02
    Map the Color Palette

    For each color provide descriptive name, hex code, and functional role. Maximum one accent color with saturation below 80%.

  3. 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.

  4. 04
    Describe Component Stylings

    Specify shape, color, shadow depth, and interaction behavior for buttons, cards, inputs, loading states, and error states.

  5. 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
  • Document rules are not implementation proofA generated DESIGN.md does not show that Stitch obeyed it, that motion performs well, or that an interface is accessible. Inspect the generated screens separately, including reduced-motion behavior for its prescribed looping animations.

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.
  • Brand constraints and Stitch accessShare the existing brand rules, audience and screens the document will guide. The source names Google Stitch access for downstream screen generation; its MCP integration is optional.

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.

  1. 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.

  2. 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.

  3. Mobile Viewport Uses min-h-[100dvh]

    The source prescribes min-height based on dynamic viewport units for full-height sections rather than a fixed h-screen pattern. Verify the rendered layout as browser chrome changes; the class alone is not a universal fix for viewport movement.

  4. 44px Minimum Touch Targets

    The source sets a 44px minimum tap-target rule. Check actual hit areas and other interaction requirements; this dimension by itself does not establish accessibility.

  5. 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.

Editorial example based on the reviewed source; not an executed task or an upstream quotation.

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

OpenDesign provides a local workspace for coding agents. Check the installed version for skill availability and setup; this source review does not verify bundled skills or include external tools and services.

Download OpenDesignRead 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

  1. OverviewDefines the skill's purpose: generating DESIGN.md files for Stitch using semantic design language and anti-generic standards.
  2. PrerequisitesLists access requirements: Google Stitch via labs.google/stitch and optionally Stitch MCP Server for programmatic integration.
  3. The GoalOutlines seven encoding targets: visual atmosphere, color calibration, typographic architecture, component behaviors, layout principles, motion philosophy, anti-patterns.
  4. 1. Define the AtmosphereUse evocative adjectives across density, variance, and motion spectrums with default baseline Variance 8, Motion 6, Density 4.
  5. 2. Map the Color PaletteProvide descriptive name, hex code, and functional role with maximum one accent color below 80% saturation, banning neon aesthetics.
  6. 3. Establish Typography RulesBan Inter for premium contexts and generic serifs; enforce distinctive fonts with hierarchy through weight and color, not size.
  7. 4. Define the Hero SectionCreate striking first impressions using inline image typography, asymmetric structures above variance 4, and maximum one CTA.
  8. 5. Describe Component StylingsSpecify shape, color, shadow depth, and interaction behavior with cards only used when elevation communicates hierarchy.
  9. 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.
  10. 7. Define Responsive RulesMobile-first collapse to single column below 768px, 44px touch targets, clamp typography scaling, inline images stack on mobile.
  11. 8. Encode Motion PhilosophySpring physics defaults stiffness 100 damping 20, perpetual micro-interactions, staggered orchestration, hardware-accelerated transforms only.
  12. 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 OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste