介绍
# 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 倍递增。
### 色彩与主题
**禁止**: 白色背景上的紫色渐变，均匀分布的 5 色调色板
**推荐**: - **主导色 + 锐利点缀**: 70-20-10 法则 (主色-次色-点缀色) - **CSS 变量**: `--primary`, `--accent`, `--surface`, `--text` - **坚持深色 OR 浅色**: 不要用灰色作为中间地带 - **高对比度 CTA**: 按钮应该极具视觉冲击力
```css :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 (轻快，不拖沓)
### 空间构图
**禁止**: 居中、对称、可预测的布局
**推荐**: - 有目的的非对称 - 重叠元素 - 对角线流动 / 打破网格 - 宽裕的留白 OR 受控的密度 (二选一) - 离网的首屏区块
### 背景与氛围
**禁止**: 纯白/纯灰背景
**推荐**: - 渐变网格 (微妙，不艳俗) - 噪点/颗粒纹理 (SVG 滤镜或 CSS) - 几何图案 (点、线、形状) - 分层透明度 - 用于深度的戏剧性阴影 - 用于毛玻璃效果的模糊
```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](references/mobile-patterns.md)**。
### 关键规则
| 模式 | 桌面端 | 移动端修复 | |---------|---------|------------| | 隐藏视觉元素的首屏 | 2 列网格 | 切换为 `display: flex` (非网格) | | 大型选择列表 | 水平滚动 | 带分类标题的手风琴 | | 多列表单 | 并排 | 垂直堆叠 | | 状态/警告卡片 | 内联 | `align-items: center` + `text-align: center` | | 功能网格 | 3-4 列 | 单列 |
### 断点
```css /* Tablet - stack sidebars */ @media (max-width: 1200px) { }
/* Mobile - full single column */ @media (max-width: 768px) { }
/* Small mobile - compact spacing */ @media (max-width: 480px) { } ```
### 字体缩放
```css @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 (纯静态)
```bash # 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 部署)
```bash # 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 ```
---
## 站点配置模式
将所有可编辑内容保留在一个文件中：
```typescript // 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) - [ ] 调色板有明显的主导色 + 点缀色 (非均匀分布) - [ ] 背景具有氛围感 (非纯白/纯灰) - [ ] 至少有一个令人难忘/难以忘怀的元素 - [ ] 动画经过精心编排 (非分散)
### 移动端响应式 - [ ] 首屏在移动端居中 (无空白网格区域) - [ ] 所有网格折叠为单列 - [ ] 表单垂直堆叠 - [ ] 大型列表使用手风琴 (非水平滚动) - [ ] 字体大小适当缩小
### 表单一致性 - [ ] 输入框、选择框、文本区域样式一致 - [ ] 单选框/复选框可见 (检查透明边框样式) - [ ] 下拉选项具有可读的背景 - [ ] 标签使用 CSS 变量 (非硬编码颜色)
### 无障碍性 - [ ] 颜色对比度符合 WCAG AA 标准 (文本 4.5:1, UI 3:1) - [ ] 焦点状态可见 - [ ] 语义化 HTML (nav, main, section, article) - [ ] 图片包含 Alt 文本 - [ ] 键盘导航可用
---
## 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](references/shadcn-components.md)**。
着陆页最常用： - `Button`, `Badge` — 行动号召 (CTA) 和标签 - `Card` — 功能卡片、定价层级 - `Accordion` — 常见问题部分 - `Dialog` — 模态框、视频播放器 - `NavigationMenu` — 头部导航 - `Tabs` — 功能展示 - `Carousel` — 用户评价
---
## 参考资料
- **[references/design-philosophy.md](references/design-philosophy.md)** — 扩展的反 AI 垃圾内容指南 - **[references/mobile-patterns.md](references/mobile-patterns.md)** — 详细的响应式 CSS - **[references/shadcn-components.md](references/shadcn-components.md)** — 组件快速参考 - **[templates/site-config.ts](templates/site-config.ts)** — 完整 siteConfig 示例
---
## 示例
### 提示词 → 输出
**输入**: > "摄影师的个人作品集网站。极简、杂志感。 > 带有灯箱的网格画廊、关于部分、联系表单。"
**设计决策**: - 基调: 杂志/编辑风 - 排版: Cormorant Garamond (展示体) + Inter... 等等，被禁用了。Plus Jakarta Sans (正文) - 色彩: 近黑背景 (#0c0c0c), 暖白文字 (#f5f5f0), 铜色点缀 (#b87333) - 令人难忘之处: 滚动时显示文字的全屏出血首屏图片 - 动效: 画廊图片滚动时错落淡入
**输出**: 包含响应式画廊、灯箱组件和带验证联系表单的完整 Next.js 项目。
---
*基于 Anthropic 的 frontend-design, web-artifacts-builder 和社区 frontend-design-v2 技能。*