Pro UI Engineering Skill (Current Best Practice)

Created by 云中江树 (Yunzhong Jiangshu)

"Style is not just decoration. It is a contract of expectations between the tool and the user."

This repository contains the UI Engineering Skill, an expert system for AI agents (Claude, Cursor, Windsurf) to generate high-quality, engineering-grade User Interfaces.

It is designed to solve the "generic UI" problem by providing LLMs with 60+ detailed specifications from world-class design systems (Stripe, Apple, Linear, Airbnb, etc.).

🚀 Features

• 60+ Design Systems: Detailed specs for Stripe, Apple, Linear, Notion, Vercel, and more.
• Engineering Specs: Go beyond vague descriptions. This skill provides:
  • Design Tokens: Exact color palettes, typography scales, and shadows.
  • Component Recipes: Copy-paste ready Tailwind/CSS implementation patterns.
  • Motion Physics: Transition curves, spring settings, and interaction models.
• Mental Models: Teaches the AI why a design works (e.g., "Apple is Premium Glass", "Stripe is Invisible Precision").

📦 Installation

To use this skill with Claude or Cursor:

1. Clone this repository:

   git clone https://github.com/yzfly/pro-ui-engineering-skill.git
   

2. Import into your Agent:

   • Claude Desktop / MCP: Add the path to your agent's configuration.
   • Cursor: Add the SKILL.md to your .cursorrules or project instructions.

📖 Usage Examples

Once installed, you can ask your AI agent to design with specific "vibes".

1. The "Stripe" Look (Fintech, SaaS)

"Design a settings page using the Stripe spec. I want that invisible precision feel."

2. The "Personal Blog" (Content-First)

"Build a blog post layout using the Personal Blog spec. Focus on typography and digital garden aesthetics."

3. The "Presentation" (Marketing)

"Create a product landing page using the Presentation Scroll spec. Make it feel like a PPT deck with snap scrolling."

📚 Available Specs (Partial List)

📄 License

MIT License. Free to use for personal and commercial projects.
Copyright (c) 2024 云中江树 (Yunzhong Jiangshu).