Does it support mobile-responsive design?

Yes, it includes strict layout principles for mobile-first collapse, touch targets, and responsive typography scaling using CSS clamp logic.

How does this skill prevent generic AI designs?

It explicitly bans common 'AI tells' such as the Inter font, neon gradients, pure black, and generic 3-column layouts, replacing them with curated, high-agency design alternatives.

What kind of typography does this skill enforce?

The skill bans overused system fonts and standard serifs in favor of distinctive, modern typefaces like Geist, Outfit, or Cabinet Grotesk to ensure a premium, custom-built appearance.

Can I use this with other development tools?

While specifically optimized for Google Stitch, the generated DESIGN.md serves as an excellent architectural reference for other AI tools like Cursor, Antigravity, or the Gemini CLI.

What is a Google Stitch Design System?

It is a semantic set of natural-language rules and precise values that guide the Google Stitch AI agent to generate consistent, high-quality user interfaces across an entire project.

Stitch Design System Architect

Name: Stitch Design System Architect
Author: cskwork

bycskwork

0•

Design Tools

Generates semantic design systems for Google Stitch that enforce premium, anti-generic UI standards and performance-optimized layouts.

This skill automates the creation of a DESIGN.md file specifically tailored for the Google Stitch AI agent, translating high-level aesthetic goals into actionable semantic directives. By encoding strict visual principles—including asymmetric layouts, calibrated color palettes, and hardware-accelerated motion—it ensures that AI-generated screens avoid the 'generic AI' look. It serves as a single source of truth for design, mapping professional frontend engineering standards into a language Stitch understands to produce sophisticated, high-agency interfaces.

Key Features

01Defines precise typography architectures and calibrated, low-saturation color palettes.

02Configures premium spring-physics motion and perpetual micro-interactions for interactive components.

03Implements responsive, asymmetric layout principles with strict spatial separation and zero-overlap constraints.

04Enforces anti-generic design standards by explicitly banning common AI UI clichés and 'slop'.

050 GitHub stars

06Generates agent-friendly DESIGN.md files optimized for Google Stitch screen generation.

Use Cases

01Preventing generic 'AI-style' design patterns during rapid prototyping and screen generation.

02Scaling a sophisticated design system across multiple developer-led projects while maintaining aesthetic quality.

03Establishing a consistent, premium visual identity for a new web project within Google Stitch.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cskwork/claude-minimal-plugin stitch-skill

For use in Claude.ai and ChatGPT

Key Features

01Defines precise typography architectures and calibrated, low-saturation color palettes.

02Configures premium spring-physics motion and perpetual micro-interactions for interactive components.

03Implements responsive, asymmetric layout principles with strict spatial separation and zero-overlap constraints.

04Enforces anti-generic design standards by explicitly banning common AI UI clichés and 'slop'.

050 GitHub stars

06Generates agent-friendly DESIGN.md files optimized for Google Stitch screen generation.

Use Cases

01Preventing generic 'AI-style' design patterns during rapid prototyping and screen generation.

02Scaling a sophisticated design system across multiple developer-led projects while maintaining aesthetic quality.

03Establishing a consistent, premium visual identity for a new web project within Google Stitch.