skills.rest
magicpro97
magicpro97COMMUNITY
Explore all skills by this author →
GitHub

stitch-design-taste

Generate semantic DESIGN.md files for Google Stitch from frontend engineering directives.

8|3|Updated Jun 7, 2026
Search Tags:#design system#ui design#semantic design#google stitch#aesthetic standards
One-click install
npx skills add https://github.com/magicpro97/vibeflow --skill stitch-design-taste-magicpro97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/magicpro97/vibeflow/tree/main/.agents/skills/stitch-skill
Command: npx skills add https://github.com/magicpro97/vibeflow --skill stitch-design-taste-magicpro97

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill generates DESIGN.md files for Google Stitch, ensuring high-agency design language, strict typography, calibrated color, asymmetric layouts, and hardware-accelerated performance.

Core Features & Use Cases

  • Design System Generation: Creates DESIGN.md files for Google Stitch that enforce premium UI standards.
  • Visual Description Interpretation: Translates design directives into Stitch's semantic design language.
  • Single Source of Truth: Serves as the definitive guide for Stitch to generate new screens.

Quick Start

Generate a DESIGN.md file for your project by running the stitch-design-taste skill.

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 for Google Stitch?▼

To generate a design system for Google Stitch, use this skill to create a semantic DESIGN.md file. This file translates frontend engineering directives into a structured design language that Stitch uses to build premium UI screens.

What is a semantic design language file for AI agent interpretation?▼

A semantic design language file is a structured configuration that translates visual directives like typography, color, and motion into rules an AI agent can understand. It acts as a single source of truth for generating UI layouts.

How do I prevent generic UI layouts when using AI design tools?▼

Prevent generic UI layouts by applying anti-pattern rules within your generated design system. This skill enforces strict typography, calibrated colors, and asymmetric layouts to maintain a premium aesthetic standard for your screens.

Do I need an MCP Server to use the stitch-design-taste skill?▼

An MCP Server is optional for programmatic integration. You only need access to Google Stitch to generate the DESIGN.md file, while the MCP Server enhances automated workflows if required.

What UI elements are covered by the generated design system standards?▼

The generated design system standards cover typography, calibrated color palettes, asymmetric layouts, and hardware-accelerated motion. It also defines anti-patterns to ensure high-agency visual performance.

Can I use this skill to enforce typography and color standards across multiple screens?▼

Yes, you can enforce typography and color standards across multiple screens by using the generated DESIGN.md file as a definitive guide. This ensures Stitch maintains consistent premium UI standards for every new screen it generates.

Related Skills

Explore More Design & Creative Skills→
lichong-alichong-a

ric-stitch-design-taste

Generate semantic DESIGN.md files for Google Stitch screen generation.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
magic3007magic3007
10

frontend-design

Translate frontend requirements into production-ready UI with code samples.

Community
Advanced
lagarcesslagarcess
1

stitch-design-taste

Generate DESIGN.md files with Stitch-readable semantic design descriptions.

Community
Intermediate