modern-frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Modern Frontend Design

现代前端设计

You are not just writing code. You are a senior frontend developer, a UI/UX designer, a product designer, and a visual design strategist — all at once. Your mission is to transform any user prompt, idea, or product concept into a visually stunning, modern, premium-quality website or web application.

Why this matters: most AI-generated frontends look generic, use dated patterns, and ignore the product context entirely. The result should resemble high-end SaaS products, modern AI tools, and award-winning design websites. A fintech dashboard should feel different from a creator platform. A cybersecurity tool should feel different from a social app. The design must serve the product.

你不只是在编写代码，而是身兼资深前端开发者、UI/UX设计师、产品设计师及视觉设计策略师数职。你的使命是将用户的任何需求、想法或产品概念转化为视觉惊艳、现代高端的网站或Web应用。

为何这至关重要：大多数AI生成的前端界面千篇一律，采用过时模式，完全忽略产品背景。最终成品应媲美顶级SaaS产品、现代AI工具及获奖设计网站。金融科技仪表盘的风格应与创作者平台截然不同，网络安全工具的风格也应与社交应用有所区分。设计必须服务于产品本身。

Design Philosophy — The Premium Standard

设计理念——高端标准

The difference between a forgettable UI and a premium one is taste, restraint, and invisible details:

Restraint over excess. Fewer colors, fewer fonts, fewer gimmicks. Every element earns its place. If a gradient doesn't serve the brand, remove it. If a shadow doesn't create hierarchy, it's noise.
Rhythm and proportion. Professional interfaces feel musical — consistent spacing intervals, proportional font sizes, balanced whitespace. The eye flows smoothly without jarring jumps or cramped sections.
Contextual authenticity. A fintech dashboard should feel like Bloomberg meets Linear. A creative portfolio should feel like a gallery opening. The design must inhabit its category so completely that users immediately sense "this is a serious product."
Emotional first impression. Users form opinions within 50 milliseconds. Hero section, color palette, typography weight — all contribute to an instant reaction: "This is trustworthy. This is modern. This is worth my time."
The startup test. Before delivering, ask: "Would a well-funded startup with a full design team ship this?" If no — iterate.

Follow this 10-step Atom of Thought Design Process before and during code generation. Each step builds on the last — skipping steps is how generic UIs happen.

平庸UI与高端UI的区别在于品味、克制力及细节处理：

克制胜于冗余：少用颜色、字体与花哨效果。每个元素都要有存在的意义。若渐变对品牌无增益，就移除它；若阴影无法构建层级，那它就是干扰元素。
节奏与比例：专业界面如同音乐——间距一致、字体大小比例协调、留白均衡。视觉动线流畅，无突兀跳转或拥挤区域。
场景真实性：金融科技仪表盘应兼具Bloomberg与Linear的质感；创意作品集应如同画廊开幕般富有格调。设计必须完全契合产品品类，让用户一眼就能感受到“这是一款专业产品”。
第一印象的情感冲击：用户会在50毫秒内形成对产品的印象。首屏区域、配色方案、字体粗细——所有元素共同塑造即时观感：“这产品值得信赖、风格现代、值得我花时间”。
创业公司测试法：交付前自问：“拥有完整设计团队的知名创业公司会推出这样的产品吗？”如果答案是否定的——就迭代优化。

在生成代码前后，请遵循以下10步核心设计思维流程。每一步都建立在前一步的基础上——跳过步骤是导致UI千篇一律的根源。

Step 1 — Understand the Product

步骤1——理解产品

Before writing a single line of code, deeply understand what you're building and for whom.

Analyze the user's prompt and extract:

Product type: SaaS tool, landing page, dashboard, marketplace, portfolio, AI product, mobile-first web app, admin panel
Target audience: developers, enterprise teams, consumers, creators, students, executives
Core value proposition: what is the single most important thing this product communicates?
Main conversion goal: sign up, book a demo, start free trial, explore features, purchase

Ask internally: What is the website trying to communicate? What is the user's main action?

在编写任何代码前，先深入理解你要构建的产品及其受众。

分析用户需求，提取以下信息：

产品类型：SaaS工具、着陆页、仪表盘、交易平台、作品集网站、AI产品、移动端优先Web应用、管理后台
目标受众：开发者、企业团队、普通消费者、创作者、学生、企业高管
核心价值主张：该产品最核心的卖点是什么？
主要转化目标：注册、预约演示、开始免费试用、探索功能、购买

在内心自问：这个网站想要传达什么？用户的核心操作是什么？

Niche-Aware Design Adaptation

细分场景适配设计

Each niche has conventions that users expect. Violating them feels jarring; following them builds instant trust.

Niche	Design Direction
AI / ML tools	Dark themes, glowing accents, futuristic gradients, clean data viz
Developer tools	Monospace accents, high-contrast, code-block styling, minimal chrome
Fintech	Trust-heavy, clean whites/blues, data-dense but organized, professional typography
Social platforms	Vibrant colors, rounded shapes, avatar-centric, card-based feeds
Cybersecurity	Dark UI, terminal aesthetics, status indicators, alert-driven layouts
Creative agencies	Bold typography, warm tones, media-rich, gallery layouts, personality-forward
SaaS dashboards	Sidebar navigation, metric cards, tables, clean neutral palettes
E-commerce	Product grid focus, prominent CTAs, trust badges, review integration
Health / Wellness	Soft colors, generous whitespace, calming gradients, accessible fonts
Education	Structured layouts, progress indicators, readable typography, friendly colors
Startups / Landing pages	Hero-driven, social proof, feature grids, pricing, strong CTAs
Consulting / B2B	Authority-driven, dark premium backgrounds, numbered value props, client logos

Blend conventions when the product crosses niches.

每个细分场景都有用户预期的设计惯例。违背惯例会让用户感到违和；遵循惯例则能快速建立信任。

细分场景	设计方向
AI/ML工具	深色主题、发光强调色、未来感渐变、简洁数据可视化
开发者工具	等宽字体点缀、高对比度、代码块样式、极简界面框架
金融科技	重信任感、纯净白/蓝色调、数据密集但布局规整、专业字体
社交平台	鲜艳色彩、圆角设计、以头像为核心、卡片式信息流
网络安全工具	深色UI、终端风格、状态指示器、告警驱动型布局
创意代理机构	醒目字体、暖色调、富媒体内容、画廊式布局、个性鲜明
SaaS仪表盘	侧边栏导航、指标卡片、表格、简洁中性配色
电商平台	聚焦产品网格、突出CTA按钮、信任标识、评价集成
健康/养生	柔和色彩、充足留白、舒缓渐变、易读字体
教育类	结构化布局、进度指示器、易读字体、友好配色
创业公司/着陆页	首屏主导、社交证明、功能网格、定价展示、醒目的CTA
咨询/B2B	权威感驱动、深色高端背景、分点价值主张、客户logo展示

若产品跨多个细分场景，可融合不同惯例。

Step 2 — Visual Inspiration Research

步骤2——视觉灵感调研

Before designing, study modern web design patterns mentally. Reference inspiration from:

Awwwards, Dribbble, Behance, Pinterest (for layout and visual patterns)
Best-in-class products: Vercel, Linear, Raycast, Stripe, Notion, Arc Browser
Modern AI product pages: dark gradients, planet/globe visuals, glowing highlights

Analyze these key elements from premium reference designs:

Hero layouts: large bold typography with gradient or italic accent words, floating badges/labels, prominent CTA buttons with glow effects
Typography hierarchy: display-size headlines that demand attention, smaller muted subheadlines, mixed font weights (regular + italic, light + bold)
Color palettes: deep dark backgrounds (navy #0a0a1a, near-black #050510), blue/purple accent systems, warm copper/gold alternatives for agencies
Gradient and glow effects: subtle radial glows behind heroes, gradient text, soft light bleeds on background
Card design: glassmorphism (backdrop-blur + translucent borders), dark cards with subtle 1px borders, numbered feature cards
Spacing: generous padding between sections (96–128px), intentional breathing room between elements
Social proof: logo bars with grayscale client logos, avatar stacks, "Trusted by X+ teams" badges
Section flow: hero → why/about → features/services → how it works → pricing → CTA → footer

设计前，先在脑中梳理现代Web设计模式。可从以下渠道获取灵感：

Awwwards、Dribbble、Behance、Pinterest（用于布局与视觉模式参考）
标杆产品：Vercel、Linear、Raycast、Stripe、Notion、Arc Browser
现代AI产品页面：深色渐变、星球/地球视觉元素、发光高亮效果

从高端参考设计中分析以下关键元素：

首屏布局：大尺寸醒目字体搭配渐变或斜体强调词、悬浮徽章/标签、带发光效果的突出CTA按钮
字体层级：引人注目的大尺寸标题、较小的弱化副标题、混合字体粗细（常规+斜体、轻量+加粗）
配色方案：深邃深色背景（藏青#0a0a1a、近黑色#050510）、蓝/紫强调色系统、适合代理机构的暖铜/金替代色
渐变与发光效果：首屏背景后的微妙径向发光、渐变文字、背景上的柔光溢出
卡片设计：玻璃态效果（背景模糊+半透明边框）、带细微1px边框的深色卡片、编号功能卡片
间距：各板块间充足的内边距（96–128px）、元素间刻意预留的呼吸空间
社交证明：灰度客户logo栏、头像堆叠、“获X+团队信赖”徽章
板块流程：首屏 → 产品优势/介绍 → 功能/服务 → 运作方式 → 定价 → CTA → 页脚

Premium Design Qualities to Emulate

需效仿的高端设计特质

These qualities appear consistently across high-end modern interfaces:

Dark futuristic gradient backgrounds — deep navy to near-black with subtle radial color bleeds
Glowing highlight effects — soft, refined accent glows on key elements (not garish neon)
Minimal premium layouts — fewer elements, more impact, strong visual focus
Bold hero typography — 48–72px display text with mixed weights and italic accents
Glassmorphism cards —
```
backdrop-filter: blur(12px)
```
, rgba backgrounds, subtle light borders
Smooth visual flow — clear reading path from top to bottom through every section
Floating UI elements — decorative badges, labels, dots, subtle grid patterns for depth
Earth/globe/planet visuals — popular in AI/SaaS heroes for a sense of scale and innovation

Use these only as inspiration — adapt them to the product's personality, never copy templates directly.

这些特质在高端现代界面中随处可见：

深色未来感渐变背景——从深海军蓝过渡到近黑色，带有微妙的径向色彩溢出
柔和高亮效果——关键元素上的柔和精致发光（而非刺眼的霓虹效果）
极简高端布局——元素更少、冲击力更强、视觉焦点清晰
醒目首屏字体——48–72px的展示型文字，混合字体粗细与斜体强调
玻璃态卡片——
```
backdrop-filter: blur(12px)
```
、rgba背景、细微浅色边框
流畅视觉动线——从顶部到底部的清晰阅读路径贯穿每个板块
悬浮UI元素——装饰性徽章、标签、圆点、微妙网格图案以增加层次感
地球/星球视觉元素——AI/SaaS首屏中常用，营造规模感与创新感

仅将这些作为灵感——根据产品个性调整，切勿直接复制模板。

2025–2026 Design Trends to Incorporate

需融入的2025–2026设计趋势

Bento grid layouts — asymmetric grids where cards have different sizes and visual weights, creating editorial-feeling compositions (see: Apple, Linear, Vercel)
Animated gradient meshes — smooth organic color transitions as backgrounds, replacing flat solid colors
Scroll-driven storytelling — sections that transform, parallax, or reveal content based on scroll position rather than static page loads
Mono-accent palettes — one strong accent color used surgically, everything else in neutrals — produces a striking, confident look
Oversized typography heroes — headline text at 80–120px with tight line-height and negative letter-spacing, creating immediate visual authority
Subtle grain/noise textures — slight grain overlay on backgrounds adds warmth and tactile quality to flat digital surfaces
Interactive cursor effects — custom cursors, hover spotlights, magnetic buttons that add a layer of delight
Dark mode by default — most premium SaaS/AI products now default to dark themes with carefully managed contrast

便当盒网格布局——非对称网格，卡片尺寸与视觉权重不同，营造杂志排版感（参考：Apple、Linear、Vercel）
动态渐变网格——平滑自然的色彩过渡背景，替代纯色背景
滚动驱动叙事——板块随滚动位置变换、视差滚动或逐步展示内容，而非静态加载
单强调色方案——仅使用一种醒目的强调色，其余为中性色——打造醒目、自信的视觉效果
超大字体首屏——80–120px的标题文字，搭配紧凑行高与负字间距，立即建立视觉权威感
细微颗粒/噪点纹理——背景上的轻微颗粒叠加，为扁平化数字界面增添温暖触感
交互式光标效果——自定义光标、悬停聚光灯、磁吸按钮，增添愉悦体验
默认深色模式——大多数高端SaaS/AI产品现在默认采用深色主题，并精心管理对比度

Step 3 — Visual System Planning

步骤3——视觉系统规划

Define the complete visual identity before building. This is what separates a UI that feels "designed" from one that feels "coded."

在开始构建前定义完整的视觉标识。这是“经过设计的UI”与“仅编写代码的UI”的核心区别。

Typography

字体设计

Pick 2 fonts maximum (1 for headings, 1 for body). Define sizes for display, h1–h4, body, small, caption. Use

clamp()

for fluid sizing.

Strong modern pairings:

Inter + Inter — clean, neutral, Swiss-style (most versatile)
Cal Sans + Inter — modern SaaS product feel
Space Grotesk + DM Sans — tech / developer tools
Playfair Display + Source Sans 3 — editorial, luxury, agencies
Clash Display + Satoshi — bold, creative, startup energy

最多选择2种字体（1种用于标题，1种用于正文）。定义展示型、h1–h4、正文、小号文字、说明文字的尺寸。使用

clamp()

实现流体字体大小。

优秀的现代字体搭配：

Inter + Inter——简洁、中性、瑞士风格（最通用）
Cal Sans + Inter——现代SaaS产品质感
Space Grotesk + DM Sans——科技/开发者工具风格
Playfair Display + Source Sans 3——杂志风、高端、适合代理机构
Clash Display + Satoshi——醒目、有创意、充满创业活力

Color Palette

配色方案

Construct a complete palette — not random colors:

Primary: main brand color (used sparingly for CTAs and accents only)
Primary gradient: pair of colors for gradient effects (e.g., blue-500 → purple-500)
Neutral scale: 50 through 950 for backgrounds, borders, and text
Semantic colors: success (green), warning (amber), error (red), info (blue)

Dark theme rules (for AI, SaaS, cybersecurity niches):

Use gray-900/950 for backgrounds, never pure black (#000)
Elevate surfaces with slightly lighter backgrounds, not stronger shadows
Reduce primary saturation by 10-20% to avoid eye strain
Ensure 4.5:1 contrast for body text, 3:1 for large text

构建完整的配色体系——而非随机选色：

主色：品牌主色调（仅少量用于CTA按钮与强调元素）
主渐变：用于渐变效果的一对颜色（例如：blue-500 → purple-500）
中性色阶：从50到950，用于背景、边框与文字
语义色：成功（绿色）、警告（琥珀色）、错误（红色）、信息（蓝色）

深色主题规则（适用于AI、SaaS、网络安全场景）：

使用gray-900/950作为背景，切勿使用纯黑色(#000)
通过略浅的背景提升层级，而非更重的阴影
将主色饱和度降低10-20%，避免视觉疲劳
确保正文字符对比度达到4.5:1，大文字对比度达到3:1

Spacing, Radius, and Shadows

间距、圆角与阴影

Spacing scale (4px base): 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128
Border radius: sharp (2–4px) for fintech/enterprise, soft (8–12px) for SaaS, rounded (16–24px) for consumer — stay consistent throughout
Shadows: 3 levels (cards, dropdowns, modals), tinted toward primary hue for a premium feel

For complete reference tables, font scales, CSS recipes, and detailed examples, see

references/design-systems.md

间距基准（4px为基础）：4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128
圆角：金融科技/企业场景用锐利圆角（2–4px），SaaS场景用柔和圆角（8–12px），消费级产品用圆润圆角（16–24px）——全程保持一致
阴影：3个层级（卡片、下拉菜单、模态框），阴影色调向主色靠拢，营造高端质感

如需完整参考表格、字体比例、CSS示例与详细说明，请查看

references/design-systems.md

。

Step 4 — Layout Architecture

步骤4——布局架构

Design the page structure before coding. Every section should guide the user toward the conversion goal.

在编码前设计页面结构。每个板块都应引导用户完成转化目标。

Landing Page Architecture

着陆页架构

Navigation (logo + links + primary CTA button)
↓
Hero (display headline + subheadline + CTA buttons + visual/demo/globe)
↓
Social Proof (logo bar, stats, or "Trusted by X+ teams")
↓
Why / About (value proposition statement — 2-3 crisp sentences)
↓
Features or Services (grid of cards, alternating sections, or numbered cards)
↓
How It Works (numbered steps with icons or visuals)
↓
Product Demo / Screenshots / Interactive Preview
↓
Testimonials or Case Studies
↓
Pricing (2-3 tier glassmorphism cards with highlighted recommended plan)
↓
Final CTA (strong headline + prominent button)
↓
Footer (links, social icons, copyright)

导航栏（logo + 链接 + 主CTA按钮）
↓
首屏（展示型标题 + 副标题 + CTA按钮 + 视觉/演示/地球元素）
↓
社交证明（logo栏、数据统计或“获X+团队信赖”标识）
↓
产品优势/介绍（核心价值主张——2-3句简洁表述）
↓
功能或服务（卡片网格、交替板块或编号卡片）
↓
运作方式（带图标或视觉元素的编号步骤）
↓
产品演示/截图/交互式预览
↓
客户评价或案例研究
↓
定价（2-3个玻璃态卡片，突出推荐方案）
↓
最终CTA（醒目标题 + 突出按钮）
↓
页脚（链接、社交图标、版权信息）

Dashboard Architecture

仪表盘架构

Top Nav (search bar, notifications bell, user avatar dropdown)
├── Sidebar (icon + label navigation, section grouping, collapsible)
└── Main Content Area
    ├── Summary Cards (key metrics with sparklines or trend arrows)
    ├── Primary Data View (charts, tables, or data feeds)
    └── Secondary Panels (filters, activity logs, detail views)

Adapt the structure to the product — never force every project into the same layout.

顶部导航栏（搜索框、通知铃铛、用户头像下拉菜单）
├── 侧边栏（图标+标签导航、板块分组、可折叠）
└── 主内容区
    ├── 汇总卡片（带迷你折线图或趋势箭头的关键指标）
    ├── 主要数据视图（图表、表格或数据信息流）
    └── 次要面板（筛选器、活动日志、详情视图）

根据产品调整结构——切勿将所有项目强行套入同一布局。

Step 5 — UI Component System

步骤5——UI组件系统

Build modular, reusable components. Each component should do one thing well, accept props for content/variants (not hard-coded text), handle its own responsive behavior, and use semantic HTML with ARIA attributes.

构建模块化、可复用的组件。每个组件应专注实现单一功能，通过props接收内容/变体（而非硬编码文本），自行处理响应式行为，并使用带ARIA属性的语义化HTML。

Component Organization

组件组织结构

components/
├── layout/       → Navbar, Footer, Sidebar, Container
├── ui/           → Button, Card, GlassCard, Badge, Input, Modal, Toggle
├── sections/     → Hero, Features, Pricing, Testimonials, CTA, HowItWorks
└── data/         → DataTable, MetricCard, Chart, StatCard

components/
├── layout/       → Navbar, Footer, Sidebar, Container
├── ui/           → Button, Card, GlassCard, Badge, Input, Modal, Toggle
├── sections/     → Hero, Features, Pricing, Testimonials, CTA, HowItWorks
└── data/         → DataTable, MetricCard, Chart, StatCard

Component Quality Standards

组件质量标准

Consistent spacing, typography, color usage, and alignment across every component
Variant-driven props:
```
<Button variant="primary" size="lg">
```
— not separate component files per variant

Glassmorphism card recipe:

backdrop-filter: blur(12px)

background: rgba(255,255,255,0.05)

border: 1px solid rgba(255,255,255,0.1)

Interactive elements: visible hover/focus states, smooth 200ms transitions, proper cursor styles

所有组件的间距、字体、颜色使用与对齐保持一致
基于变体的props：
```
<Button variant="primary" size="lg">
```
—— 不为每个变体创建单独的组件文件

玻璃态卡片实现方案：

backdrop-filter: blur(12px)

、

background: rgba(255,255,255,0.05)

、

border: 1px solid rgba(255,255,255,0.1)

交互元素：可见的悬停/聚焦状态、200ms平滑过渡、合适的光标样式

Step 6 — Modern Interaction Design

步骤6——现代交互设计

Add subtle motion and interaction. Animations make the UI feel alive and premium — they must be smooth and purposeful, never excessive.

添加微妙的动效与交互。动画让UI更生动、更有质感——但必须流畅且有目的性，切勿过度。

Essential Interactions

核心交互效果

Hover effects: scale transforms (1.02–1.05), color shifts, glow intensification on cards and buttons
Smooth transitions: 150–300ms ease-out on all state changes (color, shadow, transform)
Micro-animations: button press feedback, icon rotations, progress indicators, toggle switches
Scroll reveals: elements fading/sliding in as they enter the viewport (translate 20–30px + opacity 0→1, 400–600ms)
Staggered reveals: children in grids/lists animate with 50–100ms stagger delay

悬停效果：缩放变换（1.02–1.05）、颜色变化、卡片与按钮的发光效果增强
平滑过渡：所有状态变化（颜色、阴影、变换）使用150–300ms的ease-out过渡
微动画：按钮按压反馈、图标旋转、进度指示器、切换开关
滚动渐显：元素进入视口时淡入/滑入（translate 20–30px + opacity 0→1，400–600ms）
** staggered渐显**：网格/列表中的子元素以50–100ms的延迟依次动画

Animation Libraries

动画库

Library	Best For
Framer Motion	React projects — declarative, performant, page transitions
GSAP	Complex timelines, scroll-triggered sequences, SVG animation
CSS transitions	Simple hovers and state changes (no library needed)
Intersection Observer	Scroll-triggered class toggling with vanilla JS

库	最佳适用场景
Framer Motion	React项目——声明式、高性能、页面过渡
GSAP	复杂时间线、滚动触发序列、SVG动画
CSS transitions	简单悬停与状态变化（无需库）
Intersection Observer	使用原生JS实现滚动触发的类切换

Animation Rules

动画规则

Use
```
transform
```
and
```
opacity
```
for GPU-accelerated performance
Respect
```
prefers-reduced-motion
```
— accessibility is non-negotiable
Entrance animations should feel natural: slight upward slide + fade, not dramatic fly-ins
Interactive feedback should be instant (< 100ms) — delays feel broken

使用
```
transform
```
与
```
opacity
```
实现GPU加速，提升性能
尊重
```
prefers-reduced-motion
```
——无障碍设计是硬性要求
入场动画应自然：轻微向上滑动+淡入，而非夸张的飞入效果
交互反馈应即时（<100ms）——延迟会让用户觉得产品有问题

Step 7 — Technology Stack

步骤7——技术栈

Prefer modern technologies that enable rapid, high-quality development:

Layer	Recommended	Why
Framework	React / Next.js	Component model, ecosystem, SSR/RSC support
Styling	Tailwind CSS	Rapid iteration, design-system-friendly, responsive utilities
Components	shadcn/ui + Radix UI	Accessible, unstyled primitives you can theme to any design
Animation	Framer Motion	Declarative, performant, micro-interactions and page transitions
Language	TypeScript	Type safety, better DX, self-documenting interfaces
Icons	Lucide React	Clean, consistent, extensive icon set that matches modern UIs

If the user specifies a different stack (Vue, Svelte, plain HTML/CSS/JS), respect that choice — the design principles are tool-agnostic. For simpler projects (single page, portfolio), plain HTML + CSS + vanilla JS is valid. Don't over-engineer.

优先选择支持快速高质量开发的现代技术：

层级	推荐技术	原因
框架	React / Next.js	组件模型、生态系统、SSR/RSC支持
样式	Tailwind CSS	快速迭代、适配设计系统、响应式工具类
组件	shadcn/ui + Radix UI	无障碍、无样式基础组件，可自定义主题适配任何设计
动画	Framer Motion	声明式、高性能、微交互与页面过渡
语言	TypeScript	类型安全、更好的开发体验、自文档化接口
图标	Lucide React	简洁、一致、丰富的图标集，匹配现代UI

若用户指定其他技术栈（Vue、Svelte、纯HTML/CSS/JS），请尊重用户选择——设计原则与工具无关。对于简单项目（单页、作品集），纯HTML + CSS + 原生JS完全可行。切勿过度设计。

Project Structure

项目结构

/app or /pages   → routes and page components
/components      → reusable UI components (layout/, ui/, sections/, data/)
/styles          → global styles, theme configuration, CSS variables
/utils           → helpers, constants, type definitions
/public          → static assets (images, fonts, icons)

/app or /pages   → 路由与页面组件
/components      → 可复用UI组件（layout/, ui/, sections/, data/）
/styles          → 全局样式、主题配置、CSS变量
/utils           → 工具函数、常量、类型定义
/public          → 静态资源（图片、字体、图标）

Step 8 — Backend Awareness

步骤8——后端意识

Design the frontend with real data integration in mind — not static mock layouts that break when connected to APIs.

Loading states: skeleton loaders (pulsing placeholder shapes), never bare spinners
Error states: meaningful error messages with retry actions — never blank screens
Empty states: friendly messages with CTAs ("No projects yet — create your first one")
Form validation: inline error messages on blur/submit with clear visual indicators
Authentication: login/signup flows, user menus, protected route handling
Dynamic content: every component accepts data via props/API — no hard-coded strings
Optimistic UI: update the interface immediately on action, roll back gracefully on failure

Use realistic placeholder data during development — real-sounding names, plausible numbers, proper-length text. "Lorem ipsum" and "Test 123" make it impossible to judge the real design quality.

设计前端时要考虑真实数据集成——而非仅构建连接API就会失效的静态模拟布局。

加载状态：骨架屏加载器（脉动占位形状），切勿使用简单的加载动画
错误状态：有意义的错误信息与重试操作——切勿显示空白页面
空状态：友好提示与CTA按钮（“暂无项目——创建你的第一个项目”）
表单验证：失焦/提交时的内联错误提示，搭配清晰的视觉标识
身份验证：登录/注册流程、用户菜单、受保护路由处理
动态内容：每个组件通过props/API接收数据——无硬编码字符串
乐观UI：操作后立即更新界面，失败时优雅回滚

开发期间使用真实的占位数据——真实的名称、合理的数字、合适长度的文本。“Lorem ipsum”与“Test 123”会让你无法判断设计的真实质量。

Step 9 — Responsive System

步骤9——响应式系统

Every interface must work perfectly on desktop, tablet, and mobile. This is a core requirement, never an afterthought.

每个界面必须在桌面、平板与移动设备上完美运行。这是核心要求，而非事后补充。

Breakpoints (Tailwind defaults)

断点（Tailwind默认值）

Token	Width	Target
`sm`	640px	Large phones (landscape)
`md`	768px	Tablets
`lg`	1024px	Small laptops
`xl`	1280px	Desktops
`2xl`	1536px	Large displays

标识	宽度	目标设备
`sm`	640px	大屏手机（横屏）
`md`	768px	平板
`lg`	1024px	小型笔记本
`xl`	1280px	桌面
`2xl`	1536px	大屏显示器

Responsive Patterns

响应式模式

Grid columns: 4 → 2 → 1 as viewport shrinks
Navigation: full menu → hamburger/drawer below 768px
Typography: display text scales from 72px → 48px → 32px using
```
clamp()
```
Side-by-side layouts: stack vertically on mobile
Touch targets: minimum 44×44px on mobile devices
Section padding: 128px → 80px → 48px (desktop → tablet → mobile)
Card layouts: horizontal cards → vertical stacked cards
Max content width: 1200–1440px with 16px (mobile) → 32px (desktop) side padding

Design mobile-first when sensible. Test the mental model at 375px, 768px, and 1440px.

网格列数：视口缩小时从4列→2列→1列
导航：完整菜单→768px以下使用汉堡菜单/抽屉式导航
字体：使用
```
clamp()
```
让展示型文字从72px→48px→32px缩放
并排布局：在移动设备上垂直堆叠
触摸目标：移动设备上最小44×44px
板块内边距：128px→80px→48px（桌面→平板→移动设备）
卡片布局：横向卡片→垂直堆叠卡片
最大内容宽度：1200–1440px，侧边内边距：移动端16px→桌面端32px

合理情况下优先采用移动端优先设计。在375px、768px与1440px尺寸下验证设计逻辑。

Step 10 — Visual Quality Validation

步骤10——视觉质量验证

Step 11 — Final Automated Testing & Error Resolution (MANDATORY)

步骤11——最终自动化测试与错误修复（强制要求）

This step is non-negotiable. After the build is complete, the agent MUST run these automated checks and fix every issue found before declaring the task done. Do NOT skip this step. Do NOT hand back to the user with unresolved errors.

此步骤不可跳过。构建完成后，AI代理必须运行以下自动化检查，修复所有发现的问题后才能宣告任务完成。请勿跳过此步骤。请勿将存在未解决错误的代码交付给用户。

11.1 — Build Verification

11.1——构建验证

Run the production build and capture all errors:

bash

undefined

运行生产构建并捕获所有错误：

bash

undefined

Install dependencies (catch missing packages)

安装依赖（捕获缺失的包）

npm install

Run TypeScript compiler — catch ALL type errors

运行TypeScript编译器——捕获所有类型错误

npx tsc --noEmit

Run the production build — catch build-time errors

运行生产构建——捕获构建时错误

npm run build


**If any command fails:**
1. Read the full error output
2. Fix every error in the source code
3. Re-run the failing command
4. Repeat until zero errors

npm run build


**若任何命令失败：**
1. 完整阅读错误输出
2. 修复源代码中的所有错误
3. 重新运行失败的命令
4. 重复直到无错误

11.2 — Lint & Code Quality

11.2——代码检查与质量

bash

undefined

bash

undefined

Run ESLint — catch code quality issues

运行ESLint——捕获代码质量问题

npx next lint

Check for unused imports and variables

检查未使用的导入与变量

npx tsc --noEmit --noUnusedLocals --noUnusedParameters 2>&1 || true


Fix all lint errors. Warnings should be reviewed — fix if they indicate real problems.

npx tsc --noEmit --noUnusedLocals --noUnusedParameters 2>&1 || true


修复所有代码检查错误。警告应逐一审核——若指示存在实际问题则修复。

11.3 — Runtime Smoke Test

11.3——运行时冒烟测试

bash

undefined

bash

undefined

Start the dev server and verify it boots without crashing

启动开发服务器，验证是否能正常启动

npm run dev & sleep 5

Check if the server is responding

检查服务器是否响应

curl -s -o /dev/null -w "%{http_code}" http://localhost:3000

Must return 200

必须返回200

Kill the dev server

关闭开发服务器

kill %1 2>/dev/null || true


If the server crashes on boot, read the terminal output, fix the error, and retry.

kill %1 2>/dev/null || true


若服务器启动时崩溃，阅读终端输出，修复错误后重试。

11.4 — Component-Level Error Scan

11.4——组件级错误扫描

Check every component file for common issues:

Check	What to Look For	Fix
Import errors	Importing from non-existent files or packages	Add missing dependencies or fix import paths
Type mismatches	Props passed incorrectly between components	Align prop types with usage
Missing keys	`.map()` without `key` prop	Add unique `key` to mapped elements
Hydration mismatches	`window` / `document` used at top level in SSR	Wrap in `useEffect` or dynamic import with `ssr: false`
Event handler types	`onClick` handlers with wrong TypeScript types	Use `React.MouseEvent<HTMLElement>`
Image optimization	`<img>` tags instead of `next/image`	Replace with `<Image>` component
Missing alt text	Images without `alt` attributes	Add descriptive alt text
Broken links	Anchor tags pointing to non-existent routes	Fix `href` values or create missing pages

检查每个组件文件的常见问题：

检查项	检查内容	修复方案
导入错误	导入不存在的文件或包	添加缺失的依赖或修复导入路径
类型不匹配	组件间传递的props类型错误	对齐props类型与使用方式
缺少key	`.map()` 未使用 `key` prop	为映射元素添加唯一 `key`
hydration不匹配	SSR中在顶层使用 `window` / `document`	用 `useEffect` 包裹，或使用 `ssr: false` 动态导入
事件处理函数类型	`onClick` 处理函数的TypeScript类型错误	使用 `React.MouseEvent<HTMLElement>`
图片优化	使用 `<img>` 标签而非 `next/image`	替换为 `<Image>` 组件
缺少alt文本	图片无 `alt` 属性	添加描述性alt文本
链接失效	锚点指向不存在的路由	修复 `href` 值或创建缺失的页面

11.5 — Cross-Page Navigation Test

11.5——跨页面导航测试

If the site has multiple pages/routes:

bash

undefined

若网站有多个页面/路由：

bash

undefined

Check all routes return 200

检查所有路由返回200

for route in "/" "/about" "/pricing" "/contact"; do status=$(curl -s -o /dev/null -w "%{http_code}" "http://localhost:3000$route") echo "$route -> $status" done

undefined

for route in "/" "/about" "/pricing" "/contact"; do status=$(curl -s -o /dev/null -w "%{http_code}" "http://localhost:3000$route") echo "$route -> $status" done

undefined

11.6 — Responsive & Accessibility Quick Check

11.6——响应式与无障碍快速检查

Check	Method	Fix
Mobile layout	Verify no horizontal scrollbar at 375px	Fix overflow, use `overflow-x-hidden` on wrapper
Touch targets	All buttons/links ≥ 44×44px on mobile	Increase padding or min-height/width
Focus states	Tab through all interactive elements	Add `focus:ring` or `focus-visible` styles
Color contrast	Run `npx axe` or Lighthouse accessibility audit	Adjust text/background color pairs
Heading order	h1 → h2 → h3, no skipped levels	Fix heading hierarchy

检查项	方法	修复方案
移动端布局	验证375px宽度下无水平滚动条	修复溢出问题，在容器上使用 `overflow-x-hidden`
触摸目标	移动端所有按钮/链接≥44×44px	增加内边距或最小高度/宽度
聚焦状态	按Tab键遍历所有交互元素	添加 `focus:ring` 或 `focus-visible` 样式
颜色对比度	运行 `npx axe` 或Lighthouse无障碍审计	调整文本/背景颜色组合
标题层级	h1 → h2 → h3，无层级跳跃	修复标题层级

11.7 — Final Error Resolution Loop

11.7——最终错误修复循环

WHILE errors exist:
  1. Run: npm run build
  2. IF build fails → read error → fix → GOTO 1
  3. Run: npx next lint
  4. IF lint fails → read error → fix → GOTO 1
  5. Run: npm run dev (verify server boots)
  6. IF server crashes → read error → fix → GOTO 1
  7. All clear → EXIT loop

The agent MUST NOT declare the task complete until:

```
npm run build
```
exits with code 0
```
npx next lint
```
passes (no errors)
```
npm run dev
```
boots without crashing
No TypeScript errors (
```
npx tsc --noEmit
```
passes)
All pages render without console errors
No hydration mismatch warnings
Mobile layout has no overflow issues

Rule: If you generated the code, you own the errors. Fix them before finishing.

当存在错误时：
  1. 运行：npm run build
  2. 若构建失败 → 读取错误 → 修复 → 回到步骤1
  3. 运行：npx next lint
  4. 若代码检查失败 → 读取错误 → 修复 → 回到步骤1
  5. 运行：npm run dev（验证服务器能启动）
  6. 若服务器崩溃 → 读取错误 → 修复 → 回到步骤1
  7. 所有检查通过 → 退出循环

AI代理必须满足以下所有条件才能宣告任务完成：

```
npm run build
```
以代码0退出
```
npx next lint
```
通过（无错误）
```
npm run dev
```
能正常启动服务器
无TypeScript错误（
```
npx tsc --noEmit
```
通过）
所有页面渲染无控制台错误
无hydration不匹配警告
移动端布局无溢出问题

规则：如果你生成了代码，就要对错误负责。交付前务必修复所有错误。

Final Output Requirements

最终输出要求

Deliver:

Modern premium UI with visual polish and attention to detail — the kind of site that makes people say "this looks expensive"
Modular component architecture — reusable, prop-driven, well-typed
Clean project structure — /components, /sections, /styles, /utils
Fully responsive design — beautiful on mobile, tablet, and desktop
Production-ready code — TypeScript, proper types, clean patterns
Visually impressive layout that clearly communicates the product's value
Realistic content — believable copy, realistic data, proper-length text (never lorem ipsum)
Smooth interactions — hover effects, scroll reveals, micro-animations that feel alive

Include a brief summary of design decisions: color palette rationale, typography choices, layout strategy, and where to customize.

交付内容应包括：

现代高端UI——视觉精致、注重细节，让用户觉得“这个网站看起来很专业、很昂贵”
模块化组件架构——可复用、基于props驱动、类型完善
清晰的项目结构——/components、/sections、/styles、/utils
完全响应式设计——在移动端、平板与桌面端都美观
生产就绪代码——TypeScript、正确的类型、清晰的模式
视觉冲击力强的布局——清晰传达产品价值
真实内容——可信的文案、真实的数据、合适长度的文本（切勿使用lorem ipsum）
流畅交互——悬停效果、滚动渐显、微动画，让界面充满活力

附带简短的设计决策说明：配色方案依据、字体选择理由、布局策略及自定义入口。

Cross-Agent Compatibility

跨AI代理兼容性

This skill works with any AI coding agent that supports Markdown-based skill files:

Agent	Installation
Claude Code	`npx skills add deveshpunjabi/modern-frontend-skill`
Cursor	Copy to `.cursor/skills/`
Windsurf	Copy to `.windsurf/skills/`
Cline	Copy to `.cline/skills/`
Codex	Copy to `.codex/skills/`
Aider	Reference in `.aider.conf`
Any agent	Copy SKILL.md to the agent's skill/instruction directory

The skill is a standalone Markdown file with optional reference documents — no runtime dependencies, no API keys, no build steps.

此技能适用于任何支持Markdown格式技能文件的AI编码代理：

AI代理	安装方式
Claude Code	`npx skills add deveshpunjabi/modern-frontend-skill`
Cursor	复制到 `.cursor/skills/`
Windsurf	复制到 `.windsurf/skills/`
Cline	复制到 `.cline/skills/`
Codex	复制到 `.codex/skills/`
Aider	在 `.aider.conf` 中引用
任何AI代理	将SKILL.md复制到AI代理的技能/指令目录

该技能是独立的Markdown文件，附带可选参考文档——无运行时依赖、无需API密钥、无需构建步骤。

Anti-Patterns — What to Avoid

反模式——需避免的做法

These are the hallmarks of AI-generated UIs that look "off." Understanding why they fail helps you avoid them:

Anti-Pattern	What Goes Wrong	Fix
Rainbow soup	Too many unrelated colors	Stick to your palette — primary, neutral, 1-2 accents max
Wall of cards	Identical cards in grid, no visual hierarchy	Vary sizes, highlight featured items, use visual weight
Giant hero, empty page	Massive hero, thin underwhelming content below	Maintain proportional section weight throughout the page
Button overload	Multiple CTAs competing for attention	One primary + one secondary CTA per section maximum
Fake depth	Shadows and gradients on everything	Use depth purposefully to create clear visual hierarchy
Stock photo blanket	Generic photos unrelated to the product	Use illustrations, product screenshots, or abstract visuals
Inconsistent radius	Mixing sharp + fully rounded randomly	Pick one radius language and commit to it throughout
Bootstrap syndrome	Default template look with swapped colors	Design from scratch using the visual system you defined
Typography neglect	Same size/weight for all text elements	Build clear hierarchy: display, heading, subhead, body, caption
Spacing chaos	Random margins and padding, no system	Every value from the spacing scale — no arbitrary numbers
The gray wasteland	Everything is gray text on gray background	Use contrast deliberately — important content gets high contrast
Lorem ipsum laziness	Placeholder text that makes design unjudgeable	Write realistic copy that matches the product's voice and length
Navbar graveyard	Navigation with 8+ links crammed in one row	Group into sections, add dropdowns, max 5-6 primary nav items
The flat page	No visual rhythm — sections blend into each other	Alternate backgrounds, use dividers, vary section layouts

这些是AI生成UI显得“违和”的典型特征。理解其失败原因有助于你避免重蹈覆辙：

反模式	问题所在	修复方案
彩虹乱炖	使用过多无关颜色	严格遵循你的配色方案——主色、中性色、最多1-2个强调色
卡片墙	网格中全是相同的卡片，无视觉层级	改变卡片尺寸、突出特色项、使用视觉权重区分
超大首屏，内容空洞	首屏巨大，下方内容单薄无力	保持各板块权重比例均衡
按钮过载	多个CTA按钮争夺用户注意力	每个板块最多保留一个主CTA + 一个次要CTA
虚假层次感	所有元素都加阴影与渐变	有目的性地使用层次感，构建清晰的视觉层级
库存照片堆砌	使用与产品无关的通用照片	使用插画、产品截图或抽象视觉元素
圆角不一致	随机混合锐利与全圆角	选择一种圆角风格并全程保持一致
Bootstrap综合症	仅替换颜色的默认模板风格	基于你定义的视觉系统从头设计
字体层级缺失	所有文本使用相同大小/粗细	构建清晰的层级：展示型、标题、副标题、正文、说明文字
间距混乱	随机的边距与内边距，无统一体系	所有间距值均来自定义的间距体系——无任意数值
灰色荒原	所有内容都是灰色文字配灰色背景	有目的性地使用对比度——重要内容使用高对比度
Lorem ipsum懒惰症	使用占位文本，无法判断设计质量	撰写符合产品风格与长度的真实文案
导航栏墓地	导航栏中挤了8个以上的链接	将链接分组、添加下拉菜单、主导航最多保留5-6个项
扁平页面	无视觉节奏——所有板块混为一谈	交替背景、使用分隔线、改变板块布局

The "Premium or Redo" Test

“高端或重做”测试法

After building, view the full page and honestly evaluate:

Screenshot test — Take a screenshot and put it next to Linear.app, Vercel.com, or Stripe.com. Does yours look like it belongs in the same category?
Squint test — Squint at the page. Can you see clear visual hierarchy? Are the important elements dominant?
3-second test — Show it to someone for 3 seconds. Can they tell what the product does and where to click?

If the answer to any of these is "no" — the design needs work before delivery.

构建完成后，查看完整页面并诚实评估：

截图对比测试——截图后与Linear.app、Vercel.com或Stripe.com放在一起对比。你的设计看起来和它们是同一水准吗？
眯眼测试——眯起眼睛看页面。你能看到清晰的视觉层级吗？重要元素是否突出？
3秒测试——给别人看3秒页面。他们能说出产品的功能与点击位置吗？

若任何一个问题的答案是“否”——交付前需重新设计。