stitch-design-taste

Generates DESIGN.md design system files for Google Stitch screen generation.

Updated May 21, 2025
One-click install
npx skills add https://github.com/nielslataire/Group-LN --skill stitch-design-taste-nielslataire
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/nielslataire/Group-LN/tree/main/.agents/skills/stitch-design-taste
Command: npx skills add https://github.com/nielslataire/Group-LN --skill stitch-design-taste-nielslataire

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, relying on default fonts, purple gradients, and predictable card layouts. This Skill encodes a strict, opinionated design system into a DESIGN.md file that Google Stitch can interpret, so generated screens follow premium typography, color, layout, and motion standards instead of AI clichés. ## Core Features & Use Cases - Semantic Design System Generation: Produces a complete DESIGN.md covering atmosphere, color palette with hex codes, typography rules, component stylings, layout principles, responsive rules, and motion philosophy. - Configurable Taste Dials: Adjusts Creativity, Density, Variance, and Motion Intent levels (1-10) to match each project's vibe before generating the design system. - Anti-Pattern Enforcement: Encodes explicit bans on Inter font, pure black, neon glows, 3-column equal card grids, centered heroes, filler scroll text, and AI copywriting clichés. - Use Case: A designer starting a SaaS dashboard project uses this Skill to generate a DESIGN.md with Geist typography, a single Electric Blue accent, bento grid layouts, and spring-physics motion specs, then feeds it to Google Stitch to generate consistent, non-generic screens. ## Quick Start Ask the agent to generate a DESIGN.md design system for your project using the stitch-design-taste skill, describing your desired vibe and accent color.

Frequently Asked Questions about stitch-design-taste

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system for Google Stitch?▼

Provide your project's vibe and constraints, and the Skill generates a DESIGN.md file with semantic design rules Stitch can interpret. It covers atmosphere, color palette with hex codes, typography, components, layout, responsive behavior, and motion philosophy.

What is a DESIGN.md file used for in Stitch?▼

A DESIGN.md file acts as the single source of truth for prompting Google Stitch to generate new screens. It translates design intent into natural-language visual descriptions paired with precise values that Stitch's AI agent uses to produce consistent interfaces.

How do I avoid generic AI-generated UI design?▼

Encode explicit anti-patterns in your design system: ban Inter font, pure black, neon glows, 3-column equal card grids, centered heroes, and AI copywriting clichés. This Skill automates that by generating DESIGN.md files with these bans built in.

Can I adjust the creativity and density of the generated design system?▼

Yes, the Skill uses four configurable dials: Creativity, Density, Variance, and Motion Intent, each on a 1-10 scale. Adjusting them changes the output from minimal Swiss-style interfaces to expressive editorial layouts with cinematic motion.

Does Google Stitch generate animations from the design system?▼

No, Stitch generates static screens only. The DESIGN.md motion section documents intended animation behavior, such as spring physics and staggered reveals, so coding agents like Cursor or Antigravity can implement them during development.

What fonts does this design system recommend instead of Inter?▼

The system recommends Geist, Satoshi, Cabinet Grotesk, or Outfit for display and body text, with Geist Mono or JetBrains Mono for code and metadata. Generic serifs are banned; only distinctive modern serifs like Fraunces or Instrument Serif are allowed in editorial contexts.