design-taste-frontend-v1

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。默认使用Server Components（
```
RSC
```
）。
- RSC安全规范： 全局状态仅在Client Components中生效。在Next.js中，需将提供者包裹在
```
"use client"
```
  组件中。
- 交互隔离： 如果第4节或第7节（动效/液态玻璃）生效，特定的交互式UI组件必须提取为独立的叶子组件，并在顶部添加
```
'use client'
```
  声明。Server Components必须仅渲染静态布局。
状态管理： 对独立UI使用本地
```
useState
```
/
```
useReducer
```
。仅在需要避免深层属性透传时使用全局状态。
样式策略： 90%的样式使用Tailwind CSS（v3/v4）。
- Tailwind版本锁定： 先检查
```
package.json
```
  。请勿在v3项目中使用v4语法。
- T4配置防护： 对于v4版本，请勿在
```
postcss.config.js
```
  中使用
```
tailwindcss
```
  插件。请使用
```
@tailwindcss/postcss
```
  或Vite插件。
反表情符号规则 [关键要求]： 绝对不要在代码、标记、文本内容或替代文本中使用表情符号。使用高质量图标（Radix、Phosphor）或简洁的SVG原语替代符号。表情符号被严格禁止。
响应式与间距：
- 标准化断点（
```
sm
```
  、
```
md
```
  、
```
lg
```
  、
```
xl
```
  ）。
- 使用
```
max-w-[1400px] mx-auto
```
  或
```
max-w-7xl
```
  约束页面布局。
- 视口稳定性 [关键要求]： 全屏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
```
）和微妙的内阴影（
```
shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]
```
），模拟物理边缘折射效果。
磁性微物理效果（若MOTION_INTENSITY > 5）： 实现向鼠标光标轻微拉动的按钮。关键要求： 绝对不要使用React
```
useState
```
实现磁性悬停或连续动画。必须仅使用Framer Motion的
```
useMotionValue
```
和
```
useTransform
```
，且在React渲染周期外使用，以避免移动端性能崩溃。
持续微交互： 当
```
MOTION_INTENSITY > 5
```
时，在标准组件（头像、状态点、背景）中嵌入持续的无限微动画（脉冲、打字机、浮动、闪光、轮播）。所有交互式元素使用高端弹簧物理效果（
```
type: "spring", stiffness: 100, damping: 20
```
），禁止使用线性缓动。
布局过渡： 始终使用Framer Motion的
```
layout
```
和
```
layoutId
```
属性，实现状态变化时的平滑重排、缩放和共享元素过渡。
** stagger编排：** 不要立即挂载列表或网格。使用
```
staggerChildren
```
（Framer）或CSS级联（
```
animation-delay: calc(var(--index) * 100ms)
```
）创建顺序瀑布式展示效果。关键要求： 使用
```
staggerChildren
```
时，父组件（
```
variants
```
）和子组件必须位于同一Client Component树中。如果数据是异步获取的，需将数据作为props传入集中式父级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钩子。绝对不要使用
```
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.

完美对齐与间距： 确保内边距和外边距在数学上精确。避免带有尴尬间隙的浮动元素。
禁止3列卡片布局： 通用的「水平3等宽卡片」行被禁用。改用2列交错布局、不对称网格或横向滚动方式。

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动效。关键要求： 绝对不要在同一组件树中混合使用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 Grid： 不对称的瓦片式分组（例如苹果控制中心）。
瀑布流布局： 无固定行高的交错网格（例如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倾斜卡片。
聚光灯边框卡片： 光标下方动态发光的卡片边框。
玻璃态面板： 真正的磨砂玻璃效果，带有内折射边框。
全息箔片卡片： 悬停时颜色虹彩反射变化的卡片。
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轮播，中心聚焦，边缘向后倾斜。
拖拽平移网格： 可自由向任意方向拖拽的无限网格。
折叠图片滑块： 窄垂直/水平图片条，悬停时完全展开。
悬停图片轨迹： 鼠标留下弹出/渐隐的图片轨迹。
** glitch效果图片：** 悬停时短暂的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线条动画绘制： 实时自行绘制轮廓的矢量图。
网格渐变背景： 有机、熔岩灯般的动画颜色 blob。
镜头模糊景深： 动态模糊背景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。性能关键要求： 任何持续动效或无限循环必须被记忆化（React.memo），并完全隔离在独立的微型Client Component中。绝对不要触发父布局的重新渲染。

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网格时（例如第1行：3列 | 第2行：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?

输出前对照以下矩阵评估代码。这是应用于逻辑的最后一道筛选：

全局状态是否仅用于避免深层属性透传，而非随意使用？
高方差设计是否保证移动端布局折叠（
```
w-full
```
、
```
px-4
```
、
```
max-w-7xl mx-auto
```
）？
全屏区块是否安全使用
```
min-h-[100dvh]
```
而非存在bug的
```
h-screen
```
？
```
useEffect
```
动画是否包含严格的清理函数？
是否提供了空状态、加载状态和错误状态？
是否尽可能用间距替代卡片？
CPU密集型持续动画是否严格隔离在独立的Client Component中？