stitch-design-taste

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

1|Updated Jan 10, 2024
One-click install
npx skills add https://github.com/noemdb/cfla --skill stitch-design-taste-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/stitch-design-taste
Command: npx skills add https://github.com/noemdb/cfla --skill stitch-design-taste-noemdb

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 produces a structured DESIGN.md file that encodes a curated, opinionated design language so Google Stitch generates premium, non-generic screens. ## Core Features & Use Cases - Design System Generation: Creates a complete DESIGN.md covering color palettes with hex codes, typography rules, component stylings, layout principles, and motion specs. - Anti-Pattern Enforcement: Encodes explicit banned patterns such as Inter font, pure black, neon glows, 3-column equal card grids, and AI copywriting clichés. - Configurable Taste Dials: Adjusts creativity, density, variance, and motion levels to match each project's vibe. - Use Case: Before prompting Google Stitch to generate a SaaS dashboard, use this Skill to produce a DESIGN.md that forces asymmetric layouts, spring-physics motion intent, and a single calibrated accent color. ## Quick Start Generate a DESIGN.md design system file for my project using the stitch-design-taste skill with creativity level 8 and an emerald 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 file for Google Stitch?▼

Use this Skill to generate a DESIGN.md file containing visual atmosphere descriptions, color palettes with hex codes, typography rules, component stylings, layout principles, and motion specs. Stitch interprets these semantic rules when generating new screens.

What is a DESIGN.md file used for in AI screen generation?▼

A DESIGN.md file acts as the single source of truth for prompting Google Stitch to generate screens aligned with a specific design language. It encodes colors, fonts, component behaviors, responsive rules, and banned anti-patterns in natural language.

Can I use this design system with Cursor or other coding agents?▼

Yes, the generated DESIGN.md works with Stitch MCP Server integrations for Cursor, Antigravity, or Gemini CLI. The motion and interaction sections specifically document intent so coding agents can implement animations when building the exported designs.

Why does the design system ban the Inter font and purple gradients?▼

Inter and purple neon gradients are banned because they signal generic AI-generated output. The system forces distinctive fonts like Geist, Outfit, or Satoshi and limits accents to one color below 80% saturation for a premium look.

How do I adjust the creativity and density levels of generated designs?▼

Adjust the four configuration dials at the top of the design system: Creativity, Density, Variance, and Motion Intent, each on a 1-10 scale. Lower creativity produces quiet minimal interfaces while higher values enable editorial layouts with inline image typography.