stitch-design-taste

Generate a DESIGN.md codifying premium UI language for Stitch.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-prompt DESIGN.md artifact that codifies a premium, non-generic UI language for Google Stitch, consolidating atmosphere, color, typography, motion, and anti-pattern constraints into a single source of truth.

Core Features & Use Cases

  • Generates DESIGN.md with explicit atmosphere, color roles, typography rules, component behaviors, layout principles, and motion philosophy for consistent design outputs.
  • Synthesizes precise tokens (hex codes, font stacks, spacing, and grid guidance) suitable for Stitch-based screen generation and design-to-development handoffs.
  • Use Case: A design team needs a repeatable, machine-interpretable spec to produce multiple screens that adhere to a strict premium aesthetic without re-writing prompts.

Quick Start

Prompt the AI to generate a DESIGN.md that encodes the project’s visual language using the Stitch guidelines.

Frequently Asked Questions about stitch-design-taste

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

FAQPage Schema
How do I generate a design system specification for Stitch UI projects?

A DESIGN.md file for Stitch UI codifies atmosphere, color roles, typography rules, component behaviors, layout grids, and motion philosophy into a single source of truth. It enforces tokenized constraints like hex codes, font stacks, and spacing to ensure consistent premium aesthetic outputs across multiple screens.

How do I enforce typography and color palette constraints in a design-to-development handoff?

A generated DESIGN.md enforces typography and color palette constraints by synthesizing precise tokens like hex codes, font stacks, and spacing guidance suitable for Stitch-based screen generation. This provides a repeatable, machine-interpretable spec for strict design-to-development handoffs without re-writing prompts.

Can I use a single design system document to maintain consistent UI design across multiple screens?

Yes, a single DESIGN.md document maintains consistent UI design across multiple screens by codifying atmosphere definition, tokenized color and typography constraints, component behaviors, and layout grids. This ensures multiple generated screens adhere to a strict premium aesthetic without re-writing prompts.

How do I ban anti-patterns and enforce motion rules in a UI design system?

You ban anti-patterns and enforce motion rules by generating a DESIGN.md that explicitly defines motion philosophy and anti-pattern bans alongside atmosphere and layout grids. This prevents generic visual outputs and enforces a unified premium atmosphere across all generated screens.

Does this design system generator work without external dependencies or component libraries?

Yes, this design system generator works without external dependencies or component libraries. It independently produces a ready-to-prompt DESIGN.md artifact that codifies premium UI language into a standalone source of truth for Google Stitch projects.