frontend-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Designer

前端设计师

Build production-grade frontend interfaces with modern React, TailwindCSS v4, and shadcn/ui. Five modes from project scaffolding to codebase audit.

Input:

$ARGUMENTS

— mode keyword + target, natural language UI description, or file path.

使用现代React、TailwindCSS v4和shadcn/ui构建生产级前端界面，覆盖从项目脚手架搭建到代码库审计的五种模式。

输入：

$ARGUMENTS

— 模式关键词+目标、自然语言UI描述，或是文件路径。

Canonical Vocabulary

标准术语表

Term	Meaning	NOT
server component	React component rendered on the server; default in Next.js/Remix App Router	"SSR component"
client component	React component with `"use client"` directive; runs in the browser	"CSR component"
design token	CSS custom property holding a design decision (color, spacing, font)	"CSS variable" (too generic)
theme	Complete set of design tokens configured in `@theme {}`	"skin", "palette"
component	Reusable UI building block (React component + styles)	"widget", "module"
primitive	Radix UI base component providing behavior without styling	"base component"
registry	shadcn/ui component distribution endpoint (local or remote)	"package", "library"
container query	CSS `@container` rule for component-scoped responsive design	"media query" (page-scoped)
action	React 19 Server Action: async function executed server-side via form	"API call", "handler"
scaffold	Create a new project with full stack configuration	"bootstrap", "setup"
refactor	Modernize existing frontend code to current best practices	"rewrite"
audit	Read-only analysis of frontend codebase quality and patterns	"review", "scan"
utility class	Tailwind CSS class mapping to a single CSS declaration	"helper class"
logical property	CSS property using start/end instead of left/right for RTL	"directional property"
texture healing	Monaspace technique for adjusting glyph spacing in monospace	—

术语	含义	禁用表述
server component	在服务端渲染的React组件，是Next.js/Remix App Router中的默认组件类型	"SSR component"
client component	带有 `"use client"` 指令的React组件，在浏览器中运行	"CSR component"
design token	承载设计决策的CSS自定义属性（颜色、间距、字体）	请勿使用太宽泛的"CSS variable"表述
theme	在 `@theme {}` 中配置的完整design token集合	"skin"、"palette"
component	可复用的UI构建块（React组件+样式）	"widget"、"module"
primitive	Radix UI提供的基础组件，仅提供交互逻辑不含样式	"base component"
registry	shadcn/ui组件分发端点（本地或远程）	"package"、"library"
container query	实现组件级响应式设计的CSS `@container` 规则	请勿和页面级的"media query"混淆
action	React 19 Server Action：通过表单在服务端执行的异步函数	"API call"、"handler"
scaffold	创建带有全栈配置的新项目	"bootstrap"、"setup"
refactor	将现有前端代码升级为符合当前最佳实践的版本	"rewrite"
audit	对前端代码库质量和编码模式的只读分析	"review"、"scan"
utility class	映射单个CSS声明的Tailwind CSS类	"helper class"
logical property	使用start/end替代left/right、支持RTL的CSS属性	"directional property"
texture healing	Monaspace中调整等宽字体字形间距的技术	—

Dispatch

调度逻辑

Route

$ARGUMENTS

to the appropriate mode:

`$ARGUMENTS` pattern	Mode	Start at
`scaffold <name>` / `init <name>`	Scaffold	Mode A
`component <name>` / `create <name>`	Component	Mode B
`theme` / `theme <path>` / `tokens` / `tokens <path>`	Theme	Mode C
`refactor <path>` / `style <path>`	Refactor	Mode D
`audit` / `audit <path>`	Audit	Mode E
Natural language UI description ("build a sidebar", "design a card")	Auto: Component	Mode B
Path to existing `.tsx` / `.jsx` / `.css` file or directory	Auto: Refactor	Mode D
Error message / "not working" / "broken"	Auto: Audit	Mode E
"backend" / "API" / "database" / "DevOps"	Refuse	Redirect to relevant skill
Empty	Gallery	Show modes with example invocations

将

$ARGUMENTS

路由到对应模式：

`$ARGUMENTS` 匹配模式	模式	入口
`scaffold <名称>` / `init <名称>`	脚手架搭建	模式A
`component <名称>` / `create <名称>`	组件开发	模式B
`theme` / `theme <路径>` / `tokens` / `tokens <路径>`	主题配置	模式C
`refactor <路径>` / `style <路径>`	代码重构	模式D
`audit` / `audit <路径>`	代码审计	模式E
自然语言UI描述（如"搭建侧边栏"、"设计卡片"）	自动匹配：组件开发	模式B
现有 `.tsx` / `.jsx` / `.css` 文件或目录路径	自动匹配：代码重构	模式D
报错信息 / "无法运行" / "功能异常"	自动匹配：代码审计	模式E
"backend" / "API" / "database" / "DevOps"	拒绝处理	引导用户使用对应技能
空输入	功能展示	展示各模式及调用示例

Classification Gate

分类校验

For ambiguous inputs, disambiguate before routing:

Signal	Route to
Error, broken, bug, crash, "doesn't work"	Audit
Upgrade, modernize, migrate, update, convert	Refactor
Colors, dark mode, tokens, palette, branding	Theme
Build, create, design, add, new + UI noun	Component
Setup, init, start, new project	Scaffold
Mixed signals	Ask user which mode

针对模糊输入，先做歧义判断再路由：

信号	路由目标
报错、功能异常、bug、崩溃、"无法运行"	代码审计
升级、现代化、迁移、更新、转换	代码重构
颜色、深色模式、tokens、调色板、品牌设计	主题配置
搭建、创建、设计、添加、新增 + UI名词	组件开发
初始化、init、启动、新项目	脚手架搭建
混合信号	询问用户所需模式

Live Documentation (Optional)

在线文档（可选）

Consult live docs only when: user reports unexpected behavior, a reference notes a pre-release API, or user asks about features not covered in bundled references.

Context7 —
```
resolve-library-id
```
for "tailwindcss", "shadcn-ui", or "react", then
```
query-docs
```
.

WebSearch —

site:tailwindcss.com

site:ui.shadcn.com

, or

site:react.dev

for specific topics.

If live docs contradict bundled references, live docs win.

仅当以下情况时查询在线文档：用户反馈异常行为、内容提及预发布API、用户询问内置参考未覆盖的功能。

Context7 — 为"tailwindcss"、"shadcn-ui"或"react"执行
```
resolve-library-id
```
，再调用
```
query-docs
```
。

WebSearch — 针对特定主题执行

site:tailwindcss.com

、

site:ui.shadcn.com

或

site:react.dev

搜索。

若在线文档与内置参考冲突，以在线文档为准。

Mode A: Scaffold

模式A：脚手架搭建

Goal: Create a new project with the full modern frontend stack.

Load:

references/tailwind-v4.md

references/vite-config.md

references/shadcn-patterns.md

references/typography.md

references/aesthetic-guide.md

目标： 创建搭载完整现代前端技术栈的新项目。

加载参考：

references/tailwind-v4.md

、

references/vite-config.md

、

references/shadcn-patterns.md

、

references/typography.md

、

references/aesthetic-guide.md

A.1 Framework Selection

A.1 框架选择

Ask or detect:

Framework	When
Vite + React	SPA, no SSR needed, fastest setup
Next.js App Router	SSR/SSG, Server Components, production web apps
Remix	Full-stack, nested routing, progressive enhancement

Default to Vite + React unless user specifies otherwise.

询问用户或自动识别：

框架	适用场景
Vite + React	SPA、无需SSR、追求最快搭建速度
Next.js App Router	SSR/SSG、Server Components、生产级Web应用
Remix	全栈应用、嵌套路由、渐进式增强

除非用户指定，默认使用 Vite + React。

A.2 Tailwind v4 Setup

A.2 Tailwind v4 配置

CSS-first configuration — no

tailwind.config.js

css

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.6 0.2 260);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  --font-display: "Your Display Font", serif;
  --font-body: "Your Body Font", sans-serif;
  --font-mono: "Monaspace Neon", monospace;
}

CSS优先配置模式，无需

tailwind.config.js

：

css

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.6 0.2 260);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  --font-display: "Your Display Font", serif;
  --font-body: "Your Body Font", sans-serif;
  --font-mono: "Monaspace Neon", monospace;
}

A.3 shadcn/ui Init

A.3 shadcn/ui 初始化

bash

npx shadcn@latest init

Configure

components.json

for project structure. Install core components:

button

input

card

dialog

dropdown-menu

toast

bash

npx shadcn@latest init

为项目结构配置

components.json

，安装核心组件：

button

、

input

、

card

、

dialog

、

dropdown-menu

、

toast

。

A.4 Typography

A.4 字体配置

Code/mono: Monaspace Neon (or Argon, Krypton, Radon, Xenon per aesthetic)
Display: Distinctive, characterful — never Inter, Roboto, Arial, system-ui
Body: Clean, readable — pair with display font for contrast
Load
```
references/typography.md
```
for @font-face setup and fluid type scale.

代码/等宽字体： Monaspace Neon（可根据设计风格选择Argon、Krypton、Radon、Xenon）
展示字体： 有辨识度、有特色的字体，禁止使用Inter、Roboto、Arial、system-ui
正文字体： 清晰易读，和展示字体形成对比
加载
```
references/typography.md
```
获取@font-face配置和流式字号体系说明。

A.5 Aesthetic Direction

A.5 设计风格方向

Run the design thinking exercise (see Aesthetic Direction section below). Commit to a direction before writing any component code.

完成设计思考流程（见下文设计风格方向章节），确定风格后再编写组件代码。

A.6 File Structure

A.6 文件结构

src/
  components/ui/     # shadcn/ui components (managed by CLI)
  components/        # Custom project components
  lib/               # Utilities, helpers
  hooks/             # Custom React hooks
  styles/            # Global CSS, @theme, @font-face
  app/ or pages/     # Routes (framework-dependent)

src/
  components/ui/     # shadcn/ui组件（由CLI管理）
  components/        # 项目自定义组件
  lib/               # 工具函数、辅助方法
  hooks/             # 自定义React hooks
  styles/            # 全局CSS、@theme、@font-face配置
  app/ or pages/     # 路由（依赖具体框架）

Mode B: Component

模式B：组件开发

Goal: Design and build a single component with production quality.

Load:

references/react-19.md

references/shadcn-patterns.md

references/modern-css.md

Conditional: Load

references/aesthetic-guide.md

for visual/landing/hero/marketing components. Skip for utility components, forms, data tables.

目标： 设计并构建生产级单组件。

加载参考：

references/react-19.md

、

references/shadcn-patterns.md

、

references/modern-css.md

条件加载： 开发视觉/落地页/首屏/营销类组件时加载

references/aesthetic-guide.md

，开发工具类组件、表单、数据表格时无需加载。

B.1 Classify Component

B.1 组件类型判定

Context	Default	"use client" needed?
Next.js / Remix App Router	Server Component	Only if using hooks, event handlers, or browser APIs
Vite + React	Client Component	No — `"use client"` is unnecessary, all components are client

For compound components (e.g.,

<Tabs>

<Accordion>

): separate server wrapper from client interactive parts.

上下文	默认类型	是否需要"use client"？
Next.js / Remix App Router	Server Component	仅当使用hooks、事件处理函数或浏览器API时需要
Vite + React	Client Component	不需要 — `"use client"` 无意义，所有组件都是客户端组件

复合组件（如

<Tabs>

、

<Accordion>

）：将服务端 wrapper 和客户端交互部分拆分。

B.2 Design Intent

B.2 设计需求收集

Gather before building:

Purpose: What problem does this solve? Who uses it?
Interactions: Click, hover, drag, keyboard, touch?
Responsive behavior: How does it adapt across container sizes?
Accessibility: Required ARIA roles, keyboard patterns?

开发前确认以下信息：

用途： 解决什么问题？目标用户是谁？
交互： 是否支持点击、 hover、拖拽、键盘操作、触摸操作？
响应式表现： 不同容器尺寸下的适配逻辑？
无障碍要求： 需要的ARIA角色、键盘操作规范？

B.3 Primitive Selection

B.3 原语选择

Check if shadcn/ui provides the component or a close base. If interactive (dialog, dropdown, popover, tooltip, tabs, accordion, toggle), use Radix UI primitives via shadcn/ui — never build from scratch.

Load

references/shadcn-patterns.md

for CLI commands and customization patterns.

检查shadcn/ui是否提供对应组件或近似基础组件。如果是交互组件（对话框、下拉菜单、弹出层、提示框、标签页、手风琴、开关），必须通过shadcn/ui使用Radix UI原语 — 禁止从零开发。

加载

references/shadcn-patterns.md

获取CLI命令和自定义模式说明。

B.4 Implement

B.4 代码实现

Style with Tailwind v4 utility classes + CSS custom properties from
```
@theme {}
```
Responsiveness: use
```
@container
```
queries for component-level adaptation, not media queries
Modern CSS:
```
:has()
```
for parent-based styling, view transitions for state changes
Keep component files focused — extract hooks and utilities to separate files

使用Tailwind v4 utility类 +
```
@theme {}
```
中的CSS自定义属性实现样式
响应式：组件级适配使用
```
@container
```
查询，不使用媒体查询
现代CSS：使用
```
:has()
```
实现基于父元素的样式、视图过渡实现状态切换效果
保持组件文件职责单一 — 将hooks和工具函数拆分到独立文件

B.5 Accessibility

B.5 无障碍要求

Non-negotiable for every interactive component:

Keyboard navigation (Tab, Enter, Escape, Arrow keys as appropriate)
ARIA attributes (roles, labels, descriptions, live regions)
Focus management (trap in modals, restore on close)
Color contrast: WCAG AA minimum (4.5:1 text, 3:1 large text/UI)

所有交互组件必须满足以下要求，不可妥协：

键盘导航（根据场景支持Tab、Enter、Escape、方向键）
ARIA属性（角色、标签、描述、实时区域）
焦点管理（模态框内锁定焦点、关闭后恢复焦点）
色彩对比度：最低满足WCAG AA标准（文本4.5:1、大文本/UI元素3:1）

Mode C: Theme

模式C：主题配置

Goal: Configure or reconfigure the project's design token system.

Load:

references/tailwind-v4.md

references/modern-css.md

references/typography.md

目标： 配置或重新配置项目的design token体系。

加载参考：

references/tailwind-v4.md

、

references/modern-css.md

、

references/typography.md

C.1 Sub-dispatch

C.1 子调度逻辑

$ARGUMENTS

contains

tokens

: run token extraction workflow:

Grep for hardcoded color values (hex, rgb, hsl) across
```
.tsx
```
,
```
.jsx
```
,
```
.css
```
files
Grep for hardcoded spacing/font values not using Tailwind utilities
Organize into three layers: primitive (raw values) → semantic (purpose-named) → component (scoped overrides)
Generate
```
@theme {}
```
block with organized custom properties

如果

$ARGUMENTS

包含

tokens

，执行token提取流程：

遍历所有
```
.tsx
```
、
```
.jsx
```
、
```
.css
```
文件，搜索硬编码的颜色值（hex、rgb、hsl）
搜索未使用Tailwind工具类的硬编码间距/字体值
分为三层组织：基础层（原始值）→ 语义层（按用途命名）→ 组件层（组件级覆盖）
生成按规则组织的
```
@theme {}
```
代码块

C.2 Color System

C.2 色彩体系

Use

oklch

for perceptually uniform color manipulation:

css

@theme {
  --color-primary: oklch(0.6 0.2 260);
  --color-primary-light: color-mix(in oklch, var(--color-primary) 70%, white);
  --color-primary-dark: color-mix(in oklch, var(--color-primary) 70%, black);
}

contrast-color() is experimental — Firefox 146+ and Safari TP only. Use manual fallbacks:

css

/* Fallback for contrast-color() */
--color-on-primary: oklch(1 0 0); /* manually chosen for contrast */

使用

oklch

实现感知均匀的色彩管理：

css

@theme {
  --color-primary: oklch(0.6 0.2 260);
  --color-primary-light: color-mix(in oklch, var(--color-primary) 70%, white);
  --color-primary-dark: color-mix(in oklch, var(--color-primary) 70%, black);
}

contrast-color()为实验性属性 — 仅支持Firefox 146+和Safari技术预览版，需手动添加降级方案：

css

/* contrast-color()降级方案 */
--color-on-primary: oklch(1 0 0); /* 手动选择满足对比度的颜色 */

C.3 Dark Mode

C.3 深色模式

CSS custom properties strategy with Tailwind v4:

css

@custom-variant dark (&:where(.dark, .dark *));

Override tokens on the

.dark

selector:

css

.dark {
  --color-surface: oklch(0.15 0 0);
  --color-text: oklch(0.95 0 0);
}

Tailwind v4的CSS自定义属性实现方案：

css

@custom-variant dark (&:where(.dark, .dark *));

在

.dark

选择器下覆盖token：

css

.dark {
  --color-surface: oklch(0.15 0 0);
  --color-text: oklch(0.95 0 0);
}

C.4 Typography Scale

C.4 流式字号体系

Fluid type scale with

clamp()

css

@theme {
  --text-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --text-lg: clamp(1.125rem, 0.75vw + 1rem, 1.25rem);
  --text-xl: clamp(1.25rem, 1vw + 1.125rem, 1.5rem);
}

使用

clamp()

实现流式字号：

css

@theme {
  --text-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --text-lg: clamp(1.125rem, 0.75vw + 1rem, 1.25rem);
  --text-xl: clamp(1.25rem, 1vw + 1.125rem, 1.5rem);
}

C.5 RTL Preparation

C.5 RTL适配准备

Audit and convert directional properties to logical equivalents:

Physical	Logical
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`text-align: left`	`text-align: start`
`float: right`	`float: inline-end`

检查并将物理属性转换为逻辑属性：

物理属性	逻辑属性
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`text-align: left`	`text-align: start`
`float: right`	`float: inline-end`

Mode D: Refactor

模式D：代码重构

Goal: Modernize existing frontend code to current best practices.

Load:

references/tailwind-v4.md

references/react-19.md

references/modern-css.md

references/anti-patterns.md

目标： 将现有前端代码升级为符合当前最佳实践的版本。

加载参考：

references/tailwind-v4.md

、

references/react-19.md

、

references/modern-css.md

、

references/anti-patterns.md

D.1 Pre-scan Checklist

D.1 预扫描检查清单

Before any changes, scan the project:

Glob for
```
tailwind.config.js
```
or
```
tailwind.config.ts
```
— v3 legacy config?
Grep for
```
"use client"
```
count across
```
.tsx
```
/
```
.jsx
```
files
Grep for
```
@media
```
vs
```
@container
```
ratio — component responsiveness pattern?
Grep for hardcoded hex/rgb/hsl color values outside CSS custom properties
Grep for
```
font-family
```
declarations — are distinctive fonts used or defaults?
Check
```
package.json
```
for React version, Tailwind version, Vite version

修改代码前先扫描项目：

全局搜索
```
tailwind.config.js
```
或
```
tailwind.config.ts
```
— 是否为v3旧版配置？
统计
```
.tsx
```
/
```
.jsx
```
文件中
```
"use client"
```
的出现次数
统计
```
@media
```
和
```
@container
```
的使用比例 — 组件响应式实现模式？
搜索CSS自定义属性外的硬编码hex/rgb/hsl颜色值
搜索
```
font-family
```
声明 — 是否使用了特色字体还是默认字体？
检查
```
package.json
```
中的React、Tailwind、Vite版本

D.2 Migration Patterns

D.2 迁移模式

From	To	Reference
`tailwind.config.js`	CSS-first `@import "tailwindcss"` + `@theme {}`	`references/tailwind-v4.md`
`@media` for component sizing	`@container` queries	`references/modern-css.md`
Manual dropdowns/modals	Radix primitives via shadcn/ui	`references/shadcn-patterns.md`
Hardcoded colors	Design tokens in `@theme {}`	Mode C
Class components	Function components + hooks	`references/react-19.md`
Excessive `"use client"`	Server Components where possible (Next.js/Remix only)	`references/react-19.md`

旧实现	新实现	参考文档
`tailwind.config.js`	CSS优先的 `@import "tailwindcss"` + `@theme {}`	`references/tailwind-v4.md`
组件尺寸适配使用 `@media`	`@container` 查询	`references/modern-css.md`
手动实现的下拉框/模态框	通过shadcn/ui使用Radix原语	`references/shadcn-patterns.md`
硬编码颜色	`@theme {}` 中的design token	模式C
类组件	函数组件 + hooks	`references/react-19.md`
过多的 `"use client"` 声明	尽可能使用Server Components（仅Next.js/Remix）	`references/react-19.md`

D.3 Workflow

D.3 工作流

Present file-by-file migration plan → user approval gate
Execute changes, one file at a time
Verify after each file: build passes, no visual regressions
Re-run pre-scan checklist to confirm improvement

输出逐文件迁移计划 → 用户确认环节
逐文件执行修改
每个文件修改后验证：构建通过、无视觉回归
重新运行预扫描检查清单确认改进效果

Mode E: Audit

模式E：代码审计

Goal: Read-only analysis of frontend codebase quality. Never modify code.

Load:

references/anti-patterns.md

目标： 对前端代码库质量的只读分析。禁止修改代码。

加载参考：

references/anti-patterns.md

E.1 Pre-scan

E.1 预扫描

Run the same checklist as Mode D (§D.1).

运行和模式D（§D.1）相同的检查清单。

E.2 Score Dimensions

E.2 评分维度

Dimension	What to check
Stack currency	Tailwind v4 CSS-first? React 19? Latest shadcn/ui?
Component patterns	Server vs client split? Radix primitives? Compound components?
Design tokens	@theme usage? Hardcoded values? Token layers?
CSS modernness	Container queries? :has()? Logical properties? @supports guards?
Typography	Distinctive fonts? Monaspace for code? Fluid type scale?
Accessibility	ARIA attributes? Keyboard nav? Focus management? Contrast ratios?

维度	检查项
技术栈时效性	是否使用Tailwind v4 CSS优先模式？是否使用React 19？是否使用最新版shadcn/ui？
组件模式	Server和client组件拆分是否合理？是否使用Radix原语？是否使用复合组件？
Design token	是否使用@theme？是否存在硬编码值？是否按层级组织token？
CSS现代化程度	是否使用容器查询？是否使用:has()？是否使用逻辑属性？是否使用@supports做渐进增强？
字体配置	是否使用特色字体？代码场景是否使用Monaspace？是否使用流式字号体系？
无障碍支持	是否配置ARIA属性？是否支持键盘导航？是否做焦点管理？是否满足对比度要求？

E.3 Report Format

E.3 报告格式

markdown

undefined

markdown

undefined

Frontend Audit Report

前端审计报告

Critical (must fix)

严重问题（必须修复）

[finding with evidence]

[带证据的问题描述]

Warning (should fix)

警告（建议修复）

[finding with evidence]

[带证据的问题描述]

Suggestion (nice to have)

优化建议（可按需实现）

[finding with evidence]

[带证据的建议描述]

Strengths

优势

[well-implemented patterns]

[实现良好的模式]

Recommended Actions

Aesthetic Direction

设计风格方向

Before building visual components, commit to a bold aesthetic:

Design Thinking:

Purpose — What problem does this interface solve? Who uses it?
Tone — Pick an extreme and own it: brutalist, maximalist, minimal, editorial, retro-futuristic, organic, luxury, playful, art deco, industrial, soft pastel
Constraints — Framework, performance budget, accessibility requirements
Differentiation — What makes this unforgettable? The one thing someone remembers?

Anti-Slop Rules:

NEVER default to Inter, Roboto, Arial, or system fonts
NEVER use purple gradients on white backgrounds
NEVER produce cookie-cutter layouts that could come from any AI
NEVER converge on the same aesthetic across generations — vary themes, fonts, palettes
Match implementation complexity to vision: maximalism needs elaborate code; minimalism needs precision

Full aesthetic catalog, color theory, motion design, spatial composition: load

references/aesthetic-guide.md

开发视觉组件前，先确定明确的设计风格：

设计思考流程：

用途 — 该界面解决什么问题？目标用户是谁？
风格调性 — 选择极端且统一的风格：粗粝主义、极繁主义、极简主义、编辑风、复古未来主义、有机风、轻奢风、 playful风、装饰艺术风、工业风、柔系马卡龙风
约束条件 — 框架限制、性能预算、无障碍要求
差异化点 — 什么特征能让产品让人印象深刻？用户能记住的唯一特点是什么？

反低俗设计规则：

禁止默认使用Inter、Roboto、Arial或系统字体
禁止在白色背景上使用紫色渐变
禁止生成千篇一律、所有AI都能产出的通用布局
禁止不同版本的设计风格趋同 — 变化主题、字体、调色板
实现复杂度和设计愿景匹配：极繁风格需要精细的代码实现；极简风格需要精度控制

完整的设计风格目录、色彩理论、动效设计、空间构成说明：加载

references/aesthetic-guide.md

。

Scope Boundaries

范围边界

Supersedes: The

frontend-design

skill. All aesthetic guidance is now here.

NOT for:

Backend APIs, database design, DevOps configuration
Testing frameworks (Jest, Vitest) — use standard testing patterns
State management libraries (Zustand, Redux, Jotai) — choose per project needs
Routing (React Router, TanStack Router) — framework-specific docs
Full SSR framework setup (Next.js, Remix config beyond React 19 patterns)
Build tooling, package management — defer to
```
javascript-conventions
```

替代： 原

frontend-design

技能，所有设计相关指引都已迁移到本技能。

不适用于：

后端API、数据库设计、DevOps配置
测试框架（Jest、Vitest）— 使用标准测试模式
状态管理库（Zustand、Redux、Jotai）— 按项目需求选择
路由（React Router、TanStack Router）— 参考对应框架文档
完整SSR框架搭建（Next.js、Remix超出React 19模式的配置）
构建工具、包管理 — 参考
```
javascript-conventions
```

Reference File Index

参考文件索引

Load on demand during the relevant mode. Do NOT load all at once.

File	Content	Load during
`references/tailwind-v4.md`	CSS-first config, @theme, @import, Oxide engine, dark mode, container queries, v3→v4 migration	Scaffold, Theme, Refactor
`references/shadcn-patterns.md`	CLI commands, components.json, RTL, registries, Radix primitives, compound components, forms	Scaffold, Component
`references/react-19.md`	Server vs Client decision tree (framework-dependent), Actions, useActionState, use(), Suspense	Component, Refactor
`references/modern-css.md`	Container queries, :has(), @scope, view transitions, scroll-driven animations, anchor positioning, color-mix(), @layer	Component, Theme, Refactor
`references/typography.md`	Monaspace superfamily, variable fonts, @font-face, font pairing, fluid type scale with clamp()	Scaffold, Theme, Component (visual)
`references/aesthetic-guide.md`	Design thinking, aesthetic catalog, color theory, motion, spatial composition, anti-slop rules	Component (visual/landing/hero), Scaffold
`references/vite-config.md`	Vite 6 setup, plugins, CSS handling, asset optimization, env variable security	Scaffold
`references/anti-patterns.md`	Detection criteria and fixes for common frontend anti-patterns	Audit, Refactor

对应模式按需加载，请勿一次性加载全部文件。

文件	内容	加载场景
`references/tailwind-v4.md`	CSS优先配置、@theme、@import、Oxide引擎、深色模式、容器查询、v3→v4迁移	脚手架搭建、主题配置、代码重构
`references/shadcn-patterns.md`	CLI命令、components.json、RTL、registry、Radix原语、复合组件、表单	脚手架搭建、组件开发
`references/react-19.md`	Server/Client组件决策树（依赖框架）、Actions、useActionState、use()、Suspense	组件开发、代码重构
`references/modern-css.md`	容器查询、:has()、@scope、视图过渡、滚动驱动动画、锚点定位、color-mix()、@layer	组件开发、主题配置、代码重构
`references/typography.md`	Monaspace字体家族、可变字体、@font-face、字体搭配、基于clamp()的流式字号体系	脚手架搭建、主题配置、视觉类组件开发
`references/aesthetic-guide.md`	设计思考、风格目录、色彩理论、动效、空间构成、反低俗设计规则	视觉/落地页/首屏类组件开发、脚手架搭建
`references/vite-config.md`	Vite 6搭建、插件、CSS处理、资源优化、环境变量安全	脚手架搭建
`references/anti-patterns.md`	常见前端反模式的识别标准和修复方案	代码审计、代码重构

Critical Rules

核心规则

Never use
tailwind.config.js
in Tailwind v4 — CSS-first with
```
@import "tailwindcss"
```
and
```
@theme {}
```
exclusively
Framework-aware component model — In Next.js/Remix: minimize
```
"use client"
```
, Server Components are default. In Vite+React:
```
"use client"
```
is unnecessary, all components are client
Use Radix primitives via shadcn/ui for interactive components — never build custom dialogs, popovers, dropdowns, or tooltips from scratch
Design tokens in CSS custom properties via
```
@theme {}
```
— never hardcode colors, spacing, or font values
Container queries for component responsiveness — media queries for page layout and user preferences (
```
prefers-color-scheme
```
,
```
prefers-reduced-motion
```
,
```
hover
```
,
```
pointer
```
)
@supports
guards for progressive enhancement — mandatory for
```
contrast-color()
```
, anchor positioning, scroll-driven animations,
```
@scope
```

Logical properties for RTL readiness —

margin-inline-start

not

margin-left

padding-block

not

padding-top

Never default to Inter/Roboto/Arial/system-ui — select distinctive fonts; Monaspace for code contexts
Accessibility non-negotiable — keyboard nav, ARIA, focus management, WCAG AA contrast (4.5:1 text, 3:1 large text)
Consult live docs only when needed — references are stable; fetch Context7/WebSearch only for unexpected behavior or uncovered features
Body stays under 500 lines — deep technical details go to reference files
Audit mode is read-only — never modify code in audit mode

Tailwind v4中禁止使用
tailwind.config.js
— 仅允许使用CSS优先的
```
@import "tailwindcss"
```
和
```
@theme {}
```
配置
组件模式感知框架差异 — Next.js/Remix中：最小化
```
"use client"
```
使用，默认使用Server Components。Vite+React中：无需使用
```
"use client"
```
，所有组件都是客户端组件
交互组件必须通过shadcn/ui使用Radix原语 — 禁止从零开发自定义对话框、弹出层、下拉菜单或提示框
Design token必须通过
@theme {}
定义为CSS自定义属性 — 禁止硬编码颜色、间距或字体值
组件级响应式使用容器查询 — 媒体查询仅用于页面布局和用户偏好适配（
```
prefers-color-scheme
```
、
```
prefers-reduced-motion
```
、
```
hover
```
、
```
pointer
```
）
使用
@supports
实现渐进增强 —
```
contrast-color()
```
、锚点定位、滚动驱动动画、
```
@scope
```
必须添加降级判断
使用逻辑属性支持RTL适配 — 使用
```
margin-inline-start
```
而非
```
margin-left
```
，使用
```
padding-block
```
而非
```
padding-top
```
禁止默认使用Inter/Roboto/Arial/system-ui — 选择有辨识度的字体；代码场景使用Monaspace
无障碍要求不可妥协 — 键盘导航、ARIA、焦点管理、WCAG AA对比度（文本4.5:1、大文本3:1）
仅必要时查询在线文档 — 内置参考为稳定版本；仅当出现异常行为或功能未覆盖时才调用Context7/WebSearch
正文内容不超过500行 — 深度技术细节放入参考文件
审计模式为只读模式 — 审计模式下禁止修改代码

frontend-designer

Original

Translation

Frontend Designer

前端设计师

Canonical Vocabulary

标准术语表

Dispatch

调度逻辑

Classification Gate

分类校验

Live Documentation (Optional)

在线文档（可选）

Mode A: Scaffold

模式A：脚手架搭建

A.1 Framework Selection

A.1 框架选择

A.2 Tailwind v4 Setup

A.2 Tailwind v4 配置

A.3 shadcn/ui Init

A.3 shadcn/ui 初始化

A.4 Typography

A.4 字体配置

A.5 Aesthetic Direction

A.5 设计风格方向

A.6 File Structure

A.6 文件结构

Mode B: Component

模式B：组件开发

B.1 Classify Component

B.1 组件类型判定

B.2 Design Intent

B.2 设计需求收集

B.3 Primitive Selection

B.3 原语选择

B.4 Implement

B.4 代码实现

B.5 Accessibility

B.5 无障碍要求

Mode C: Theme

模式C：主题配置

C.1 Sub-dispatch

C.1 子调度逻辑

C.2 Color System

C.2 色彩体系

C.3 Dark Mode

C.3 深色模式

C.4 Typography Scale

C.4 流式字号体系

C.5 RTL Preparation

C.5 RTL适配准备

Mode D: Refactor

模式D：代码重构

D.1 Pre-scan Checklist

D.1 预扫描检查清单

D.2 Migration Patterns

D.2 迁移模式

D.3 Workflow

D.3 工作流

Mode E: Audit

模式E：代码审计

E.1 Pre-scan

E.1 预扫描

E.2 Score Dimensions

E.2 评分维度

E.3 Report Format

E.3 报告格式

Frontend Audit Report

前端审计报告

Critical (must fix)

严重问题（必须修复）

Warning (should fix)

警告（建议修复）

Suggestion (nice to have)

优化建议（可按需实现）

Strengths

优势

Recommended Actions

推荐操作

Aesthetic Direction