前端设计终极方案

仅凭文字描述，即可创建独特、生产级的静态网站。无需线框图，无需Figma——只需描述您的需求，即可获得大胆、令人难忘的设计。

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

快速开始

“为AI写作工具构建一个SaaS落地页。深色主题，编辑版式风格，带细微颗粒纹理。页面包含：带有动画演示的英雄区、功能网格、定价表、FAQ手风琴折叠面板、页脚。”

设计思维（首要步骤）

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

1. 理解背景

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

2. 选择一种极致的风格基调

选择一种并全力贯彻——犹豫不决的设计注定失败：

3. 定义难忘元素

有什么是让人过目不忘的？一个英雄动画？字体处理？色彩组合？不寻常的布局？

美学指南

字体——绝不用通用字体

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

应做之事：选择独特、富有特色的字体来提升设计。

字号递进：使用3倍或更大的跳跃，而不是谨慎的1.5倍增量。

色彩与主题

禁止事项：白色背景上的紫色渐变、均匀分布的五色调色板

应做之事：

• 主色调 + 鲜明点缀色：70-20-10规则（主色-辅色-点缀色）
• CSS变量：--primary,--accent,--surface,--text
• 选择深色或浅色：避免使用灰色中间地带
• 高对比度行动号召：按钮应醒目突出

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

动效与动画

优先级：一次编排好的页面加载 > 零散的微交互

高影响力时刻：

• 交错式英雄区展现 (动画延迟)
• 滚动触发的区块进入效果
• 带来惊喜的悬停状态（缩放、色彩变换、阴影深度）
• 平滑的页面过渡

实施:

• 简单的动画使用纯CSS
• React项目使用Framer Motion（已通过初始化脚本预安装）
• 保持动画时长在200-400毫秒（干脆利落，不拖沓）

空间构成

禁止：居中对齐、对称、可预测的布局

推荐：

• 有目的性的不对称
• 元素重叠
• 对角线流线 / 打破网格
• 充裕的负空间 或 受控的密度（二选一）
• 打破网格的英雄区域

背景与氛围

禁止：纯白/纯灰背景

推荐：

• 渐变网格（微妙，不花哨）
• 噪点/颗粒纹理（SVG滤镜或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。

关键规则

断点

/* 平板设备 - 侧边栏堆叠 */
@media (max-width: 1200px) { }

/* 移动设备 - 完整单列 */
@media (max-width: 768px) { }

/* 小屏幕移动设备 - 紧凑间距 */
@media (max-width: 480px) { }

字体缩放

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

构建工作流

选项 A: Vite (纯静态)

# 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 部署)

# 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

站点配置模式

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

// 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）
• 配色方案有明确的主色和强调色（非均匀分布）
• 背景具有氛围感（非纯白/灰色）
• 至少有一个令人难忘的元素
• 动画编排协调（非零散分布）

移动端响应

• 移动端主图居中（无空白网格空间）
• 所有网格均折叠为单列布局
• 表单垂直堆叠排列
• 长列表使用手风琴式折叠（非横向滚动）
• 字体大小适配缩放

表单一致性

• 输入框、选择框、文本域样式统一
• 单选/复选框可见（检查透明边框样式）
• 下拉选项具有可读的背景色
• 标签使用CSS变量（非硬编码颜色）

可访问性

• 色彩对比度符合WCAG AA标准（文本4.5:1，UI组件3:1）
• 焦点状态可见
• 语义化HTML结构（nav、main、section、article）
• 图像添加替代文本
• 支持键盘导航

shadcn/ui组件

10个预装的常用组件（按钮、徽章、卡片、手风琴、对话框、导航菜单、标签页、侧边栏、分隔符、头像、警告）。如需添加更多，请使用npx shadcn@latest add [组件名称]或一次性安装全部组件npx shadcn@latest add --all。

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

着陆页最常用组件：

• 按钮、徽章——用于行动号召和标签
• 卡片——功能卡片、定价层级
• 手风琴——常见问题版块
• 对话框——模态框、视频播放器
• 导航菜单——页眉导航
• 标签页——功能展示
• 轮播图— 推荐语

参考文献

• 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)
• 难忘之处：全出血英雄图像，带滚动时显示的文本覆盖层
• 动效：画廊图片在滚动时错落淡入

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

基于Anthropic的前端设计、Web构件构建以及社区前端设计v2技能。