UI/UX Pro Max UI 样式设计

Model: minimax-m3 | ¥0.20/call
UI设计Claude Opus 4.7视觉设计UI样式设计

UI 样式设计：nextlevelbuilder/ui-ux-pro-max-skill: ui-styling，适用于界面设计与视觉资产创作。

Calls: 1

Skill Documentation

UI/UX Pro Max UI 样式设计

摘要

UI 样式设计：nextlevelbuilder/ui-ux-pro-max-skill: ui-styling，适用于界面设计与视觉资产创作。

> 来源: nextlevelbuilder/ui-ux-pro-max-skill (113k stars) — 67 种 UI 风格 + 161 套配色

> 原文件: .claude/skills/ui-styling/SKILL.md

> 模型推荐: claude-opus-4-7 (设计美学)

这个 skill 是干嘛的

nextlevelbuilder 在 113k stars 的 ui-ux-pro-max-skill 仓库里整理的 UI/UX 设计系统 — 67 种 UI 风格一键切换 + 161 套配色 + 99 条 UX 规范。让 AI Agent 产出符合企业级设计标准的前端界面。

michael 强调"skill 要有相应的指导功能,指导用户使用",所以加了下面两节让 Agent 和用户对接。

---

🤖 Agent 使用说明

1. 用户提到"设计 / 改 UI / 配色 / 视觉"时触发

2. skill 优先于通用 design-sense 跑(因为它有 67 种风格选择)

3. 涉及"改颜色 / 字体 / 布局"前先问用户偏好(品牌色 / 风格)

4. 完工前跑 audit 自检

5. 完工后输出可执行的设计建议

👤 用户需要做什么?

1. 告诉 Agent 你要做什么样的设计(品牌页 / 产品页 / Dashboard / Banner / Slides)

2. 如果 Agent 反问"受众是谁 / 品牌色 / 风格倾向",按提示回答

3. 全程 Agent 自动化,你只需回答决策点

---

原 skill 内容(nextlevelbuilder/ui-ux-pro-max-skill/.claude/skills/ui-styling/SKILL.md,截断到 12k chars)

---

name: ui-styling

description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

argument-hint: "[component or layout]"

license: MIT

metadata:

author: claudekit

version: "1.0.0"

---

UI Styling Skill

Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.

Reference

When to Use This Skill

Use when:

Core Stack

Component Layer: shadcn/ui

Styling Layer: Tailwind CSS

Visual Design Layer: Canvas

Quick Start

Component + Styling Setup

**Install shadcn/ui with Tailwind:**

npx shadcn@latest init

CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.

**Add components:**

npx shadcn@latest add button card dialog form

**Use components with utility styling:**

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Alternative: Tailwind-Only Setup

**Vite projects:**

npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
/* src/index.css */
@import "tailwindcss";

Component Library Guide

**Comprehensive component catalog with usage patterns, installation, and composition examples.**

See: `references/shadcn-components.md`

Covers:

Theme & Customization

**Theme configuration, CSS variables, dark mode implementation, and component customization.**

See: `references/shadcn-theming.md`

Covers:

Accessibility Patterns

**ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.**

See: `references/shadcn-accessibility.md`

Covers:

Tailwind Utilities

**Core utility classes for layout, spacing, typography, colors, borders, and shadows.**

See: `references/tailwind-utilities.md`

Covers:

Responsive Design

**Mobile-first breakpoints, responsive utilities, and adaptive layouts.**

See: `references/tailwind-responsive.md`

Covers:

Tailwind Customization

**Config file structure, custom utilities, plugins, and theme extensions.**

See: `references/tailwind-customization.md`

Covers:

Visual Design System

**Canvas-based design philosophy, visual communication principles, and sophisticated compositions.**

See: `references/canvas-design-system.md`

Covers:

Utility Scripts

**Python automation for component installation and configuration generation.**

shadcn_add.py

Add shadcn/ui components with dependency handling:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Generate tailwind.config.js with custom theme:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

Best Practices

1. **Component Composition**: Build complex UIs from simple, composable primitives

2. **Utility-First Styling**: Use Tailwind classes directly; extract components only for true repetition

3. **Mobile-First Responsive**: Start with mobile styles, layer responsive variants

4. **Accessibility-First**: Leverage Radix UI primitives, add focus states, use semantic HTML

5. **Design Tokens**: Use consistent spacing scale, color palettes, typography system

6. **Dark Mode Consistency**: Apply dark variants to all themed elements

7. **Performance**: Leverage automatic CSS purging, avoid dynamic class names

8. **TypeScript**: Use full type safety for better DX

9. **Visual Hierarchy**: Let composition guide attention, use spacing and color intentionally

10. **Expert Craftsmanship**: Every detail matters - treat UI as a craft

Reference Navigation

**Component Library**

**Styling System**

**Visual Design**

**Automation**

Common Patterns

**Form with validation:**

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

**Responsive layout with dark mode:**

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

Resources

常见问题（FAQ）

使用「UI 样式设计」这个 skill 能解决什么问题?

本 skill 专注于UI 样式设计，nextlevelbuilder/ui-ux-pro-max-skill: ui-styling。它将相关流程标准化，帮助用户更快拿到可靠结果，减少重复手工操作。

什么情况下适合使用「UI 样式设计」?

当你需要在UI 样式设计相关工作中获得稳定、可复用的产出时最适合——无论是单次任务还是纳入日常工作流，都能直接调用。

使用「UI 样式设计」前需要准备什么?

提供设计目标、品牌偏好或参考素材，越具体产出越贴合需求。

FAQ

👤 用户需要做什么?

1. 告诉 Agent 你要做什么样的设计(品牌页 / 产品页 / Dashboard / Banner / Slides)

2. 如果 Agent 反问"受众是谁 / 品牌色 / 风格倾向",按提示回答

3. 全程 Agent 自动化,你只需回答决策点

---

使用「UI 样式设计」这个 skill 能解决什么问题?

本 skill 专注于UI 样式设计，nextlevelbuilder/ui-ux-pro-max-skill: ui-styling。它将相关流程标准化，帮助用户更快拿到可靠结果，减少重复手工操作。

什么情况下适合使用「UI 样式设计」?

当你需要在UI 样式设计相关工作中获得稳定、可复用的产出时最适合——无论是单次任务还是纳入日常工作流，都能直接调用。

使用「UI 样式设计」前需要准备什么?

提供设计目标、品牌偏好或参考素材，越具体产出越贴合需求。

Open AIMS China Panel