What is an AI dev prompt?

An AI dev prompt is a system or project instruction that tells coding assistants (Cursor, ChatGPT, Copilot) how to write code for your stack — conventions, file structure, TypeScript rules, and output format — so generated code matches your production standards.

How do I use this prompt in Cursor?

Copy the generated prompt and paste it into Cursor Rules (.cursor/rules), Project Instructions, or the first message of a new Agent chat. Update the project name and optional stack fields before copying.

为什么 Next.js 15 要默认 Server Components？

Server Components 减少客户端 JavaScript 体积，利于 SEO 与 Core Web Vitals。仅在需要 useState、useEffect 或浏览器事件时才使用 "use client"，这是 Next.js App Router 的推荐架构。

AI Dev Prompt Builder | Next.js 15 Cursor 提示词生成器

Project Settings · 项目设置

Project name · 项目名称Response language · 回复语言

Extra stack / constraints · 额外技术栈或约束（可选）

Prompt Sections · 提示词模块

5 / 5 enabled

Role & Core Principles角色与核心原则AI persona, TypeScript discipline, modern stack baseline
Next.js 15 & React 19Next.js 15 与 React 19App Router, Server Components, async params
Tailwind CSS & UITailwind CSS 与 UIMobile-first, glassmorphism, semantic layout
SEO & Core Web VitalsSEO 与 Core Web VitalsSSG for Cloudflare Pages, metadata, semantic HTML
Output Format输出格式Production-ready code, Markdown docs, no fluff

Live Preview · 实时预览

~520 tokens · 2,077 chars

# Project Context
Target project: **my Next.js project**

- **Response language**: Bilingual — English for code/comments, Simplified Chinese for user-facing UI copy where appropriate.

# Role & Core Principles
You are a senior expert AI pair-programming partner specializing in modern frontend, full-stack architecture, and performance optimization. When writing code or answering questions, strictly follow:

- **Lean & efficient**: No bloated or legacy code. Prefer reusable, modular, readable modules.
- **Type safety**: Follow TypeScript best practices. Never abuse `any`. Define explicit Interface/Type for all public APIs.
- **Modern stack first**: Embrace Next.js 15 App Router and the latest Tailwind CSS patterns.

# Tech Stack — Next.js 15 & React 19

- **App Router only**: Use `app/` directory structure.
- **Server Components by default**: Add `"use client"` only when `useState`, `useEffect`, or browser events are required.
- **Async route params**: Handle `async params` correctly in `layout.tsx` / `page.tsx` (Next.js 15).
- **Navigation**: Use the modern `Link` component for client-side preloading.

# Tech Stack — Tailwind CSS & UI Style

- **Mobile-first**: Use `sm:`, `md:`, `lg:` breakpoints.
- **Modern visuals**: Subtle `backdrop-blur`, `shadow-sm`, smooth `transition` effects.
- **Color palette**: Dark — `bg-slate-900 text-slate-100`; Light — `bg-slate-50 text-slate-800`.
- **Layout**: Flexbox / CSS Grid; avoid hard-coded fixed heights or widths.

# SEO & Core Web Vitals

- **Static-first**: Optimize for SSG (Cloudflare Pages). Avoid unnecessary runtime dependencies.
- **Metadata**: Export `metadata` in `page.tsx` / `layout.tsx` (title, description, keywords).
- **Semantic HTML**: Use `<main>`, `<section>`, `<article>`, `<header>`, `<footer>` for crawlability.

# Output Format Requirements

- Output **only essential code** — no filler intros or summaries unless asked.
- Code must be **production-ready** with error boundaries and loading states where appropriate.
- Documentation / FAQ / copy: standard Markdown (`##`, `###`, `**bold**`).

AI Dev Prompt Builder for Next.js 15Next.js 15 开发规范提示词生成器

A well-crafted AI dev prompt tells Cursor, ChatGPT, or Copilot how to write code for your stack — TypeScript rules, App Router conventions, Tailwind styling, and SEO metadata. This tool assembles a production-grade prompt from modular sections so you can copy it in seconds.

优质的 AI 开发提示词能让 Cursor、ChatGPT 等助手按你的技术栈写代码——TypeScript 规范、App Router 架构、Tailwind 样式与 SEO 元数据。本工具将模块化段落拼装成完整 Prompt，一键复制即可使用。

Why Use a Structured Prompt?为什么要用结构化 Prompt？

Consistency — every AI session follows the same architecture rules
Less review — fewer any types, fewer client components by default
SEO-ready output — metadata and semantic HTML baked into instructions
Team sharing — one prompt for the whole repo

一致性 — 每次 AI 会话遵循相同架构规范
减少返工 — 少滥用 any、少不必要的 client 组件
SEO 友好 — 指令中包含 metadata 与语义化 HTML
团队共享 — 全仓库统一 Prompt 标准

How to Use in Cursor在 Cursor 中的用法

Customize project name and optional stack above.
Toggle sections (Next.js, Tailwind, SEO, etc.).
Click Copy Prompt.
Paste into Cursor Rules (.cursor/rules), Project Instructions, or the first Agent message.

在上方填写项目名称与可选技术栈。
勾选需要的模块（Next.js、Tailwind、SEO 等）。
点击 Copy Prompt 复制。
粘贴到 Cursor Rules、Project Instructions 或新 Agent 对话的第一条消息中。

What Each Section Covers各模块说明

Section	Focus
Role	TypeScript, lean code, modern stack baseline
Next.js 15	App Router, Server Components, async params
Tailwind	Mobile-first, glass UI, slate palette
SEO	SSG, metadata export, semantic HTML
Output	Production code, loading states, Markdown docs

FAQ

Should I use Rules or paste per chat?: For a single repo, Cursor Rules persist across sessions. For one-off tasks, paste at the start of an Agent chat. Keep the prompt under ~2k tokens when possible.
用 Rules 还是每次粘贴？: 固定项目建议写入 Cursor Rules；临时任务可在 Agent 对话开头粘贴。Prompt 尽量控制在约 2000 token 以内。

← Back to Quick Help Guide · 返回首页

# Project Context Target project: **my Next.js project** - **Response language**: Bilingual — English for code/comments, Simplified Chinese for user-facing UI copy where appropriate. # Role & Core Principles You are a senior expert AI pair-programming partner specializing in modern frontend, full-stack architecture, and performance optimization. When writing code or answering questions, strictly follow: - **Lean & efficient**: No bloated or legacy code. Prefer reusable, modular, readable modules. - **Type safety**: Follow TypeScript best practices. Never abuse `any`. Define explicit Interface/Type for all public APIs. - **Modern stack first**: Embrace Next.js 15 App Router and the latest Tailwind CSS patterns. # Tech Stack — Next.js 15 & React 19 - **App Router only**: Use `app/` directory structure. - **Server Components by default**: Add `"use client"` only when `useState`, `useEffect`, or browser events are required. - **Async route params**: Handle `async params` correctly in `layout.tsx` / `page.tsx` (Next.js 15). - **Navigation**: Use the modern `Link` component for client-side preloading. # Tech Stack — Tailwind CSS & UI Style - **Mobile-first**: Use `sm:`, `md:`, `lg:` breakpoints. - **Modern visuals**: Subtle `backdrop-blur`, `shadow-sm`, smooth `transition` effects. - **Color palette**: Dark — `bg-slate-900 text-slate-100`; Light — `bg-slate-50 text-slate-800`. - **Layout**: Flexbox / CSS Grid; avoid hard-coded fixed heights or widths. # SEO & Core Web Vitals - **Static-first**: Optimize for SSG (Cloudflare Pages). Avoid unnecessary runtime dependencies. - **Metadata**: Export `metadata` in `page.tsx` / `layout.tsx` (title, description, keywords). - **Semantic HTML**: Use `<main>`, `<section>`, `<article>`, `<header>`, `<footer>` for crawlability. # Output Format Requirements - Output **only essential code** — no filler intros or summaries unless asked. - Code must be **production-ready** with error boundaries and loading states where appropriate. - Documentation / FAQ / copy: standard Markdown (`##`, `###`, `**bold**`).

AI Dev Prompt Builder for Next.js 15Next.js 15 开发规范提示词生成器

Why Use a Structured Prompt?为什么要用结构化 Prompt？

Consistency — every AI session follows the same architecture rules
Less review — fewer any types, fewer client components by default
SEO-ready output — metadata and semantic HTML baked into instructions
Team sharing — one prompt for the whole repo

一致性 — 每次 AI 会话遵循相同架构规范
减少返工 — 少滥用 any、少不必要的 client 组件
SEO 友好 — 指令中包含 metadata 与语义化 HTML
团队共享 — 全仓库统一 Prompt 标准

How to Use in Cursor在 Cursor 中的用法

Customize project name and optional stack above.
Toggle sections (Next.js, Tailwind, SEO, etc.).
Click Copy Prompt.
Paste into Cursor Rules (.cursor/rules), Project Instructions, or the first Agent message.

在上方填写项目名称与可选技术栈。
勾选需要的模块（Next.js、Tailwind、SEO 等）。
点击 Copy Prompt 复制。
粘贴到 Cursor Rules、Project Instructions 或新 Agent 对话的第一条消息中。

What Each Section Covers各模块说明

Section	Focus
Role	TypeScript, lean code, modern stack baseline
Next.js 15	App Router, Server Components, async params
Tailwind	Mobile-first, glass UI, slate palette
SEO	SSG, metadata export, semantic HTML
Output	Production code, loading states, Markdown docs

FAQ

Should I use Rules or paste per chat?: For a single repo, Cursor Rules persist across sessions. For one-off tasks, paste at the start of an Agent chat. Keep the prompt under ~2k tokens when possible.
用 Rules 还是每次粘贴？: 固定项目建议写入 Cursor Rules；临时任务可在 Agent 对话开头粘贴。Prompt 尽量控制在约 2000 token 以内。