菜单
Tailwind CSS v4 — utility-first CSS framework (87k+ stars, active). The dominant CSS choice for modern React/Vue/Svelte projects. v4 uses Oxide engine (much faster) and native CSS `@theme` directive. Covers install, v3 → v4 migration, design token customization, and common UI patterns.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Based on Google Stitch DESIGN.md methodology and 58 world-class brand design systems (Apple, Tesla, Stripe, Vercel, Linear, Airbnb, Spotify, Notion, etc.), this skill provides a complete framework for AI agents to generate production-grade UI with distinctive aesthetic quality. Covers design analysis, DESIGN.md creation, and pixel-perfect implementation across all frontend platforms.
OpenAI GPT Image 2 skill for production visual asset generation and editing. Covers Image API vs Responses API selection, prompt-to-asset workflows, high-fidelity edits, output sizing, compression, moderation, cost controls, and DesignDNA-ready asset handoff.
Ant Design Pro — enterprise React admin scaffold + pro-components library. Scaffold (37k stars) gives a full B2B admin starter with layouts, routes, authentication, i18n. Pro-components (4k stars) provides high-level business components (ProTable, ProForm, ProLayout, ProDescriptions). Both active through 2026.
Ant Design (antd) React component library skill — Alibaba's flagship enterprise React UI (97k+ stars, v6.x, active). The de-facto standard for B2B admin/dashboard in China and widely used globally. Covers 60+ components with Form/Table patterns, v6 CSS-variable theming, App/ConfigProvider usage, @ant-design/cli, and v5 → v6 migration notes.
Ant Design X — Alibaba's React AI/LLM conversation UI library (active v2.x). Purpose-built for AI copilot / chatbot interfaces with streaming, message bubbles, sender input, suggestions, prompts, and thought processes. The React equivalent of TDesign Chat.
TDesign Vue Next Chat — Tencent's official AI/LLM conversation UI component package for Vue 3 (part of tdesign-vue-next monorepo, active v0.5.x). Covers Chatbot/Chat primitives, streaming message rendering, Markdown + code-block support, AG-UI or custom SSE service protocols, tool-call/thinking UI, and AI copilot interface patterns.
| name | tailwindcss |
| description | Tailwind CSS v4 — utility-first CSS framework (87k+ stars, active). The dominant CSS choice for modern React/Vue/Svelte projects. v4 uses Oxide engine (much faster) and native CSS `@theme` directive. Covers install, v3 → v4 migration, design token customization, and common UI patterns. |
Source: tailwindlabs/tailwindcss · 87k+ ⭐ · v4.x · 🟢 active 2026 Docs: https://tailwindcss.com/
npm install tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
export default {
plugins: [tailwindcss()],
};
/* src/index.css */
@import "tailwindcss";
npm install tailwindcss @tailwindcss/postcss
// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
/* app/globals.css */
@import "tailwindcss";
| v3 | v4 |
|---|---|
tailwind.config.js | CSS-based config via @theme |
@tailwind base; @tailwind components; @tailwind utilities; | Single @import "tailwindcss"; |
@layer imports | Automatic |
theme.extend.colors | @theme { --color-brand: ... } |
| PostCSS required | Optional (Vite plugin is standalone) |
v3 projects still work — v4 adds a compatibility layer. But new projects should adopt v4-native conventions.
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.97 0.02 270);
--color-brand-500: oklch(0.55 0.22 270);
--color-brand-900: oklch(0.25 0.15 270);
--font-sans: "Inter", "system-ui", "sans-serif";
--font-mono: "JetBrains Mono", "monospace";
--radius-default: 0.5rem;
--radius-lg: 1rem;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}
Now bg-brand-500, text-brand-900, font-sans, rounded-default all work.
<!-- Stack -->
<div class="flex flex-col gap-4">...</div>
<!-- Grid -->
<div class="grid grid-cols-3 gap-6">...</div>
<!-- Responsive -->
<div class="flex flex-col md:flex-row lg:grid lg:grid-cols-4 gap-4">...</div>
<h1 class="text-4xl font-bold tracking-tight leading-tight">Heading</h1>
<p class="text-base text-gray-600 leading-relaxed max-w-prose">Body copy…</p>
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-6 shadow-sm">
<h3 class="text-lg font-semibold mb-2">Title</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description</p>
</div>
<button class="inline-flex items-center gap-2 rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 disabled:opacity-50">
Click
</button>
<label class="block">
<span class="text-sm font-medium text-gray-700">Email</span>
<input
type="email"
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:ring focus:ring-brand-500/20"
/>
</label>
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
<html class="dark">
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
Use with next-themes for automatic system/manual switching.
npm install @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
tailwind.config.js and v4 @theme — pick one per projectclass="..." strings (20+ classes) inline — extract with cva or component abstractionclass="bg-[#fa2c19]" is a smell; add --color-brand-500 token)focus-visible styling — accessibility requirement@apply for everything — it defeats utility-first; use sparingly for reusedarkMode: 'media' and also toggle .dark class — pick one strategytext-gray-600 for theme-aware text in dark mode without dark:text-gray-400- [ ] Tailwind v4 installed + @tailwindcss/vite (or @tailwindcss/postcss for Next)
- [ ] @import "tailwindcss"; in global CSS
- [ ] Custom design tokens declared in @theme { ... }
- [ ] Brand colors tokenized (not inline arbitrary hex)
- [ ] Dark mode strategy chosen (class or media)
- [ ] Font family tokenized (--font-sans)
- [ ] focus-visible styles on all interactive elements
- [ ] Responsive classes used (sm: md: lg:) for breakpoints
- [ ] Extracted reusable combos with cva / component wrappers
Tailwind is the styling engine for shadcn/ui. Adopt both together for maximum leverage. See shadcn-ui skill.
Depends on how you compose — Tailwind enables any dial vector. Common pairings: