frontend-design-ultimate

前端设计终极指南

仅凭文字需求，打造独具特色、达到生产级标准的静态网站。无需模型稿，也无需 Figma——只要描述你的想法，就能获得大胆、令人难忘的设计。

技术栈：React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
输出：Vite（静态 HTML）或 Next.js（可部署到 Vercel）

快速开始

"Build a SaaS landing page for an AI writing tool. Dark theme, 
editorial typography, subtle grain texture. Pages: hero with 
animated demo, features grid, pricing table, FAQ accordion, footer."

---

设计思路（首先要做）

编写任何代码之前，先确定一个大胆的美学方向：

1. 了解背景

• 用途：这个界面要解决什么问题？谁会使用它？
• 受众：开发者工具？消费级应用？企业产品？创意机构？
• 限制条件：性能要求、无障碍需求、品牌指南？

2. 选择一种极致风格

选一种并贯彻到底——畏首畏尾的设计不会成功：

风格	特征
极简主义	稀疏、单色、超大字体、粗粝边缘
极繁主义混沌风	分层、密集、元素重叠、可控的无序
复古未来主义	霓虹点缀、几何形状、CRT 美学
自然有机风	柔和曲线、大地色调、手绘元素
奢华精致风	微妙动画、高级字体、克制的配色
编辑部／杂志风	强烈网格、戏剧化标题、将留白作为设计特色
粗野主义／原始风	暴露结构、强烈对比、反设计
装饰艺术／几何风	金色点缀、对称、华丽图案
柔和／粉彩风	圆角、柔和渐变、亲切友好
工业／实用主义	功能性、等宽字体、信息密集

3. 确定令人难忘的元素

有什么是别人会记住的？主视觉动画？字体处理方式？色彩搭配？不同寻常的布局？

---

美学指南

字体排印——绝不通用

禁用：Inter、Roboto、Arial、系统字体、Open Sans

推荐：选择独特、有个性的字体，让设计更出彩。

使用场景	方法
展示文字／标题	个性鲜明——Clash、Cabinet Grotesk、Satoshi、Space Grotesk（少量使用）、Playfair Display
正文	清晰易读——Instrument Sans、General Sans、Plus Jakarta Sans
等宽字体／代码	DM Mono、JetBrains Mono、IBM Plex Mono
搭配策略	对比字重（纤细展示字体 + 粗体正文），对比风格（衬线字体 + 几何无衬线字体）

字号递进：采用 3 倍以上的跨度，而非保守的 1.5 倍递增。

色彩与主题

禁用：白底紫色渐变、平均分配的五色调色板

推荐：

• 主色 + 鲜明强调色：遵循 70-20-10 法则（主色－次色－强调色）
• CSS 变量：--primary、--accent、--surface、--text
• 坚定选择深色或浅色：不要折中采用灰色中间调
• 高对比度 CTA：按钮要格外醒目

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --text-primary: #fafafa;
  --text-secondary: #a1a1a1;
  --accent: #ff6b35;
  --accent-hover: #ff8555;
}

动效与动画

优先考虑：一次精心编排的页面加载动画 > 零散的微交互

高影响力时刻：

• 错落呈现的主视觉元素（animation-delay）
• 滚动触发的区块入场动画
• 出乎意料的悬停状态（缩放、颜色变化、阴影深度）
• 流畅的页面过渡

实现方式：

• 简单动画使用纯 CSS
• React 使用 Framer Motion（初始化脚本已预先安装）
• 动画时长控制在 200-400ms（干脆利落，不拖沓）

空间构图

禁用：居中、对称、可预见的布局

推荐：

• 有目的的不对称
• 元素重叠
• 对角线流动／打破网格
• 充裕的负空间，或可控的密集布局（二选一）
• 不受网格约束的主视觉区块

背景与氛围

禁用：纯白／灰色背景

推荐：

• 渐变网格（微妙而不刺眼）
• 噪点／颗粒纹理（SVG 滤镜或 CSS）
• 几何图案（点、线、形状）
• 多层透明效果
• 营造深度的戏剧化阴影
• 毛玻璃效果的模糊处理

/* Subtle grain overlay */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,...") repeat;
  opacity: 0.03;
  pointer-events: none;
}

---

移动端优先模式

详细 CSS 请参阅 references/mobile-patterns.md。

核心规则

模式	桌面端	移动端调整
带隐藏视觉元素的 Hero	两列网格	切换为 display: flex（不要使用 grid）
大型选择列表	水平滚动	使用带分类标题的折叠面板
多列表单	并排排列	垂直堆叠
状态／提醒卡片	行内排列	align-items: center + text-align: center
功能网格	3-4 列	单列

断点

/* Tablet - stack sidebars */
@media (max-width: 1200px) { }

/* Mobile - full single column */
@media (max-width: 768px) { }

/* Small mobile - compact spacing */
@media (max-width: 480px) { }

字体缩放

@media (max-width: 768px) {
  .hero-title { font-size: 32px; }      /* from ~48px */
  .section-title { font-size: 24px; }   /* from ~32px */
  .section-subtitle { font-size: 14px; } /* from ~16px */
}

---

构建工作流

选项 A：Vite（纯静态）

# 1. Initialize
bash scripts/init-vite.sh my-site
cd my-site

# 2. Develop
npm run dev

# 3. Build static files
npm run build
# Output: dist/

# 4. Bundle to single HTML (optional)
bash scripts/bundle-artifact.sh
# Output: bundle.html

选项 B：Next.js（部署到 Vercel）

# 1. Initialize
bash scripts/init-nextjs.sh my-site
cd my-site

# 2. Develop
npm run dev

# 3. Deploy to Vercel
vercel

---

项目结构

Vite 静态项目

my-site/
├── src/
│   ├── components/     # React components
│   ├── lib/           # Utilities, cn()
│   ├── styles/        # Global CSS
│   ├── config/
│   │   └── site.ts    # Editable content config
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── tailwind.config.ts
└── package.json

Next.js

my-site/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── privacy/page.tsx
├── components/
├── lib/
├── config/
│   └── site.ts
└── tailwind.config.ts

---

网站配置模式

将所有可编辑内容放在一个文件中：

// config/site.ts
export const siteConfig = {
  name: "Acme AI",
  tagline: "Write better, faster",
  description: "AI-powered writing assistant",
  
  hero: {
    badge: "Now in beta",
    title: "Your words,\nsupercharged",
    subtitle: "Write 10x faster with AI that understands your style",
    cta: { text: "Get Started", href: "/signup" },
    secondaryCta: { text: "Watch Demo", href: "#demo" },
  },
  
  features: [
    { icon: "Zap", title: "Lightning Fast", description: "..." },
    // ...
  ],
  
  pricing: [
    { name: "Free", price: 0, features: [...] },
    { name: "Pro", price: 19, features: [...], popular: true },
  ],
  
  faq: [
    { q: "How does it work?", a: "..." },
  ],
  
  footer: {
    links: [...],
    social: [...],
  }
}

---

实施前检查清单

在敲定任何设计之前，请先运行以下检查：

设计质量

• 字体排版有辨识度（不要使用 Inter/Roboto/Arial）
• 配色方案有明确的主色和强调色（不要平均分布）
• 背景有氛围感（不要使用纯白色或灰色）
• 至少有一个令人难忘的元素
• 动画经过统筹设计（不要零散分布）

移动端响应式设计

• Hero 在移动端居中显示（没有空白网格区域）
• 所有网格均折叠为单列
• 表单垂直堆叠
• 大型列表使用折叠面板（不要水平滚动）
• 字号按比例适当缩小

表单一致性

• input、select、textarea 的样式一致
• 单选框／复选框清晰可见（检查透明边框样式）
• 下拉选项的背景易于阅读
• 标签使用 CSS 变量（不要使用硬编码颜色）

无障碍访问

• 颜色对比度符合 WCAG AA（文本为 4.5:1，UI 为 3:1）
• 焦点状态清晰可见
• 使用语义化 HTML（nav、main、section、article）
• 图片具有替代文本
• 键盘导航可正常使用

---

shadcn/ui 组件

预装了 10 个常用组件（button、badge、card、accordion、dialog、navigation-menu、tabs、sheet、separator、avatar、alert）。使用 npx shadcn@latest add [name] 添加更多组件，或使用 npx shadcn@latest add --all 安装全部组件。

完整组件参考请参阅 references/shadcn-components.md。

最常用于着陆页的组件：

• Button、Badge — 行动号召和标签
• Card — 功能卡片、定价档位
• Accordion — 常见问题区域
• Dialog — 模态框、视频播放器
• NavigationMenu — 页眉导航
• Tabs — 功能展示
• Carousel — 用户评价

---

参考资料

• references/design-philosophy.md — 扩展版反 AI 味指南
• references/mobile-patterns.md — 详细的响应式 CSS
• references/shadcn-components.md — 组件速查
• templates/site-config.ts — 完整的 siteConfig 示例

---

示例

提示词 → 输出

输入：

“摄影师的作品集网站。简约、具有编辑风格。
网格画廊带灯箱、关于板块、联系表单。”

设计决策：

• 风格：编辑／杂志风
• 字体排版：Cormorant Garamond（展示字体）+ Inter……等等，禁用。改用 Plus Jakarta Sans（正文字体）
• 配色：近黑色背景（#0c0c0c）、暖白色文字（#f5f5f0）、铜色强调色（#b87333）
• 难忘之处：全出血 Hero 图片叠加文字，并在滚动时显现
• 动效：画廊图片在滚动时依次渐显

输出：完整的 Next.js 项目，包含响应式画廊、灯箱组件，以及带验证功能的联系表单。

---

基于 Anthropic 的 frontend-design、web-artifacts-builder 和社区 frontend-design-v2 技能。