前端设计终极版
仅从文本需求创建独特、生产级的静态网站。无需设计稿、无需 Figma —— 只需描述你想要的，即可获得大胆、令人难忘的设计。
技术栈: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
输出: Vite（静态HTML）或 Next.js（Vercel就绪）
快速开始
"为一个AI写作工具构建SaaS落地页。深色主题， 编辑排版风格，微妙纹理背景。页面包括：带动画演示的英雄区、 功能网格、价格表、FAQ手风琴、页脚。"
设计思维（先做这一步）
在编写任何代码之前，确定一个大胆的美学方向：
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 - 坚定选择深色或浅色: 不要用灰色中间地带模棱两可
- 高对比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（快速，不拖沓）
空间构成
禁止使用: 居中、对称、可预测的布局
应该使用:
- 有目的的不对称
- 重叠元素
- 对角线流动 / 突破网格
- 慷慨的负空间 或 受控的密度（二选一）
- 偏离网格的英雄区
背景与氛围
禁止使用: 纯白色/灰色背景
应该使用:
- 渐变网格（微妙，不刺眼）
- 噪点/纹理（SVG滤镜或CSS）
- 几何图案（点、线、形状）
- 分层透明度
- 戏剧性的阴影营造深度
- 模糊效果实现玻璃态
css/* 微妙噪点覆盖 */ .grain::before { content: ''; position: fixed; inset: 0; background: url("data:image/svg+xml,...") repeat; opacity: 0.03; pointer-events: none; }
移动优先模式
详见 references/mobile-patterns.md 获取详细CSS。
关键规则
| 模式 | 桌面 | 移动端修复 |
|---|---|---|
| 带隐藏视觉的Hero | 2列网格 | 切换为 display: flex（不是grid） |
| 大型选择列表 | 水平滚动 | 带分类标题的手风琴 |
| 多列表单 | 并排 | 垂直堆叠 |
| 状态/警告卡片 | 内联 | align-items: center + text-align: center |
| 功能网格 | 3-4列 | 单列 |
断点
css/* 平板 - 堆叠侧边栏 */ @media (max-width: 1200px) { } /* 移动端 - 完全单列 */ @media (max-width: 768px) { } /* 小屏移动端 - 紧凑间距 */ @media (max-width: 480px) { }
字体缩放
css@media (max-width: 768px) { .hero-title { font-size: 32px; } /* 从 ~48px */ .section-title { font-size: 24px; } /* 从 ~32px */ .section-subtitle { font-size: 14px; } /* 从 ~16px */ }
构建工作流
选项A: Vite（纯静态）
bash# 1. 初始化 bash scripts/init-vite.sh my-site cd my-site # 2. 开发 npm run dev # 3. 构建静态文件 npm run build # 输出: dist/ # 4. 打包为单个HTML（可选） bash scripts/bundle-artifact.sh # 输出: bundle.html
选项B: Next.js（Vercel部署）
bash# 1. 初始化 bash scripts/init-nextjs.sh my-site cd my-site # 2. 开发 npm run dev # 3. 部署到Vercel vercel
项目结构
Vite 静态
my-site/ ├── src/ │ ├── components/ # React组件 │ ├── lib/ # 工具函数, cn() │ ├── styles/ # 全局CSS │ ├── config/ │ │ └── site.ts # 可编辑内容配置 │ ├── 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: "写得更好、更快", description: "AI驱动的写作助手", hero: { badge: "现在测试中", title: "你的文字，\n如虎添翼", subtitle: "用理解你风格的AI，10倍速写作", cta: { text: "开始使用", href: "/signup" }, secondaryCta: { text: "观看演示", href: "#demo" }, }, features: [ { icon: "Zap", title: "闪电般快速", description: "..." }, // ... ], pricing: [ { name: "免费", price: 0, features: [...] }, { name: "专业", price: 19, features: [...], popular: true }, ], faq: [ { q: "如何运作？", a: "..." }, ], footer: { links: [...], social: [...], } }
实施前检查清单
在最终确定任何设计之前运行此检查：
设计质量
- 排版独特（无Inter/Roboto/Arial）
- 调色板有清晰的主色 + 强调色（非均匀分布）
- 背景有氛围（非纯白色/灰色）
- 至少有一个令人难忘/难忘的元素
- 动画经过协调（非分散）
移动端响应
- Hero在移动端居中（无空网格空间）
- 所有网格折叠为单列
- 表单垂直堆叠
- 大型列表使用手风琴（非水平滚动）
- 字体大小适当缩小
表单一致性
- Input、select、textarea样式一致
- Radio/checkbox可见（检查透明边框样式）
- 下拉选项有可读背景
- 标签使用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 获取完整组件参考。
落地页最常用：
Button,Badge— CTA和标签Card— 功能卡片、价格层级Accordion— FAQ部分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（展示）+ Plus Jakarta Sans（正文）
- 颜色: 近黑背景（#0c0c0c），暖白文字（#f5f5f0），铜色强调（#b87333）
- 难忘元素: 全出血英雄图片，文字覆盖在滚动时显示
- 动效: 画廊图片在滚动时交错淡入
输出: 完整的Next.js项目，包含响应式画廊、灯箱组件和带验证的联系表单。
基于Anthropic的frontend-design、web-artifacts-builder和社区frontend-design-v2技能。
