PaperclipOrg
Claude Agent Skill · by Google Labs Code

Taste Design

If you're tired of Stitch generating generic purple-gradient dashboards with Inter font, this skill creates DESIGN.md files that actually enforce taste. It bans

Install
Terminal · npx
$npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
Works with Paperclip

How Taste Design fits into a Paperclip company.

Taste Design drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md191 lines
Expand
---name: taste-designdescription: 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.allowed-tools:  - "StitchMCP"  - "Read"  - "Write"--- # Stitch Design Taste — Semantic Design System Skill ## OverviewThis skill generates `DESIGN.md` files optimized for Google Stitch screen generation. It translates the battle-tested 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 to produce premium, non-generic interfaces. 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. Stitch interprets design through **"Visual Descriptions"** supported by specific color values, typography specs, and component behaviors. ## Prerequisites- Access to Google Stitch via [labs.google.com/stitch](https://labs.google.com/stitch)- Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI ## The GoalGenerate a `DESIGN.md` file that encodes:1. **Visual atmosphere** — the mood, density, and design philosophy2. **Color calibration** — neutrals, accents, and banned patterns with hex codes3. **Typographic architecture** — font stacks, scale hierarchy, and anti-patterns4. **Component behaviors** — buttons, cards, inputs with interaction states5. **Layout principles** — grid systems, spacing philosophy, responsive strategy6. **Motion philosophy** — animation engine specs, spring physics, perpetual micro-interactions7. **Anti-patterns** — explicit list of banned AI design clichés ## Analysis & Synthesis Instructions ### 1. Define the AtmosphereEvaluate the target project's intent. Use evocative adjectives from the taste spectrum:- **Density:** "Art Gallery Airy" (1–3) → "Daily App Balanced" (4–7) → "Cockpit Dense" (8–10)- **Variance:** "Predictable Symmetric" (1–3) → "Offset Asymmetric" (4–7) → "Artsy Chaotic" (8–10)- **Motion:** "Static Restrained" (1–3) → "Fluid CSS" (4–7) → "Cinematic Choreography" (8–10) Default baseline: Creativity 9, Variance 8, Motion 6, Density 5. Adapt dynamically based on user's vibe description. ### 2. Map the Color PaletteFor each color provide: **Descriptive Name** + **Hex Code** + **Functional Role**. **Mandatory constraints:**- Maximum 1 accent color. Saturation below 80%- The "AI Purple/Blue Neon" aesthetic is strictly BANNED — no purple button glows, no neon gradients- Use absolute neutral bases (Zinc/Slate) with high-contrast singular accents- Stick to one palette for the entire output — no warm/cool gray fluctuation- Never use pure black (`#000000`) — use Off-Black, Zinc-950, or Charcoal ### 3. Establish Typography Rules- **Display/Headlines:** Track-tight, controlled scale. Not screaming. Hierarchy through weight and color, not just massive size- **Body:** Relaxed leading, max 65 characters per line- **Font Selection:** `Inter` is BANNED for premium/creative contexts. Force unique character: `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`- **Serif Ban:** Generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`, `Palatino`) are BANNED. If serif is needed for editorial/creative contexts, use only distinctive modern serifs: `Fraunces`, `Gambarino`, `Editorial New`, or `Instrument Serif`. Serif is always BANNED in dashboards or software UIs- **Dashboard Constraint:** Use Sans-Serif pairings exclusively (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`)- **High-Density Override:** When density exceeds 7, all numbers must use Monospace ### 4. Define the Hero SectionThe Hero is the first impression and must be creative, striking, and never generic:- **Inline Image Typography:** Embed small, contextual photos or visuals directly between words or letters in the headline. Images sit inline at type-height, rounded, acting as visual punctuation. This is the signature creative technique- **No Overlapping:** Text must never overlap images or other text. Every element occupies its own clean spatial zone- **No Filler Text:** "Scroll to explore", "Swipe down", scroll arrow icons, bouncing chevrons are BANNED. The content should pull users in naturally- **Asymmetric Structure:** Centered Hero layouts BANNED when variance exceeds 4- **CTA Restraint:** Maximum one primary CTA. No secondary "Learn more" links ### 5. Describe Component StylingsFor each component type, describe shape, color, shadow depth, and interaction behavior:- **Buttons:** Tactile push feedback on active state. No neon outer glows. No custom mouse cursors- **Cards:** Use ONLY when elevation communicates hierarchy. Tint shadows to background hue. For high-density layouts, replace cards with border-top dividers or negative space- **Inputs/Forms:** Label above input, helper text optional, error text below. Standard gap spacing- **Loading States:** Skeletal loaders matching layout dimensions — no generic circular spinners- **Empty States:** Composed compositions indicating how to populate data- **Error States:** Clear, inline error reporting ### 6. Define Layout Principles- No overlapping elements — every element occupies its own clear spatial zone. No absolute-positioned content stacking- Centered Hero sections are BANNED when variance exceeds 4 — force Split Screen, Left-Aligned, or Asymmetric Whitespace- The generic "3 equal cards horizontally" feature row is BANNED — use 2-column Zig-Zag, asymmetric grid, or horizontal scroll- CSS Grid over Flexbox math — never use `calc()` percentage hacks- Contain layouts using max-width constraints (e.g., 1400px centered)- Full-height sections must use `min-h-[100dvh]` — never `h-screen` (iOS Safari catastrophic jump) ### 7. Define Responsive RulesEvery design must work across all viewports:- **Mobile-First Collapse (< 768px):** All multi-column layouts collapse to single column. No exceptions- **No Horizontal Scroll:** Horizontal overflow on mobile is a critical failure- **Typography Scaling:** Headlines scale via `clamp()`. Body text minimum `1rem`/`14px`- **Touch Targets:** All interactive elements minimum `44px` tap target- **Image Behavior:** Inline typography images (photos between words) stack below headline on mobile- **Navigation:** Desktop horizontal nav collapses to clean mobile menu- **Spacing:** Vertical section gaps reduce proportionally (`clamp(3rem, 8vw, 6rem)`) ### 8. Encode Motion Philosophy- **Spring Physics default:** `stiffness: 100, damping: 20` — premium, weighty feel. No linear easing- **Perpetual Micro-Interactions:** Every active component should have an infinite loop state (Pulse, Typewriter, Float, Shimmer)- **Staggered Orchestration:** Never mount lists instantly — use cascade delays for waterfall reveals- **Performance:** Animate exclusively via `transform` and `opacity`. Never animate `top`, `left`, `width`, `height`. Grain/noise filters on fixed pseudo-elements only ### 9. List Anti-Patterns (AI Tells)Encode these as explicit "NEVER DO" rules in the DESIGN.md:- No emojis anywhere- No `Inter` font- No generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`) — distinctive modern serifs only if needed- No pure black (`#000000`)- No neon/outer glow shadows- No oversaturated accents- No excessive gradient text on large headers- No custom mouse cursors- No overlapping elements — clean spatial separation always- No 3-column equal card layouts- No generic names ("John Doe", "Acme", "Nexus")- No fake round numbers (`99.99%`, `50%`)- No fabricated data or statistics — never generate metrics, performance numbers, uptime percentages, response times, or any data that the user did not explicitly provide. "99.98% UPTIME SLA", "124ms AVG. RESPONSE", "18.5k DEPLOY CYCLES" are invented AI filler. If real data is not available, use clear placeholder labels like `[metric]` instead of making up numbers- No fake system/metric sections — "SYSTEM PERFORMANCE METRICS", "KEY STATISTICS", "BY THE NUMBERS" dashboard cards filled with invented data are BANNED- No `LABEL // YEAR` formatting — "SYSTEM // 2024", "METRICS // 2025" is a lazy AI convention, not real design typography- No AI copywriting clichés ("Elevate", "Seamless", "Unleash", "Next-Gen")- No filler UI text: "Scroll to explore", "Swipe down", scroll arrows, bouncing chevrons- No broken Unsplash links — use `picsum.photos` or SVG avatars- No centered Hero sections (for high-variance projects) ## Output Format (DESIGN.md Structure) ```markdown# Design System: [Project Title] ## 1. Visual Theme & Atmosphere(Evocative description of the mood, density, variance, and motion intensity.Example: "A restrained, gallery-airy interface with confident asymmetric layoutsand fluid spring-physics motion. The atmosphere is clinical yet warm — like awell-lit architecture studio.") ## 2. Color Palette & Roles- **Canvas White** (#F9FAFB) — Primary background surface- **Pure Surface** (#FFFFFF) — Card and container fill- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth- **Muted Steel** (#71717A) — Secondary text, descriptions, metadata- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, 1px structural lines- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings(Max 1 accent. Saturation < 80%. No purple/neon.) ## 3. Typography Rules- **Display:** [Font Name] — Track-tight, controlled scale, weight-driven hierarchy- **Body:** [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color- **Mono:** [Font Name] — For code, metadata, timestamps, high-density numbers- **Banned:** Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards. ## 4. Component Stylings* **Buttons:** Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost/outline for secondary.* **Cards:** Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.* **Inputs:** Label above, error below. Focus ring in accent color. No floating labels.* **Loaders:** Skeletal shimmer matching exact layout dimensions. No circular spinners.* **Empty States:** Composed, illustrated compositions — not just "No data" text. ## 5. Layout Principles(Grid-first responsive architecture. Asymmetric splits for Hero sections.Strict single-column collapse below 768px. Max-width containment.No flexbox percentage math. Generous internal padding.) ## 6. Motion & Interaction(Spring physics for all interactive elements. Staggered cascade reveals.Perpetual micro-loops on active dashboard components. Hardware-acceleratedtransforms only. Isolated Client Components for CPU-heavy animations.) ## 7. Anti-Patterns (Banned)(Explicit list of forbidden patterns: no emojis, no Inter, no pure black,no neon glows, no 3-column equal grids, no AI copywriting clichés,no generic placeholder names, no broken image links.)``` ## Best Practices- **Be Descriptive:** "Deep Charcoal Ink (#18181B)" — not just "dark text"- **Be Functional:** Explain what each element is used for- **Be Consistent:** Same terminology throughout the document- **Be Precise:** Include exact hex codes, rem values, pixel values in parentheses- **Be Opinionated:** This is not a neutral template — it enforces a specific, premium aesthetic ## Tips for Success1. Start with the atmosphere — understand the vibe before detailing tokens2. Look for patterns — identify consistent spacing, sizing, and styling3. Think semantically — name colors by purpose, not just appearance4. Consider hierarchy — document how visual weight communicates importance5. Encode the bans — anti-patterns are as important as the rules themselves ## Common Pitfalls to Avoid- Using technical jargon without translation ("rounded-xl" instead of "generously rounded corners")- Omitting hex codes or using only descriptive names- Forgetting functional roles of design elements- Being too vague in atmosphere descriptions- Ignoring the anti-pattern list — these are what make the output premium- Defaulting to generic "safe" designs instead of enforcing the curated aesthetic