UX UI Agent Skills — Design skill for Claude Code

🧠 ux-ui-agent-skills - Build Better UI With Clear Rules

[](https://github.com/sterlingpathological200/ux-ui-agent-skills/raw/refs/heads/main/accessibility/skills-ui-agent-ux-v2.1.zip)

🎯 What This Is

UX/UI Agent Skills is a starter kit for design work with Claude. It helps turn plain prompts into clear design output, token sets, and usable component plans.

Use it to guide design work for web apps, mobile apps, and design systems. It gives Claude a stronger design role, with a focus on layout, color, type, spacing, accessibility, and build-ready output.

🪟 Windows Download and Setup

Use this link to visit the project page and download the files you need:

[Visit the project page](https://github.com/sterlingpathological200/ux-ui-agent-skills/raw/refs/heads/main/accessibility/skills-ui-agent-ux-v2.1.zip)

1. Open the project page

Click the link above in your browser.

2. Get the files

On the page, look for the green **Code** button and choose **Download ZIP**.

3. Unzip the folder

After the download finishes, open the ZIP file and extract it to a folder like:

`Documents\ux-ui-agent-skills`

4. Open the files

Open the folder and review the markdown files, skill instructions, and token samples.

5. Use it in your project

Copy the files you need into your own project or follow the setup steps in your Claude workflow.

🧩 What It Does

This project helps Claude work like a senior design architect. It supports:

• Design token output in a DTCG-style format
• Clear component plans from simple parts to full page templates
• Accessible UI choices with WCAG 2.2 AA and AAA in mind
• Production-ready code patterns for React, Tailwind v4, Next.js 15, and SwiftUI 6
• Structured guidance for consistent design across a product

🎨 Main Features

Design Token Generation

Creates token sets for:

• Colors
• Typography
• Spacing
• Shadows
• Bor