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)

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).