stitch-design-taste

Generate semantic design system files with palette, typography, and motion rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you turn a vague product vibe into a precise, production-ready design system that avoids generic AI-generated UI patterns. It gives you a clear semantic specification for premium visual direction, spacing, typography, color, and motion so downstream design tools can generate consistent screens.

Core Features & Use Cases

  • Taste-Driven Design Rules: Defines atmosphere, density, variance, and motion intent in a way that translates into strong visual guidance.
  • Tokenized Visual Standards: Sets explicit rules for palette selection, typography stacks, component styling, layout structure, responsiveness, and animation behavior.
  • Anti-Pattern Enforcement: Bans common design clichés such as neon purple gradients, generic fonts, circular spinners, and centered hero layouts when they would weaken the product.
  • Use Case: A designer or AI agent can use this Skill to create a DESIGN.md file for a new app that feels premium, coherent, and non-generic from the first generated screen onward.

Quick Start

Use the stitch-design-taste skill to generate a premium DESIGN.md for my product based on its purpose and visual style.

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 that avoids generic UI patterns?

To generate a non-generic design system, you need semantic rules that explicitly ban visual clichés like neon gradients and circular spinners. This skill outputs a production-ready specification enforcing strict palette calibration, typography stacks, and anti-pattern bans.

What is a semantic design system file and how does it control UI generation?

A semantic design system file converts product intent into precise visual, layout, typography, and motion rules. It provides tokenized standards that downstream UI generation tools use to ensure premium aesthetics across apps and dashboards.

Can I use this to create design tokens for responsive web layouts and marketing surfaces?

Yes, you can create tokenized visual standards for responsive web layouts and marketing surfaces. The generated rules define component behavior, spacing, and motion intent to ensure your UI workflow produces consistent screens.

How do I translate a vague product vibe into precise layout and typography rules?

You translate a vague product vibe by defining taste-driven rules for atmosphere, density, and variance. This skill converts abstract concepts into explicit tokenized standards for typography stacks, layout structure, and palette selection.

What visual clichés should I ban to make an AI generated dashboard look premium?

To make an AI generated dashboard look premium, you should ban generic fonts, neon purple gradients, circular spinners, and centered hero layouts. This skill enforces these anti-pattern bans to prevent weak product aesthetics.

Does this design system generator require existing UI components to work?

No, it does not require existing UI components to work. It generates a standalone DESIGN.md file based purely on your product's purpose and visual style, which you then apply to your UI generation workflow.