skills.rest
lichong-a
lichong-aCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ric-stitch-design-taste

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

Updated Jun 4, 2026
Search Tags:#design system#ui design#semantic design#google stitch#ric constraints
One-click install
npx skills add https://github.com/lichong-a/ric-skills --skill ric-stitch-design-taste
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ric-stitch-design-taste
Source: https://github.com/lichong-a/ric-skills/tree/main/skills/ric-stitch-design-taste
Command: npx skills add https://github.com/lichong-a/ric-skills --skill ric-stitch-design-taste

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill generates DESIGN.md files optimized for Google Stitch screen generation, translating anti-slop frontend engineering directives into Stitch's semantic design language.

Core Features & Use Cases

  • Semantic Design File Generation: Translates frontend engineering directives into Stitch's design language.
  • Customizable Design Rules: Encodes visual atmosphere, color calibration, typography, component behaviors, layout principles, motion philosophy, and anti-patterns.
  • Use Case: Generate a DESIGN.md file for a new project that aligns with a curated, high-agency design language for use with Google Stitch.

Quick Start

Generate a DESIGN.md file for a new project with the ric-stitch-design-taste skill.

Frequently Asked Questions about ric-stitch-design-taste

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

FAQPage Schema
How do I generate a semantic DESIGN.md file for Google Stitch?▼

You can customize the generated DESIGN.md file by encoding specific design rules for color calibration, typography, component behaviors, motion philosophy, layout principles, and anti-patterns to match your project's visual atmosphere.

What is a semantic design file used for in UI design systems?▼

A semantic design file in UI design systems is used to translate high-level frontend engineering directives into a structured design language, ensuring that screen generation tools like Google Stitch produce interfaces aligned with your specific design rules.

Do I need the Stitch MCP Server to use this design generation skill?▼

You need access to Google Stitch to use this design generation skill, while the Stitch MCP Server is an optional dependency that can enhance the workflow but is not strictly required to generate the DESIGN.md file.

How do ric constraints apply to UI design rules in Stitch?▼

Ric constraints apply to UI design rules by enforcing specific frontend engineering directives within the generated DESIGN.md file, ensuring that Google Stitch screen generation adheres to premium, high-agency layout and component behaviors.

What's the best way to encode anti-patterns for Stitch screen generation?▼

The best way to encode anti-patterns for Stitch screen generation is to define them within the DESIGN.md file, allowing the skill to translate these frontend constraints into Stitch's semantic design language to prevent unwanted UI behaviors.

Related Skills

Explore More Design & Creative Skills→
magicpro97magicpro97
8

stitch-design-taste

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

Community
Advanced
MarcoAntoliniMarcoAntolini
1

stitch-design-taste

Create a DESIGN.md file encoding UI design rules for Google Stitch.

Community
Advanced
lichong-alichong-a

ric-design-taste-frontend-v1

Generate frontend design patterns for RIC applications using Tailwind CSS and React.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced