design-taste-frontend

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

High-Agency Frontend Skill

高自主性前端技能

1. ACTIVE BASELINE CONFIGURATION

1. 主动基线配置

DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.

DESIGN_VARIANCE: 8 (1=完全对称, 10=艺术化不规则设计)
MOTION_INTENSITY: 6 (1=完全静态/无动效, 10=电影级/魔法物理动效)
VISUAL_DENSITY: 4 (1=艺术画廊式/高留白, 10=驾驶舱式/高密度数据)

AI 指令: 所有生成内容的标准基线严格遵循以上(8, 6, 4)数值。请勿要求用户编辑此文件。此外，始终优先遵循用户指令：根据用户在聊天提示中明确提出的需求动态调整这些数值。使用这些基线值（或用户覆盖后的值）作为全局变量，驱动第3到第7节的具体逻辑。

2. DEFAULT ARCHITECTURE & CONVENTIONS

2. 默认架构与规范

Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:

DEPENDENCY VERIFICATION [MANDATORY]: Before importing ANY 3rd party library (e.g.
```
framer-motion
```
,
```
lucide-react
```
,
```
zustand
```
), you MUST check
```
package.json
```
. If the package is missing, you MUST output the installation command (e.g.
```
npm install package-name
```
) before providing the code. Never assume a library exists.
Framework & Interactivity: React or Next.js. Default to Server Components (
```
RSC
```
).
- RSC SAFETY: Global state works ONLY in Client Components. In Next.js, wrap providers in a
```
"use client"
```
  component.
- INTERACTIVITY ISOLATION: If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with
```
'use client'
```
  at the very top. Server Components must exclusively render static layouts.
State Management: Use local
```
useState
```
/
```
useReducer
```
for isolated UI. Use global state strictly for deep prop-drilling avoidance.
Styling Policy: Use Tailwind CSS (v3/v4) for 90% of styling.
- TAILWIND VERSION LOCK: Check
```
package.json
```
  first. Do not use v4 syntax in v3 projects.
- T4 CONFIG GUARD: For v4, do NOT use
```
tailwindcss
```
  plugin in
```
postcss.config.js
```
  . Use
```
@tailwindcss/postcss
```
  or the Vite plugin.
ANTI-EMOJI POLICY [CRITICAL]: NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
Responsiveness & Spacing:
- Standardize breakpoints (
```
sm
```
  ,
```
md
```
  ,
```
lg
```
  ,
```
xl
```
  ).
- Contain page layouts using
```
max-w-[1400px] mx-auto
```
  or
```
max-w-7xl
```
  .
- Viewport Stability [CRITICAL]: NEVER use
```
h-screen
```
  for full-height Hero sections. ALWAYS use
```
min-h-[100dvh]
```
  to prevent catastrophic layout jumping on mobile browsers (iOS Safari).
- Grid over Flex-Math: NEVER use complex flexbox percentage math (
```
w-[calc(33%-1rem)]
```
  ). ALWAYS use CSS Grid (
```
grid grid-cols-1 md:grid-cols-3 gap-6
```
  ) for reliable structures.
Icons: You MUST use exactly
```
@phosphor-icons/react
```
or
```
@radix-ui/react-icons
```
as the import paths (check installed version). Standardize
```
strokeWidth
```
globally (e.g., exclusively use
```
1.5
```
or
```
2.0
```
).

除非用户明确指定其他技术栈，否则遵循以下结构约束以保持一致性：

依赖校验 [强制]: 导入任何第三方库（例如
```
framer-motion
```
、
```
lucide-react
```
、
```
zustand
```
）之前，必须检查
```
package.json
```
。如果缺少对应包，必须在提供代码前输出安装命令（例如
```
npm install package-name
```
）。绝对不要假设库已存在。
框架与交互: React 或 Next.js，默认使用服务端组件（
```
RSC
```
）。
- RSC 安全规则: 全局状态仅在客户端组件中生效。在Next.js中，将provider包裹在标注
```
"use client"
```
  的组件内。
- 交互逻辑隔离: 如果第4或第7节（动效/液态玻璃）生效，对应的交互UI组件必须提取为独立的叶子组件，且文件顶部标注
```
'use client'
```
  。服务端组件仅可渲染静态布局。
状态管理: 独立UI使用本地
```
useState
```
/
```
useReducer
```
，仅为避免深层prop传递时使用全局状态。
样式规则: 90%的样式使用Tailwind CSS (v3/v4)实现。
- Tailwind 版本锁定: 优先检查
```
package.json
```
  ，不要在v3项目中使用v4语法。
- T4 配置防护: 针对v4版本，不要在
```
postcss.config.js
```
  中使用
```
tailwindcss
```
  插件，使用
```
@tailwindcss/postcss
```
  或Vite插件。
反表情政策 [Critical]: 绝对不要在代码、标记、文本内容、alt文本中使用表情符号。使用高质量图标（Radix、Phosphor）或简洁的SVG原生元素替代符号，表情符号被完全禁用。
响应式与间距:
- 标准化断点（
```
sm
```
  ,
```
md
```
  ,
```
lg
```
  ,
```
xl
```
  ）。
- 页面布局使用
```
max-w-[1400px] mx-auto
```
  或
```
max-w-7xl
```
  限制宽度。
- 视口稳定性 [Critical]: 绝对不要为全屏Hero区块使用
```
h-screen
```
  ，始终使用
```
min-h-[100dvh]
```
  避免移动端浏览器（iOS Safari）出现灾难性的布局跳动。
- 优先使用Grid而非Flex百分比计算: 绝对不要使用复杂的flexbox百分比计算（
```
w-[calc(33%-1rem)]
```
  ），始终使用CSS Grid（
```
grid grid-cols-1 md:grid-cols-3 gap-6
```
  ）实现可靠的布局结构。
图标: 必须使用
```
@phosphor-icons/react
```
或
```
@radix-ui/react-icons
```
作为导入路径（检查已安装版本），全局统一
```
strokeWidth
```
（例如统一使用
```
1.5
```
或
```
2.0
```
）。

3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)

3. 设计工程指令（偏见修正）

LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules:

Rule 1: Deterministic Typography

Display/Headlines: Default to
```
text-4xl md:text-6xl tracking-tighter leading-none
```
.
- ANTI-SLOP: Discourage
```
Inter
```
  for "Premium" or "Creative" vibes. Force unique character using
```
Geist
```
  ,
```
Outfit
```
  ,
```
Cabinet Grotesk
```
  , or
```
Satoshi
```
  .
- TECHNICAL UI RULE: Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (
```
Geist
```
  +
```
Geist Mono
```
  or
```
Satoshi
```
  +
```
JetBrains Mono
```
  ).

Body/Paragraphs: Default to

text-base text-gray-600 leading-relaxed max-w-[65ch]

Rule 2: Color Calibration

Constraint: Max 1 Accent Color. Saturation < 80%.
THE LILA BAN: The "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).
COLOR CONSISTENCY: Stick to one palette for the entire output. Do not fluctuate between warm and cool grays within the same project.

Rule 3: Layout Diversification

ANTI-CENTER BIAS: Centered Hero/H1 sections are strictly BANNED when
```
LAYOUT_VARIANCE > 4
```
. Force "Split Screen" (50/50), "Left Aligned content/Right Aligned asset", or "Asymmetric White-space" structures.

Rule 4: Materiality, Shadows, and "Anti-Card Overuse"

DASHBOARD HARDENING: For
```
VISUAL_DENSITY > 7
```
, generic card containers are strictly BANNED. Use logic-grouping via
```
border-t
```
,
```
divide-y
```
, or purely negative space. Data metrics should breathe without being boxed in unless elevation (z-index) is functionally required.
Execution: Use cards ONLY when elevation communicates hierarchy. When a shadow is used, tint it to the background hue.

Rule 5: Interactive UI States

Mandatory Generation: LLMs naturally generate "static" successful states. You MUST implement full interaction cycles:
- Loading: Skeletal loaders matching layout sizes (avoid generic circular spinners).
- Empty States: Beautifully composed empty states indicating how to populate data.
- Error States: Clear, inline error reporting (e.g., forms).
- Tactile Feedback: On
```
:active
```
  , use
```
-translate-y-[1px]
```
  or
```
scale-[0.98]
```
  to simulate a physical push indicating success/action.

Rule 6: Data & Form Patterns

Forms: Label MUST sit above input. Helper text is optional but should exist in markup. Error text below input. Use a standard
```
gap-2
```
for input blocks.

LLM对特定UI陈词滥调模式存在统计偏见，使用以下工程化规则主动构建高质量界面：

规则1：确定性排版

大标题/标题: 默认使用
```
text-4xl md:text-6xl tracking-tighter leading-none
```
。
- 反粗制滥造规则: 高端/创意风格场景不推荐使用
```
Inter
```
  字体，使用
```
Geist
```
  、
```
Outfit
```
  、
```
Cabinet Grotesk
```
  或
```
Satoshi
```
  实现独特的字体风格。
- 技术UI规则: 仪表盘/软件UI严格禁止使用衬线字体，这类场景仅可使用高端无衬线字体组合（
```
Geist
```
  +
```
Geist Mono
```
  或
```
Satoshi
```
  +
```
JetBrains Mono
```
  ）。

正文/段落: 默认使用

text-base text-gray-600 leading-relaxed max-w-[65ch]

。

规则2：色彩校准

约束: 最多使用1个强调色，饱和度 < 80%。
紫蓝色禁令: 严格禁止使用“AI紫/蓝”风格，不得使用紫色按钮发光效果、霓虹渐变。使用绝对中性的基础色（Zinc/Slate）搭配高对比度的单一强调色（例如祖母绿、电光蓝或深玫瑰色）。
色彩一致性: 整个输出使用统一调色板，同一个项目内不要在暖灰和冷灰之间反复切换。

规则3：布局多样化

反居中偏见: 当
```
LAYOUT_VARIANCE > 4
```
时，严格禁止使用居中Hero/H1区块，强制使用“分屏”（50/50）、“内容左对齐/资源右对齐”或“不对称留白”结构。

规则4：质感、阴影与“反卡片滥用”

仪表盘优化: 当
```
VISUAL_DENSITY > 7
```
时，严格禁止使用通用卡片容器，使用
```
border-t
```
、
```
divide-y
```
或纯留白实现逻辑分组，数据指标不需要放在卡片内，除非层级（z-index）有功能层面的需求。
执行规则: 仅当阴影需要传达层级关系时使用卡片，使用阴影时要匹配背景色调。

规则5：交互UI状态

强制生成规则: LLM通常会生成“静态”成功状态，你必须实现完整的交互周期：
- 加载: 匹配布局尺寸的骨架屏（避免使用通用圆形加载动画）。
- 空状态: 设计精美的空状态，提示用户如何填充数据。
- 错误状态: 清晰的行内错误提示（例如表单场景）。
- 触觉反馈:
```
:active
```
  状态下使用
```
-translate-y-[1px]
```
  或
```
scale-[0.98]
```
  模拟物理按压效果，提示操作成功。

规则6：数据与表单模式

表单: 标签必须放在输入框上方，辅助文本可选但必须存在于标记中，错误文本放在输入框下方，输入块统一使用
```
gap-2
```
间距。

4. CREATIVE PROACTIVITY (Anti-Slop Implementation)

4. 创意主动性（反粗制滥造实现）

To actively combat generic AI designs, systematically implement these high-end coding concepts as your baseline:

"Liquid Glass" Refraction: When glassmorphism is needed, go beyond
```
backdrop-blur
```
. Add a 1px inner border (
```
border-white/10
```
) and a subtle inner shadow (
```
shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]
```
) to simulate physical edge refraction.
Magnetic Micro-physics (If MOTION_INTENSITY > 5): Implement buttons that pull slightly toward the mouse cursor. CRITICAL: NEVER use React
```
useState
```
for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's
```
useMotionValue
```
and
```
useTransform
```
outside the React render cycle to prevent performance collapse on mobile.
Perpetual Micro-Interactions: When
```
MOTION_INTENSITY > 5
```
, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components (avatars, status dots, backgrounds). Apply premium Spring Physics (
```
type: "spring", stiffness: 100, damping: 20
```
) to all interactive elements—no linear easing.
Layout Transitions: Always utilize Framer Motion's
```
layout
```
and
```
layoutId
```
props for smooth re-ordering, resizing, and shared element transitions across state changes.
Staggered Orchestration: Do not mount lists or grids instantly. Use
```
staggerChildren
```
(Framer) or CSS cascade (
```
animation-delay: calc(var(--index) * 100ms)
```
) to create sequential waterfall reveals. CRITICAL: For
```
staggerChildren
```
, the Parent (
```
variants
```
) and Children MUST reside in the identical Client Component tree. If data is fetched asynchronously, pass the data as props into a centralized Parent Motion wrapper.

为主动对抗通用AI设计，系统性实现以下高端编码概念作为基线：

“液态玻璃”折射效果: 需要实现玻璃态效果时，不要只使用
```
backdrop-blur
```
，添加1px内边框（
```
border-white/10
```
）和 subtle 内阴影（
```
shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]
```
）模拟物理边缘折射效果。
磁吸微物理效果（当MOTION_INTENSITY > 5时）: 实现可轻微向鼠标光标吸附的按钮。Critical: 绝对不要使用React
```
useState
```
实现磁吸悬停或连续动画，仅使用Framer Motion的
```
useMotionValue
```
和
```
useTransform
```
在React渲染周期外实现，避免移动端性能崩溃。
持续微交互: 当
```
MOTION_INTENSITY > 5
```
时，在标准组件（头像、状态点、背景）中嵌入持续的无限微动画（脉冲、打字机、悬浮、微光、轮播）。所有交互元素使用高端弹簧物理效果（
```
type: "spring", stiffness: 100, damping: 20
```
），禁止使用线性缓动。
布局过渡: 始终使用Framer Motion的
```
layout
```
和
```
layoutId
```
属性实现状态变化时的平滑重排、大小调整和共享元素过渡。
交错动画编排: 不要立即渲染列表或网格，使用
```
staggerChildren
```
（Framer）或CSS层叠（
```
animation-delay: calc(var(--index) * 100ms)
```
）实现顺序瀑布流显示效果。Critical: 使用
```
staggerChildren
```
时，父组件（
```
variants
```
）和子组件必须位于同一个客户端组件树中。如果数据是异步获取的，将数据作为prop传入集中的父Motion包装组件。

5. PERFORMANCE GUARDRAILS

5. 性能防护栏

DOM Cost: Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements (e.g.,
```
fixed inset-0 z-50 pointer-events-none
```
) and NEVER to scrolling containers to prevent continuous GPU repaints and mobile performance degradation.
Hardware Acceleration: Never animate
```
top
```
,
```
left
```
,
```
width
```
, or
```
height
```
. Animate exclusively via
```
transform
```
and
```
opacity
```
.
Z-Index Restraint: NEVER spam arbitrary
```
z-50
```
or
```
z-10
```
unprompted. Use z-indexes strictly for systemic layer contexts (Sticky Navbars, Modals, Overlays).

DOM开销: 颗粒/噪点滤镜仅应用于固定的、无指针事件的伪元素（例如
```
fixed inset-0 z-50 pointer-events-none
```
），绝对不要应用于滚动容器，避免持续GPU重绘导致移动端性能下降。
硬件加速: 不要动画
```
top
```
、
```
left
```
、
```
width
```
或
```
height
```
属性，仅通过
```
transform
```
和
```
opacity
```
实现动画。
Z-Index约束: 不要无理由随意使用
```
z-50
```
或
```
z-10
```
，z-index仅用于系统层级场景（固定导航栏、模态框、遮罩层）。

6. TECHNICAL REFERENCE (Dial Definitions)

6. 技术参考（参数定义）

DESIGN_VARIANCE (Level 1-10)

DESIGN_VARIANCE (等级1-10)

1-3 (Predictable): Flexbox
```
justify-center
```
, strict 12-column symmetrical grids, equal paddings.
4-7 (Offset): Use
```
margin-top: -2rem
```
overlapping, varied image aspect ratios (e.g., 4:3 next to 16:9), left-aligned headers over center-aligned data.
8-10 (Asymmetric): Masonry layouts, CSS Grid with fractional units (e.g.,
```
grid-template-columns: 2fr 1fr 1fr
```
), massive empty zones (
```
padding-left: 20vw
```
).
MOBILE OVERRIDE: For levels 4-10, any asymmetric layout above
```
md:
```
MUST aggressively fall back to a strict, single-column layout (
```
w-full
```
,
```
px-4
```
,
```
py-8
```
) on viewports
```
< 768px
```
to prevent horizontal scrolling and layout breakage.

1-3 (可预测): Flexbox
```
justify-center
```
、严格的12列对称网格、均等内边距。
4-7 (错位): 使用
```
margin-top: -2rem
```
重叠效果、多样化的图片宽高比（例如4:3和16:9并列）、标题左对齐搭配数据居中对齐。
8-10 (不对称): 瀑布流布局、使用分数单位的CSS Grid（例如
```
grid-template-columns: 2fr 1fr 1fr
```
）、大面积留白区域（
```
padding-left: 20vw
```
）。
移动端覆盖规则: 对于4-10级，
```
md:
```
以上的任何不对称布局在视口宽度 < 768px时必须强制降级为严格的单列布局（
```
w-full
```
、
```
px-4
```
、
```
py-8
```
），避免横向滚动和布局损坏。

MOTION_INTENSITY (Level 1-10)

MOTION_INTENSITY (等级1-10)

1-3 (Static): No automatic animations. CSS
```
:hover
```
and
```
:active
```
states only.

4-7 (Fluid CSS): Use

transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)

. Use

animation-delay

cascades for load-ins. Focus strictly on

transform

and

opacity

. Use

will-change: transform

sparingly.

8-10 (Advanced Choreography): Complex scroll-triggered reveals or parallax. Use Framer Motion hooks. NEVER use
```
window.addEventListener('scroll')
```
.

1-3 (静态): 无自动动画，仅实现CSS
```
:hover
```
和
```
:active
```
状态。

4-7 (流畅CSS): 使用

transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)

，加载时使用

animation-delay

层叠效果，仅聚焦

transform

和

opacity

属性，谨慎使用

will-change: transform

。

8-10 (高级编排): 复杂的滚动触发显示或视差效果，使用Framer Motion hooks，绝对不要使用
```
window.addEventListener('scroll')
```
。

VISUAL_DENSITY (Level 1-10)

VISUAL_DENSITY (等级1-10)

1-3 (Art Gallery Mode): Lots of white space. Huge section gaps. Everything feels very expensive and clean.
4-7 (Daily App Mode): Normal spacing for standard web apps.
8-10 (Cockpit Mode): Tiny paddings. No card boxes; just 1px lines to separate data. Everything is packed. Mandatory: Use Monospace (
```
font-mono
```
) for all numbers.

1-3 (艺术画廊模式): 大量留白，超大区块间距，整体质感高端简洁。
4-7 (日常应用模式): 标准Web应用的常规间距。
8-10 (驾驶舱模式): 极小内边距，无卡片容器，仅用1px线条分隔数据，所有内容高度紧凑。强制要求: 所有数字使用等宽字体（
```
font-mono
```
）。

7. AI TELLS (Forbidden Patterns)

7. AI特征（禁用模式）

To guarantee a premium, non-generic output, you MUST strictly avoid these common AI design signatures unless explicitly requested:

为保证输出高端、非通用，必须严格避免以下常见AI设计特征，除非用户明确要求：

Visual & CSS

视觉与CSS

NO Neon/Outer Glows: Do not use default
```
box-shadow
```
glows or auto-glows. Use inner borders or subtle tinted shadows.
NO Pure Black: Never use
```
#000000
```
. Use Off-Black, Zinc-950, or Charcoal.
NO Oversaturated Accents: Desaturate accents to blend elegantly with neutrals.
NO Excessive Gradient Text: Do not use text-fill gradients for large headers.
NO Custom Mouse Cursors: They are outdated and ruin performance/accessibility.

禁止霓虹/外发光效果: 不要使用默认
```
box-shadow
```
发光或自动发光效果，使用内边框或柔和的有色阴影替代。
禁止纯黑色: 不要使用
```
#000000
```
，使用近黑色、Zinc-950或炭黑色。
禁止过饱和强调色: 降低强调色饱和度，使其与中性色优雅融合。
禁止过度使用渐变文本: 不要为大标题使用文字填充渐变。
禁止自定义鼠标光标: 该设计已过时，会损害性能和可访问性。

Typography

排版

NO Inter Font: Banned. Use
```
Geist
```
,
```
Outfit
```
,
```
Cabinet Grotesk
```
, or
```
Satoshi
```
.
NO Oversized H1s: The first heading should not scream. Control hierarchy with weight and color, not just massive scale.
Serif Constraints: Use Serif fonts ONLY for creative/editorial designs. NEVER use Serif on clean Dashboards.

禁止Inter字体: 已禁用，使用
```
Geist
```
、
```
Outfit
```
、
```
Cabinet Grotesk
```
或
```
Satoshi
```
。
禁止超大H1: 首个标题不要过于突兀，通过字重和颜色控制层级，而非仅靠超大字号。
衬线字体约束: 衬线字体仅可用于创意/编辑类设计，绝对不要在简洁的仪表盘界面使用衬线字体。

Layout & Spacing

布局与间距

Align & Space Perfectly: Ensure padding and margins are mathematically perfect. Avoid floating elements with awkward gaps.
NO 3-Column Card Layouts: The generic "3 equal cards horizontally" feature row is BANNED. Use a 2-column Zig-Zag, asymmetric grid, or horizontal scrolling approach instead.

对齐与间距完美: 确保内边距和外边距数值精准，避免浮动元素出现不协调的间隙。
禁止三列卡片布局: 通用的“水平三等分卡片”功能行已禁用，使用两列之字形布局、不对称网格或横向滚动方案替代。

Content & Data (The "Jane Doe" Effect)

内容与数据（“Jane Doe”效应）

NO Generic Names: "John Doe", "Sarah Chan", or "Jack Su" are banned. Use highly creative, realistic-sounding names.
NO Generic Avatars: DO NOT use standard SVG "egg" or Lucide user icons for avatars. Use creative, believable photo placeholders or specific styling.
NO Fake Numbers: Avoid predictable outputs like
```
99.99%
```
,
```
50%
```
, or basic phone numbers (
```
1234567
```
). Use organic, messy data (
```
47.2%
```
,
```
+1 (312) 847-1928
```
).
NO Startup Slop Names: "Acme", "Nexus", "SmartFlow". Invent premium, contextual brand names.
NO Filler Words: Avoid AI copywriting clichés like "Elevate", "Seamless", "Unleash", or "Next-Gen". Use concrete verbs.

禁止通用姓名: 禁止使用“John Doe”、“Sarah Chan”或“Jack Su”，使用极具创意、听起来真实的姓名。
禁止通用头像: 不要使用标准SVG“蛋形”或Lucide用户图标作为头像，使用有创意、可信的照片占位符或特定样式。
禁止虚假数字: 避免使用可预测的输出如
```
99.99%
```
、
```
50%
```
或基础电话号码（
```
1234567
```
），使用真实的非规整数据（
```
47.2%
```
、
```
+1 (312) 847-1928
```
）。
禁止创业公司通用名称: 禁止使用“Acme”、“Nexus”、“SmartFlow”，创造高端、符合上下文的品牌名。
禁止填充词: 避免AI文案陈词滥调如“提升”、“无缝”、“释放”或“下一代”，使用具体动词。

External Resources & Components

外部资源与组件

NO Broken Unsplash Links: Do not use Unsplash. Use absolute, reliable placeholders like
```
https://picsum.photos/seed/{random_string}/800/600
```
or SVG UI Avatars.
shadcn/ui Customization: You may use
```
shadcn/ui
```
, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.
Production-Ready Cleanliness: Code must be extremely clean, visually striking, memorable, and meticulously refined in every detail.

禁止无效Unsplash链接: 不要使用Unsplash，使用绝对可靠的占位符如
```
https://picsum.photos/seed/{random_string}/800/600
```
或SVG UI头像。
shadcn/ui 自定义: 可以使用
```
shadcn/ui
```
，但绝对不要使用其通用默认状态，必须自定义圆角、颜色和阴影以匹配高端项目审美。
生产级整洁度: 代码必须极度整洁、视觉冲击力强、令人印象深刻，每个细节都经过精心打磨。

8. THE CREATIVE ARSENAL (High-End Inspiration)

8. 创意库（高端灵感来源）

Do not default to generic UI. Pull from this library of advanced concepts to ensure the output is visually striking and memorable. When appropriate, leverage GSAP (ScrollTrigger/Parallax) for complex scrolltelling or ThreeJS/WebGL for 3D/Canvas animations, rather than basic CSS motion. CRITICAL: Never mix GSAP/ThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI/Bento interactions. Use GSAP/ThreeJS EXCLUSIVELY for isolated full-page scrolltelling or canvas backgrounds, wrapped in strict useEffect cleanup blocks.

不要使用通用UI，从以下高级概念库中提取思路，确保输出视觉冲击力强、令人印象深刻。合适的场景下，使用GSAP (ScrollTrigger/Parallax) 实现复杂滚动叙事，或ThreeJS/WebGL 实现3D/Canvas动画，而非基础CSS动效。Critical: 绝对不要在同一个组件树中混合使用GSAP/ThreeJS和Framer Motion。UI/Bento交互默认使用Framer Motion，GSAP/ThreeJS仅用于独立的整页滚动叙事或画布背景，包裹在严格的useEffect清理块中。

The Standard Hero Paradigm

标准Hero范式

Stop doing centered text over a dark image. Try asymmetric Hero sections: Text cleanly aligned to the left or right. The background should feature a high-quality, relevant image with a subtle stylistic fade (darkening or lightening gracefully into the background color depending on if it is Light or Dark mode).

不要再使用深色图片上方居中文字的方案，尝试不对称Hero区块：文字清晰左对齐或右对齐，背景使用高质量相关图片，搭配柔和的风格化渐变（根据深浅模式优雅地向背景色加深或减淡）。

Navigation & Menüs

导航与菜单

Mac OS Dock Magnification: Nav-bar at the edge; icons scale fluidly on hover.
Magnetic Button: Buttons that physically pull toward the cursor.
Gooey Menu: Sub-items detach from the main button like a viscous liquid.
Dynamic Island: A pill-shaped UI component that morphs to show status/alerts.
Contextual Radial Menu: A circular menu expanding exactly at the click coordinates.
Floating Speed Dial: A FAB that springs out into a curved line of secondary actions.
Mega Menu Reveal: Full-screen dropdowns that stagger-fade complex content.

Mac OS Dock缩放效果: 导航栏位于边缘，图标悬停时流畅缩放。
磁吸按钮: 可向光标物理吸附的按钮。
粘性菜单: 子项像粘稠液体一样从主按钮分离。
灵动岛: 药丸形状的UI组件，可变形显示状态/提醒。
上下文径向菜单: 点击坐标处展开的圆形菜单。
悬浮快捷拨号: FAB按钮弹出为弧形排列的二级操作按钮。
超大菜单展开: 全屏下拉菜单，交错淡入复杂内容。

Layout & Grids

布局与网格

Bento Grid: Asymmetric, tile-based grouping (e.g., Apple Control Center).
Masonry Layout: Staggered grid without fixed row heights (e.g., Pinterest).
Chroma Grid: Grid borders or tiles showing subtle, continuously animating color gradients.
Split Screen Scroll: Two screen halves sliding in opposite directions on scroll.
Curtain Reveal: A Hero section parting in the middle like a curtain on scroll.

Bento网格: 不对称的瓦片式分组（例如苹果控制中心）。
瀑布流布局: 无固定行高的交错网格（例如Pinterest）。
色度网格: 网格边框或瓦片显示柔和的持续动画色彩渐变。
分屏滚动: 滚动时屏幕两部分向相反方向滑动。
幕布展开效果: 滚动时Hero区块像幕布一样从中间分开。

Cards & Containers

卡片与容器

Parallax Tilt Card: A 3D-tilting card tracking the mouse coordinates.
Spotlight Border Card: Card borders that illuminate dynamically under the cursor.
Glassmorphism Panel: True frosted glass with inner refraction borders.
Holographic Foil Card: Iridescent, rainbow light reflections shifting on hover.
Tinder Swipe Stack: A physical stack of cards the user can swipe away.
Morphing Modal: A button that seamlessly expands into its own full-screen dialog container.

视差倾斜卡片: 跟随鼠标坐标实现3D倾斜效果的卡片。
聚光灯边框卡片: 光标悬停时卡片边框动态点亮。
玻璃态面板: 带内折射边框的真实毛玻璃效果。
全息箔卡片: 悬停时 shifting 的彩虹光反射效果。
Tinder滑动栈: 用户可滑动移除的物理卡片栈。
变形模态框: 按钮可无缝扩展为全屏对话框容器。

Scroll-Animations

滚动动画

Sticky Scroll Stack: Cards that stick to the top and physically stack over each other.
Horizontal Scroll Hijack: Vertical scroll translates into a smooth horizontal gallery pan.
Locomotive Scroll Sequence: Video/3D sequences where framerate is tied directly to the scrollbar.
Zoom Parallax: A central background image zooming in/out seamlessly as you scroll.
Scroll Progress Path: SVG vector lines or routes that draw themselves as the user scrolls.
Liquid Swipe Transition: Page transitions that wipe the screen like a viscous liquid.

粘性滚动栈: 卡片固定在顶部，物理堆叠在彼此上方。
横向滚动劫持: 垂直滚动转换为流畅的横向画廊平移。
Locomotive滚动序列: 帧率直接绑定滚动条的视频/3D序列。
缩放视差: 滚动时中央背景图片无缝放大/缩小。
滚动进度路径: 用户滚动时SVG矢量线条或路径自动绘制。
液态滑动过渡: 页面过渡像粘稠液体一样擦拭屏幕。

Galleries & Media

画廊与媒体

Dome Gallery: A 3D gallery feeling like a panoramic dome.
Coverflow Carousel: 3D carousel with the center focused and edges angled back.
Drag-to-Pan Grid: A boundless grid you can freely drag in any compass direction.
Accordion Image Slider: Narrow vertical/horizontal image strips that expand fully on hover.
Hover Image Trail: The mouse leaves a trail of popping/fading images behind it.
Glitch Effect Image: Brief RGB-channel shifting digital distortion on hover.

穹顶画廊: 类似全景穹顶的3D画廊效果。
Coverflow轮播: 中间聚焦、边缘向后倾斜的3D轮播。
拖拽平移网格: 可向任意方向自由拖拽的无边界网格。
手风琴图片滑块: 悬停时完全展开的窄垂直/水平图片条。
悬停图片轨迹: 鼠标移动时留下弹出/消失的图片轨迹。
故障效果图片: 悬停时短暂的RGB通道偏移数字失真效果。

Typography & Text

排版与文本

Kinetic Marquee: Endless text bands that reverse direction or speed up on scroll.
Text Mask Reveal: Massive typography acting as a transparent window to a video background.
Text Scramble Effect: Matrix-style character decoding on load or hover.
Circular Text Path: Text curved along a spinning circular path.
Gradient Stroke Animation: Outlined text with a gradient continuously running along the stroke.
Kinetic Typography Grid: A grid of letters dodging or rotating away from the cursor.

动态跑马灯: 滚动时可反向或加速的无限文本条。
文本遮罩显示: 大字号文字作为透明窗口，显示后方的视频背景。
文本打乱效果: 加载或悬停时的矩阵风格字符解码效果。
环形文本路径: 沿旋转圆形路径弯曲的文本。
渐变描边动画: 轮廓文本的描边持续流动渐变效果。
动态排版网格: 字母网格可躲避光标或远离光标旋转。

Micro-Interactions & Effects

微交互与效果

Particle Explosion Button: CTAs that shatter into particles upon success.
Liquid Pull-to-Refresh: Mobile reload indicators acting like detaching water droplets.
Skeleton Shimmer: Shifting light reflections moving across placeholder boxes.
Directional Hover Aware Button: Hover fill entering from the exact side the mouse entered.
Ripple Click Effect: Visual waves rippling precisely from the click coordinates.
Animated SVG Line Drawing: Vectors that draw their own contours in real-time.
Mesh Gradient Background: Organic, lava-lamp-like animated color blobs.
Lens Blur Depth: Dynamic focus blurring background UI layers to highlight a foreground action.

粒子爆炸按钮: 操作成功时碎裂为粒子的CTA按钮。
液态下拉刷新: 类似分离水滴的移动端重载指示器。
骨架屏微光: 占位框上移动的光反射效果。
方向感知悬停按钮: 悬停填充效果从鼠标进入的一侧进入。
涟漪点击效果: 从点击坐标精准扩散的视觉波纹。
SVG线描动画: 实时绘制自身轮廓的矢量图形。
网格渐变背景: 类似熔岩灯的有机动画色彩块。
镜头模糊景深: 动态模糊背景UI层，高亮前景操作。

9. THE "MOTION-ENGINE" BENTO PARADIGM

9. “动效引擎”Bento范式

When generating modern SaaS dashboards or feature sections, you MUST utilize the following "Bento 2.0" architecture and motion philosophy. This goes beyond static cards and enforces a "Vercel-core meets Dribbble-clean" aesthetic heavily reliant on perpetual physics.

生成现代SaaS仪表盘或功能区块时，必须使用以下“Bento 2.0”架构和动效理念。它超越了静态卡片，实现“Vercel核心与Dribbble简洁”融合的审美，高度依赖持续物理动效。

A. Core Design Philosophy

A. 核心设计理念

Aesthetic: High-end, minimal, and functional.
Palette: Background in
```
#f9fafb
```
. Cards are pure white (
```
#ffffff
```
) with a 1px border of
```
border-slate-200/50
```
.
Surfaces: Use
```
rounded-[2.5rem]
```
for all major containers. Apply a "diffusion shadow" (a very light, wide-spreading shadow, e.g.,
```
shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]
```
) to create depth without clutter.
Typography: Strict
```
Geist
```
,
```
Satoshi
```
, or
```
Cabinet Grotesk
```
font stack. Use subtle tracking (
```
tracking-tight
```
) for headers.
Labels: Titles and descriptions must be placed outside and below the cards to maintain a clean, gallery-style presentation.
Pixel-Perfection: Use generous
```
p-8
```
or
```
p-10
```
padding inside cards.

审美: 高端、极简、功能优先。
调色板: 背景使用
```
#f9fafb
```
，卡片为纯白色（
```
#ffffff
```
）搭配1px
```
border-slate-200/50
```
边框。
表面: 所有主容器使用
```
rounded-[2.5rem]
```
圆角，应用“扩散阴影”（非常轻、扩散范围大的阴影，例如
```
shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]
```
）实现无杂乱的深度效果。
排版: 严格使用
```
Geist
```
、
```
Satoshi
```
或
```
Cabinet Grotesk
```
字体栈，标题使用柔和的字间距（
```
tracking-tight
```
）。
标签: 标题和描述必须放在卡片外部下方，保持画廊式的简洁呈现。
像素级完美: 卡片内部使用宽松的
```
p-8
```
或
```
p-10
```
内边距。

B. The Animation Engine Specs (Perpetual Motion)

B. 动画引擎规格（持续动效）

All cards must contain "Perpetual Micro-Interactions." Use the following Framer Motion principles:

Spring Physics: No linear easing. Use
```
type: "spring", stiffness: 100, damping: 20
```
for a premium, weighty feel.
Layout Transitions: Heavily utilize the
```
layout
```
and
```
layoutId
```
props to ensure smooth re-ordering, resizing, and shared element state transitions.
Infinite Loops: Every card must have an "Active State" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels "alive".
Performance: Wrap dynamic lists in
```
<AnimatePresence>
```
and optimize for 60fps. PERFORMANCE CRITICAL: Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.

所有卡片必须包含**“持续微交互”**，使用以下Framer Motion原则：

弹簧物理效果: 无线性缓动，使用
```
type: "spring", stiffness: 100, damping: 20
```
实现高端、有重量的质感。
布局过渡: 大量使用
```
layout
```
和
```
layoutId
```
属性，确保重排、大小调整和共享元素状态过渡平滑。
无限循环: 每个卡片必须有无限循环的“激活状态”（脉冲、打字机、悬浮或轮播），使仪表盘看起来“有生命力”。
性能: 动态列表包裹在
```
<AnimatePresence>
```
中，优化至60fps。性能Critical: 任何持续动效或无限循环必须被 memoized（React.memo），完全隔离在独立的微型客户端组件中，绝对不要触发父布局重渲染。

C. The 5-Card Archetypes (Micro-Animation Specs)

C. 5种卡片原型（微动画规格）

Implement these specific micro-animations when constructing Bento grids (e.g., Row 1: 3 cols | Row 2: 2 cols split 70/30):

The Intelligent List: A vertical stack of items with an infinite auto-sorting loop. Items swap positions using
```
layoutId
```
, simulating an AI prioritizing tasks in real-time.
The Command Input: A search/AI bar with a multi-step Typewriter Effect. It cycles through complex prompts, including a blinking cursor and a "processing" state with a shimmering loading gradient.
The Live Status: A scheduling interface with "breathing" status indicators. Include a pop-up notification badge that emerges with an "Overshoot" spring effect, stays for 3 seconds, and vanishes.
The Wide Data Stream: A horizontal "Infinite Carousel" of data cards or metrics. Ensure the loop is seamless (using
```
x: ["0%", "-100%"]
```
) with a speed that feels effortless.
The Contextual UI (Focus Mode): A document view that animates a staggered highlight of a text block, followed by a "Float-in" of a floating action toolbar with micro-icons.

构建Bento网格时实现以下特定微动画（例如第一行：3列 | 第二行：2列70/30拆分）：

智能列表: 垂直堆叠的条目带有无限自动排序循环，条目使用
```
layoutId
```
交换位置，模拟AI实时优先级排序效果。
命令输入框: 搜索/AI栏带有多步打字机效果，循环显示复杂提示词，包括闪烁光标和带微光加载渐变的“处理中”状态。
实时状态: 日程界面带有“呼吸”状态指示器，包含弹出的通知徽章，使用“超调”弹簧效果出现，停留3秒后消失。
宽数据流: 数据卡片或指标的横向“无限轮播”，确保循环无缝（使用
```
x: ["0%", "-100%"]
```
），速度自然流畅。
上下文UI（专注模式）: 文档视图动画，先交错高亮文本块，然后浮动带有微图标的操作工具栏“悬浮进入”。

10. FINAL PRE-FLIGHT CHECK

10. 最终上线前检查

Evaluate your code against this matrix before outputting. This is the last filter you apply to your logic.

Is global state used appropriately to avoid deep prop-drilling rather than arbitrarily?
Is mobile layout collapse (
```
w-full
```
,
```
px-4
```
,
```
max-w-7xl mx-auto
```
) guaranteed for high-variance designs?
Do full-height sections safely use
```
min-h-[100dvh]
```
instead of the bugged
```
h-screen
```
?
Do
```
useEffect
```
animations contain strict cleanup functions?
Are empty, loading, and error states provided?
Are cards omitted in favor of spacing where possible?
Did you strictly isolate CPU-heavy perpetual animations in their own Client Components?

输出代码前对照以下矩阵评估，这是你逻辑应用的最后一层过滤：

全局状态是否仅用于避免深层prop传递，而非随意使用？
高差异化设计是否保证移动端布局降级（
```
w-full
```
、
```
px-4
```
、
```
max-w-7xl mx-auto
```
）？
全屏区块是否安全使用
```
min-h-[100dvh]
```
而非有bug的
```
h-screen
```
？
```
useEffect
```
动画是否包含严格的清理函数？
是否提供了空状态、加载状态和错误状态？
可能的场景下是否用间距替代了卡片？
高CPU占用的持续动画是否严格隔离在独立的客户端组件中？