Design & Motion · leonxlnx/taste-skill

stitch-design-taste

Name: stitch-design-taste
Author: leonxlnx/taste-skill

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.

L2 Local · Restricted workspaceV1 Commit-PinnedWrite FileDual-pass Audit

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The output is a DESIGN.md specification document rather than code or images: it translates the 'anti-slop' front-end rules from other skills in this repository into a semantic design language readable by Google Stitch, acting as the single source of truth for subsequent screen generation.

skills/stitch-skill/SKILL.md

This skill generates `DESIGN.md` files optimized for Google Stitch screen generation.

What is happening here: Stitch's input interface accepts natural language 'visual descriptions' rather than code tokens, so the same aesthetic discipline must be conveyed through a different medium (descriptive names + precise values) to take effect.

Positioned as the 'single source of truth': once DESIGN.md is written, all subsequent Stitch screen generations must adhere to it, locking in the consistency of colors, fonts, border radii, and spacing across multiple screens.

skills/stitch-skill/SKILL.md

The generated `DESIGN.md` serves as the **single source of truth** for prompting Stitch to generate new screens that align with a curated, high-agency design language.

This is the primary difference from the 'one prompt per screen' approach: it elevates consistency from a prompting habit to a reusable, reviewable documentation asset.

The specification is broken down into 7 fixed, mandatory components (Atmosphere, Color, Typography, Components, Layout, Motion, Anti-patterns) to ensure structural completeness without omitting items in DESIGN.md.

skills/stitch-skill/SKILL.md

Generate a `DESIGN.md` file that encodes:

The body outlines: 1 Visual atmosphere / 2 Color calibration / 3 Typographic architecture / 4 Component behaviors / 5 Layout principles / 6 Motion philosophy / 7 Anti-patterns. §Output Format provides a copy-pasteable scaffold matching these exact seven sections.

Transforms abstract aesthetics into tunable parameters using 'configuration dials' and contextual adjectives: Density, Variance, and Motion each have three tiers, with a default 8-6-4 baseline.

skills/stitch-skill/SKILL.md

Default baseline: Variance 8, Motion 6, Density 4. Adapt dynamically based on user's vibe description.

Derived directly from the DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY dials of v1/v2 in this repository, rephrased into Stitch semantic expressions; the top of DESIGN.md expands this into a manually editable configuration table.

Rules are presented in pairs of 'bans + alternatives': banning Inter comes with Geist/Outfit/Cabinet Grotesk/Satoshi; banning purple/blue neon comes with neutral bases + a single accent color; banning pure black specifies Off-Black/Zinc-950/Charcoal.

skills/stitch-skill/SKILL.md

- **Font Selection:** `Inter` is BANNED for premium/creative contexts. Force unique character: `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`

Providing paired alternatives is the prerequisite for this skill's practical adoption—banning without offering alternatives causes the model to fall back on even worse defaults.

Colors are required to include hex values and functional roles, restricting accent colors to at most one with saturation < 80%, eliminating 'AI purple-blue gradients' at the source.

skills/stitch-skill/SKILL.md

- Maximum 1 accent color. Saturation below 80%

The sample palette in §Output Format further specifies the role of each color (background, card surface, body text, secondary text, border, accent), making DESIGN.md directly reusable by Stitch.

Motion is written into the document as 'intent' rather than instructing Stitch to animate: spring-based parameters (stiffness 100 / damping 20) + animating exclusively on transform/opacity, left for subsequent coding agents to implement.

skills/stitch-skill/SKILL.md

- **Spring Physics default:** `stiffness: 100, damping: 20` — premium, weighty feel. No linear easing

Section 8 of DESIGN.md explicitly states: 'Stitch generates static screens — it does not animate', positioning the motion section as implementation instructions for coding agents such as Antigravity and Cursor.

Includes a ready-to-reference finished example: DESIGN.md placed in the same directory acts as an instantiated version of the §Output Format scaffold (including an editable table for the four dials: Creativity, Density, Variance, and Motion).

skills/stitch-skill/DESIGN.md

> **How to use:** Change the numbers above to match your project's vibe.

This DESIGN.md functions as both an asset and an example: users can directly copy it and simply adjust the four numbers and the accent color without generating from scratch.

2Core Capabilities

01Generate structured DESIGN.md design system specifications (7 mandatory sections)

02Stitch semantic expressions: descriptive naming paired with precise hex/rem/px values

03Color calibration and accent convergence (maximum 1 accent color, saturation < 80%, ban pure black and purple-blue neon)

04Typographic discipline: ban Inter and generic serifs, enforce mandatory alternative font stacks

05Hero specifications and 'inline visual typography' signature techniques (embedding inline imagery between words as visual punctuation)

06Anti-pattern checklist (AI tells): emojis, Inter, pure black, neon glows, equal-width 3-column cards, fake names/numbers, placeholder copy

07Responsive and performance hard constraints (100dvh instead of h-screen, touch targets ≥44px, single column on mobile, animations strictly on transform/opacity)

08Component behavioral specifications: tactile button feedback, cards reserved strictly for hierarchy, skeleton loading over spinners

3External Dependencies

Kind	Dependency / Endpoint
api	Google Stitch（屏幕生成服务，人工在浏览器中使用）
package	Stitch MCP Server（可选，用于与 Cursor / Antigravity / Gemini CLI 程序化集成）
network	picsum.photos（禁用 Unsplash 后指定的占位图源，写入 DESIGN.md 供产物使用）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Restrict working directory

For Administrators

Retain operation logs

Evidence & Triggers (File Paths & Excerpts)

本地工作目录: File Read/Write and Artifact Output: DESIGN.md — the primary deliverable of this skill: instructions guide the agent to generate/write a DESIGN.md specification file within the user's project (standard deliverable-level behavior).

Audit Notes: Purely instruction-based skill: no script execution, no outbound network requests, and no credential reading. The sole 'write' action is the defined deliverable, DESIGN.md (a specification document within the user's project), which is equivalent to a coding agent generating code files and does not involve saving persistent state or credentials. Both external touchpoints require manual user involvement rather than being triggered automatically by the skill: using labs.google/stitch in a browser, or manually configuring an optional Stitch MCP Server (a third-party integration that users evaluate themselves, not called by the skill). Note that outputs from this skill flow into the Google Stitch cloud service, which is an intentional choice by the user.

5Second-Pass Verification

[ok] 是否真的只产出 DESIGN.md（有无夹带代码/图片生成指令） — 全文无生成图片、无写代码的实现指令；§Motion 部分甚至显式限定为『给编码 agent 的意图说明』而非让 Stitch 动画。grep 'code' 在该文件零命中。
[ok] Google Stitch 的说法是否有事实依托 — §Prerequisites 指向 labs.google/stitch，并要求具备 Stitch 使用权限；SKILL.md 未声称调用任何 Stitch API，也无端点/密钥，属『人工在 Stitch 里消费本规格』的定位，无夸大。
[ok] Stitch MCP Server 是否构成供应链依赖 — 文中标注为 'Optionally'，未给安装命令或端点，skill 亦无任何调用代码；列为可选第三方接线，风险由用户自评，故未升级风险档。
[ok] 外部依赖清单完整性 — URL/token 扫描命中仅 labs.google/stitch 与 picsum.photos（DESIGN.md 内另有 shadcn/ui 自定义要求，属框架建议非依赖）。无包管理器指令、无 npm/pip、无 curl。
[ok] 颜色/字体禁令是否有内部矛盾 — SKILL.md 与 DESIGN.md 两份文件对 Inter 禁令、紫蓝霓虹禁令、纯黑禁令、三列等宽卡禁令、填充文案禁令表述一致（DESIGN.md 的 §Banned Colors/§Banned Fonts/§Anti-Patterns 与 SKILL.md §2/§3/§9 对应），无互相打脸。
[ok] 元数据（license / stars / last_push / 路径 / commit） — gh api：MIT、87309 stars、pushed_at 2026-08-24T15:23:56Z；git ls-files 确认 skills/stitch-skill/{SKILL.md,DESIGN.md}；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37。

6Verdict & Scenarios

Codifies aesthetic discipline into reusable documentation: write DESIGN.md once to constrain multi-screen generations, upgrading consistency from a prompting habit into a reviewable asset.

Rules pair bans with concrete alternatives, preventing the model from falling back to worse defaults when restricted (e.g., Ban Inter → use Geist/Outfit/Cabinet Grotesk/Satoshi).

Includes an off-the-shelf template skeleton (DESIGN.md) featuring an editable 4-dial table and hex palettes, minimizing setup overhead.

Comprehensive coverage with concrete implementation details: color saturation caps, typography ban lists, 100dvh and 44px touch targets in layout, and spring parameters with hardware-acceleration constraints in motion.

Clear, honest boundaries: explicitly clarifies that Stitch only produces static screens and frames the motion section as an implementation guide for coding agents, avoiding misleading claims.

Best for: Teams and individuals using Google Stitch for UI generation who want to maintain a consistent design language across multiple screens; users looking to establish a reviewable design specification before prompting AI for screens; front-end developers using Stitch as a rapid prototyping tool who need to hand off results to Cursor/Antigravity for coding. Also suitable for anyone directly copying DESIGN.md as a project design token document.

Not for: Workflows that do not use Stitch (the semantic language in this skill is tailored for Stitch; use design-taste-frontend/soft-skill in this repo for general coding scenarios); tasks requiring direct image or code generation rather than a spec document (it does not draw graphics or write code); workflows requiring programmatic aesthetic enforcement (lacks linting/CI enforcement); projects with an established custom design system (the 27 bans may conflict with existing brand guidelines).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload stitch-design-taste.tar.gz

sha256: 58fc7a0076ba73cc…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ccbc15639c.