# Pro UI Engineering Skill (Current Best Practice)
> **Created by [云中江树 (Yunzhong Jiangshu)](https://github.com/yzfly)**
>
> *"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**:
```bash
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)
| Category | Specs Included |
| :--- | :--- |
| **Big Tech** | Apple, Google, Microsoft, IBM |
| **SaaS Leaders** | Stripe, Linear, Vercel, Notion, Shopify |
| **Creative** | Awwwards, Brutalist, Minimalism |
| **App Trends** | Bento Grids, Glassmorphism, Neumorphism |
| **Editorial** | NYT, Personal Blog, Substack |
## 📄 License
MIT License. Free to use for personal and commercial projects.
Copyright (c) 2024 [云中江树 (Yunzhong Jiangshu)](https://github.com/yzfly).