demo-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Demo Builder

演示项目构建工具

Build complete, production-ready demo projects from scratch using Next.js 14 (App Router) + Tailwind CSS 3.4.1, optimized for Vercel deployment. Takes a project concept and delivers a fully functional, styled application.

使用Next.js 14（App Router）+ Tailwind CSS 3.4.1从零开始构建完整的、可投入生产的演示项目，优化后可直接部署到Vercel。只需提供项目构想，即可交付一个功能完整、样式精美的应用。

Stack

技术栈

Layer	Technology	Version
Framework	Next.js (App Router)	14.x
Styling	Tailwind CSS	3.4.19
Language	TypeScript	5.x
Deployment	Vercel	latest
Database ORM	Prisma	latest (when DB provided)
Auth (optional)	NextAuth.js	4.x
Icons	Lucide React	latest

层级	技术栈	版本
框架	Next.js (App Router)	14.x
样式	Tailwind CSS	3.4.19
开发语言	TypeScript	5.x
部署平台	Vercel	latest
数据库ORM	Prisma	latest (当提供数据库时启用)
身份验证（可选）	NextAuth.js	4.x
图标库	Lucide React	latest

Workflow

工作流程

When the user describes what they want to build, follow this exact sequence:

当用户描述想要构建的项目时，请严格遵循以下步骤：

Step 1: Clarify the Project

步骤1：明确项目需求

Ask the user (if not already clear):

What is the project? — e.g., "a portfolio site", "an e-commerce shop", "a SaaS dashboard"
Database URL? — If they provide one, enable full database integration with Prisma
Any specific pages or features? — e.g., "landing page, pricing, blog", "product listings, cart, checkout"

若信息不明确，向用户确认：

项目类型？ — 例如：“作品集网站”、“电商店铺”、“SaaS仪表盘”
是否提供Database URL？ — 如果提供，启用Prisma完整数据库集成
是否有特定页面或功能需求？ — 例如：“首页、定价页、博客”、“商品列表、购物车、结算页”

Step 2: Scaffold the Project

步骤2：初始化项目框架

bash

npx create-next-app@14 <project-name> \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*" \
  --no-turbo

Then pin Tailwind CSS to 3.4.1:

bash

cd <project-name>
npm install tailwindcss@3.4.1 postcss autoprefixer

bash

npx create-next-app@14 <project-name> \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*" \
  --no-turbo

然后锁定Tailwind CSS版本为3.4.1：

bash

cd <project-name>
npm install tailwindcss@3.4.1 postcss autoprefixer

Step 3: Configure Tailwind

步骤3：配置Tailwind

Use this

tailwind.config.ts

as the base, customizing colors/fonts per project type:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#f0f9ff",
          100: "#e0f2fe",
          200: "#bae6fd",
          300: "#7dd3fc",
          400: "#38bdf8",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          800: "#075985",
          900: "#0c4a6e",
          950: "#082f49",
        },
        accent: {
          50: "#fdf4ff",
          100: "#fae8ff",
          200: "#f5d0fe",
          300: "#f0abfc",
          400: "#e879f9",
          500: "#d946ef",
          600: "#c026d3",
          700: "#a21caf",
          800: "#86198f",
          900: "#701a75",
          950: "#4a044e",
        },
      },
      fontFamily: {
        sans: ["var(--font-geist-sans)", "system-ui", "sans-serif"],
        mono: ["var(--font-geist-mono)", "monospace"],
      },
      animation: {
        "fade-in": "fadeIn 0.5s ease-out",
        "slide-up": "slideUp 0.5s ease-out",
        "slide-in-right": "slideInRight 0.3s ease-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        slideUp: {
          "0%": { opacity: "0", transform: "translateY(20px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        slideInRight: {
          "0%": { opacity: "0", transform: "translateX(20px)" },
          "100%": { opacity: "1", transform: "translateX(0)" },
        },
      },
    },
  },
  plugins: [],
};

export default config;

使用以下

tailwind.config.ts

作为基础配置，根据项目类型自定义颜色和字体：

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#f0f9ff",
          100: "#e0f2fe",
          200: "#bae6fd",
          300: "#7dd3fc",
          400: "#38bdf8",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          800: "#075985",
          900: "#0c4a6e",
          950: "#082f49",
        },
        accent: {
          50: "#fdf4ff",
          100: "#fae8ff",
          200: "#f5d0fe",
          300: "#f0abfc",
          400: "#e879f9",
          500: "#d946ef",
          600: "#c026d3",
          700: "#a21caf",
          800: "#86198f",
          900: "#701a75",
          950: "#4a044e",
        },
      },
      fontFamily: {
        sans: ["var(--font-geist-sans)", "system-ui", "sans-serif"],
        mono: ["var(--font-geist-mono)", "monospace"],
      },
      animation: {
        "fade-in": "fadeIn 0.5s ease-out",
        "slide-up": "slideUp 0.5s ease-out",
        "slide-in-right": "slideInRight 0.3s ease-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        slideUp: {
          "0%": { opacity: "0", transform: "translateY(20px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        slideInRight: {
          "0%": { opacity: "0", transform: "translateX(20px)" },
          "100%": { opacity: "1", transform: "translateX(0)" },
        },
      },
    },
  },
  plugins: [],
};

export default config;

Step 4: Set Up Project Structure

步骤4：搭建项目结构

Create the base file structure:

src/
  app/
    layout.tsx          # Root layout with fonts, metadata
    page.tsx            # Home/landing page
    globals.css         # Tailwind directives + custom styles
    favicon.ico
  components/
    ui/                 # Reusable UI primitives
      button.tsx
      card.tsx
      input.tsx
      badge.tsx
      container.tsx
    layout/             # Layout components
      navbar.tsx
      footer.tsx
      sidebar.tsx       # (if dashboard-style)
  lib/
    utils.ts            # cn() helper, formatters
    constants.ts        # Site config, nav links
  types/
    index.ts            # Shared TypeScript types

创建基础文件结构：

src/
  app/
    layout.tsx          # 包含字体、元数据的根布局
    page.tsx            # 首页/落地页
    globals.css         # Tailwind指令 + 自定义样式
    favicon.ico
  components/
    ui/                 # 可复用UI组件
      button.tsx
      card.tsx
      input.tsx
      badge.tsx
      container.tsx
    layout/             # 布局组件
      navbar.tsx
      footer.tsx
      sidebar.tsx       # （仪表盘类型项目使用）
  lib/
    utils.ts            # cn()工具函数、格式化工具
    constants.ts        # 站点配置、导航链接
  types/
    index.ts            # 共享TypeScript类型

Step 5: Build Core Components

步骤5：构建核心组件

cn() Utility

cn()工具函数

// src/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Install dependencies:

bash

npm install clsx tailwind-merge lucide-react

// src/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

安装依赖：

bash

npm install clsx tailwind-merge lucide-react

Root Layout

根布局

tsx

// src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";

const inter = Inter({ subsets: ["latin"], variable: "--font-geist-sans" });

export const metadata: Metadata = {
  title: "Project Name",
  description: "Project description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.variable} font-sans antialiased`}>
        <Navbar />
        <main className="min-h-screen">{children}</main>
        <Footer />
      </body>
    </html>
  );
}

tsx

// src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";

const inter = Inter({ subsets: ["latin"], variable: "--font-geist-sans" });

export const metadata: Metadata = {
  title: "Project Name",
  description: "Project description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.variable} font-sans antialiased`}>
        <Navbar />
        <main className="min-h-screen">{children}</main>
        <Footer />
      </body>
    </html>
  );
}

Globals CSS

全局样式

css

/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-gray-200;
  }
  body {
    @apply bg-white text-gray-900;
  }
}

@layer components {
  .container-default {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }
  .section-padding {
    @apply py-16 sm:py-20 lg:py-24;
  }
}

css

/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-gray-200;
  }
  body {
    @apply bg-white text-gray-900;
  }
}

@layer components {
  .container-default {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }
  .section-padding {
    @apply py-16 sm:py-20 lg:py-24;
  }
}

Step 6: Database Integration (When DATABASE_URL Provided)

步骤6：数据库集成（当提供DATABASE_URL时）

If the user provides a database URL, set up Prisma:

bash

npm install prisma @prisma/client
npx prisma init

Create the Prisma client singleton:

// src/lib/db.ts
import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const db = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = db;

Add

DATABASE_URL

.env

env

DATABASE_URL="<user-provided-url>"

Then design the Prisma schema based on the project type:

E-commerce example:

prisma

model Product {
  id          String   @id @default(cuid())
  name        String
  description String?
  price       Float
  image       String?
  category    String?
  inStock     Boolean  @default(true)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

model Order {
  id        String      @id @default(cuid())
  total     Float
  status    String      @default("pending")
  items     OrderItem[]
  createdAt DateTime    @default(now())
}

model OrderItem {
  id        String  @id @default(cuid())
  quantity  Int
  price     Float
  productId String
  orderId   String
  order     Order   @relation(fields: [orderId], references: [id])
}

Dashboard example:

prisma

model User {
  id        String   @id @default(cuid())
  name      String
  email     String   @unique
  role      String   @default("user")
  createdAt DateTime @default(now())
}

model Metric {
  id        String   @id @default(cuid())
  name      String
  value     Float
  category  String
  date      DateTime @default(now())
}

After defining the schema:

bash

npx prisma db push
npx prisma generate

Create API routes for CRUD operations:

// src/app/api/<resource>/route.ts
import { NextResponse } from "next/server";
import { db } from "@/lib/db";

export async function GET() {
  const items = await db.<model>.findMany({
    orderBy: { createdAt: "desc" },
  });
  return NextResponse.json(items);
}

export async function POST(request: Request) {
  const body = await request.json();
  const item = await db.<model>.create({ data: body });
  return NextResponse.json(item, { status: 201 });
}

如果用户提供了数据库URL，配置Prisma：

bash

npm install prisma @prisma/client
npx prisma init

创建Prisma客户端单例：

// src/lib/db.ts
import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const db = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = db;

将

DATABASE_URL

添加到

.env

文件：

env

DATABASE_URL="<user-provided-url>"

然后根据项目类型设计Prisma schema：

电商示例：

prisma

model Product {
  id          String   @id @default(cuid())
  name        String
  description String?
  price       Float
  image       String?
  category    String?
  inStock     Boolean  @default(true)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

model Order {
  id        String      @id @default(cuid())
  total     Float
  status    String      @default("pending")
  items     OrderItem[]
  createdAt DateTime    @default(now())
}

model OrderItem {
  id        String  @id @default(cuid())
  quantity  Int
  price     Float
  productId String
  orderId   String
  order     Order   @relation(fields: [orderId], references: [id])
}

仪表盘示例：

prisma

model User {
  id        String   @id @default(cuid())
  name      String
  email     String   @unique
  role      String   @default("user")
  createdAt DateTime @default(now())
}

model Metric {
  id        String   @id @default(cuid())
  name      String
  value     Float
  category  String
  date      DateTime @default(now())
}

定义schema后执行：

bash

npx prisma db push
npx prisma generate

创建CRUD操作的API路由：

// src/app/api/<resource>/route.ts
import { NextResponse } from "next/server";
import { db } from "@/lib/db";

export async function GET() {
  const items = await db.<model>.findMany({
    orderBy: { createdAt: "desc" },
  });
  return NextResponse.json(items);
}

export async function POST(request: Request) {
  const body = await request.json();
  const item = await db.<model>.create({ data: body });
  return NextResponse.json(item, { status: 201 });
}

Project Templates

项目模板

Adapt the build based on what the user asks for:

根据用户需求调整构建内容：

Landing Page / Presentation Website

落地页/展示网站

Hero section with CTA
Features grid (3-4 cards)
Testimonials section
Pricing table (if relevant)
FAQ accordion
Contact / CTA footer section
Responsive navbar with mobile menu

包含CTA的Hero区域
功能网格（3-4个卡片）
客户评价区域
定价表（如适用）
FAQ折叠面板
联系/CTA页脚区域
响应式导航栏（含移动端菜单）

E-Commerce / Shop

电商店铺

Product listing grid with filters
Product detail page
Shopping cart (client-side state or DB-backed)
Checkout flow
Category navigation
Search functionality
If DATABASE_URL: full Prisma product/order models + API routes

带筛选功能的商品列表网格
商品详情页
购物车（客户端状态或数据库存储）
结算流程
分类导航
搜索功能
若提供DATABASE_URL：完整的Prisma商品/订单模型 + API路由

Dashboard / Admin Panel

仪表盘/管理后台

Sidebar navigation
Stats/metrics cards at top
Data tables with sorting/filtering
Charts placeholder (recommend recharts)
User management section
If DATABASE_URL: real data from Prisma queries via server components

侧边栏导航
顶部统计指标卡片
带排序/筛选的数据表格
图表占位符（推荐使用recharts）
用户管理区域
若提供DATABASE_URL：通过服务器组件从Prisma查询真实数据

SaaS Application

SaaS应用

Marketing landing page
Feature comparison
Pricing tiers
Auth pages (login/signup layouts)
Dashboard shell
Settings page
If DATABASE_URL: user + subscription models

营销落地页
功能对比
定价套餐
身份验证页面（登录/注册布局）
仪表盘框架
设置页面
若提供DATABASE_URL：用户 + 订阅模型

Portfolio

作品集

Hero with name/title/avatar
Project showcase grid
About section
Skills/tech stack display
Contact form
Blog section (optional)

包含姓名/头衔/头像的Hero区域
项目展示网格
关于我区域
技能/技术栈展示
联系表单
博客区域（可选）

Blog

博客

Post listing with thumbnails
Post detail with MDX-like layout
Category/tag filtering
Author info
If DATABASE_URL: posts + categories models

带缩略图的文章列表
类MDX布局的文章详情页
分类/标签筛选
作者信息
若提供DATABASE_URL：文章 + 分类模型

Vercel Deployment Readiness

Vercel部署准备

Every project must include:

vercel.json
(only if custom config needed):

json

{
  "framework": "nextjs"
}

Environment variables documentation in README:

markdown

undefined

每个项目必须包含：

vercel.json
（仅需自定义配置时添加）：

json

{
  "framework": "nextjs"
}

README中的环境变量说明：

markdown

undefined

Environment Variables

环境变量

Variable	Required	Description
DATABASE_URL	No	Database connection string


3. **Proper `next.config.mjs`**:
```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;

Generated README.md with:
- Project description
- Tech stack
- Setup instructions (
```
npm install
```
  ,
```
npm run dev
```
  )
- Environment variables table
- Deployment instructions

变量名	是否必填	说明
DATABASE_URL	否	数据库连接字符串


3. **正确的`next.config.mjs`**：
```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;

自动生成的README.md，包含：
- 项目描述
- 技术栈
- 安装说明（
```
npm install
```
  ,
```
npm run dev
```
  ）
- 环境变量表格
- 部署说明

Quality Standards

质量标准

Every demo project MUST have:

每个演示项目必须满足：

Fully responsive design (mobile-first)
Semantic HTML with proper heading hierarchy
Consistent spacing using Tailwind's spacing scale
Hover/focus states on all interactive elements
Loading states where appropriate
Proper TypeScript types (no
```
any
```
)
Clean component structure (one component per file)
Accessible markup (alt text, aria labels, focus management)
Working navigation between all pages
Placeholder content that looks realistic (not lorem ipsum where avoidable)

完全响应式设计（移动端优先）
语义化HTML，标题层级正确
使用Tailwind间距系统，保持间距一致性
所有交互元素包含hover/focus状态
适当位置添加加载状态
完善的TypeScript类型（禁止使用
```
any
```
）
清晰的组件结构（一个组件对应一个文件）
可访问性标记（替代文本、aria标签、焦点管理）
所有页面间导航正常工作
真实感占位内容（尽量避免使用lorem ipsum）

Code quality:

代码质量：

No unused imports or variables
Consistent naming conventions (PascalCase components, camelCase functions)
Server Components by default,
```
"use client"
```
only when needed
Proper error boundaries for data-fetching pages
SEO metadata on every page

无未使用的导入或变量
一致的命名规范（组件使用PascalCase，函数使用camelCase）
默认使用服务器组件，仅在必要时添加
```
"use client"
```
数据获取页面添加正确的错误边界
每个页面配置SEO元数据

Build Verification

构建验证

After building the project, always run:

bash

npm run build

Fix any TypeScript or build errors before presenting the project to the user. The project must compile cleanly.

Then start the dev server to verify:

bash

npm run dev

Confirm the app loads correctly at

http://localhost:3000

项目构建完成后，必须执行：

bash

npm run build

在向用户交付项目前，修复所有TypeScript或构建错误。项目必须能正常编译。

然后启动开发服务器验证：

bash

npm run dev

确认应用能在

http://localhost:3000

正常加载。