frontend-design-ultimate

用途

Frontend Design Ultimate 用于从纯文本需求直接生成独特、生产级的静态网站。无需设计稿或 Figma，只需描述想要的效果，即可获得大胆、令人印象深刻的界面设计。

主要能力

技术栈：React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion。
输出形式：Vite（静态 HTML）或 Next.js（可部署至 Vercel）。
设计思维流程：先理解上下文（目的、受众、约束），再选择一种极端基调并全力执行，最后定义一个令人难忘的元素。
美学规范：对排版、配色、动效、空间构图、背景氛围给出明确指引，并列出应避免的通用做法。
移动端优先模式：提供断点、字体缩放及常见布局的移动端修复方案。
预置 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 安装全部。
上线前检查清单：涵盖设计质量、移动端响应式、表单一致性、无障碍访问。

使用方式

快速开始

用自然语言描述需求，例如：

"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."

构建工作流

选项 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: "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: [...],
  }
}

适用场景

从文本需求快速生成 SaaS 落地页、作品集、产品官网等静态站点。
需要鲜明、令人印象深刻的设计风格，而非通用模板化界面。
希望以 Vite 输出纯静态 HTML，或以 Next.js 部署至 Vercel。
需要移动端优先、响应式且具备无障碍基础的页面。

限制

资料未提供收费、价格或平台限制信息。
资料未提供具体性能指标或效果保证。
资料未提供除 Vite 与 Next.js 之外的其他输出方式。
资料未提供对后端、数据库或动态服务的支持说明。