Back to Details

create-docs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Create Docs

创建文档

Generate a complete, production-ready documentation site for any project.
为任意项目生成完整的、可用于生产环境的文档站点。

Workflow

工作流程

  1. Analyze - Detect package manager, monorepo structure, read context
  2. Initialize - Create docs directory with correct setup
  3. Generate - Write documentation pages using templates
  4. Configure - Set up AI integration (MCP, llms.txt)
  5. Finalize - Provide next steps with correct commands
  1. 分析 - 检测包管理器、单仓结构、读取上下文
  2. 初始化 - 创建带有正确配置的docs目录
  3. 生成 - 使用模板编写文档页面
  4. 配置 - 设置AI集成（MCP、llms.txt）
  5. 收尾 - 提供带有正确命令的后续步骤

Package Manager Reference

包管理器参考

Detect from lock files, default to npm if none found:
Lock FilePMInstallRunAdd
pnpm-lock.yaml
pnpm
pnpm install
pnpm run
pnpm add
package-lock.json
npm
npm install
npm run
npm install
yarn.lock
yarn
yarn install
yarn
yarn add
bun.lockb
bun
bun install
bun run
bun add
Use 
[pm]
as placeholder in commands below.
从锁文件检测，若未检测到则默认使用npm：
锁文件包管理器安装命令运行命令添加依赖命令
pnpm-lock.yaml
pnpm
pnpm install
pnpm run
pnpm add
package-lock.json
npm
npm install
npm run
npm install
yarn.lock
yarn
yarn install
yarn
yarn add
bun.lockb
bun
bun install
bun run
bun add
使用
[pm]
作为下方命令中的占位符。

Step 1: Analyze Project

步骤1：分析项目

Detect Project Structure

检测项目结构

Check for:
├── pnpm-workspace.yaml   → pnpm monorepo
├── turbo.json            → Turborepo monorepo
├── lerna.json            → Lerna monorepo
├── nx.json               → Nx monorepo
├── apps/                 → Apps directory (monorepo)
├── packages/             → Packages directory (monorepo)
├── docs/                 → Existing docs (avoid overwriting)
├── README.md             → Main documentation source
└── src/ or lib/          → Source code location
检查以下内容：
├── pnpm-workspace.yaml   → pnpm单仓
├── turbo.json            → Turborepo单仓
├── lerna.json            → Lerna单仓
├── nx.json               → Nx单仓
├── apps/                 → 应用目录（单仓）
├── packages/             → 包目录（单仓）
├── docs/                 → 已存在的文档（避免覆盖）
├── README.md             → 主文档源
└── src/ 或 lib/          → 源码位置

Determine Docs Location

确定文档位置

Project TypeTarget DirectoryWorkspace Entry
Standard project
./docs
N/A
Monorepo with 
apps/
./apps/docs
apps/docs
Monorepo with 
packages/
./docs
docs
Existing 
docs/
folder		Ask user or 
./documentation
—
项目类型目标目录工作区入口
标准项目
./docs
N/A
带有
apps/
的单仓
./apps/docs
apps/docs
带有
packages/
的单仓
./docs
docs
已存在
docs/
文件夹		询问用户或使用
./documentation
—

Read Context Files

读取上下文文件

FileExtract
README.md
Project name, description, features, usage examples
package.json
Name, description, dependencies, repository URL
src/
or 
lib/
Exported functions, composables for API docs
文件提取内容
README.md
项目名称、描述、特性、使用示例
package.json
名称、描述、依赖、仓库URL
src/
或 
lib/
导出的函数、组合式函数（用于API文档）

Detect i18n Requirement

检测国际化需求

Check if project needs multi-language docs:
IndicatorAction
@nuxtjs/i18n
in dependencies		Use i18n template
locales/
or 
i18n/
folder exists		Use i18n template
Multiple language README filesUse i18n template
User explicitly mentions multiple languagesUse i18n template
None of the aboveUse default template
检查项目是否需要多语言文档：
标识操作
依赖中包含
@nuxtjs/i18n
使用国际化模板
存在
locales/
或
i18n/
文件夹		使用国际化模板
存在多语言README文件使用国际化模板
用户明确提及多语言使用国际化模板
以上均不满足使用默认模板

Step 2: Initialize Docs

步骤2：初始化文档

Create Directory Structure

创建目录结构

Default template:
[docs-location]/
├── app/                            # Optional: for customization
│   ├── app.config.ts
│   ├── components/
│   ├── layouts/
│   └── pages/
├── content/
│   ├── index.md
│   └── 1.getting-started/
│       ├── .navigation.yml
│       └── 1.introduction.md
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore
i18n template (if multi-language detected):
[docs-location]/
├── app/
│   └── app.config.ts
├── content/
│   ├── en/
│   │   ├── index.md
│   │   └── 1.getting-started/
│   │       ├── .navigation.yml
│   │       └── 1.introduction.md
│   └── fr/                         # Or other detected languages
│       ├── index.md
│       └── 1.getting-started/
│           ├── .navigation.yml
│           └── 1.introduction.md
├── nuxt.config.ts                  # Required for i18n config
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore
默认模板：
[docs-location]/
├── app/                            # 可选：用于自定义
│   ├── app.config.ts
│   ├── components/
│   ├── layouts/
│   └── pages/
├── content/
│   ├── index.md
│   └── 1.getting-started/
│       ├── .navigation.yml
│       └── 1.introduction.md
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore
国际化模板（若检测到多语言需求）：
[docs-location]/
├── app/
│   └── app.config.ts
├── content/
│   ├── en/
│   │   ├── index.md
│   │   └── 1.getting-started/
│   │       ├── .navigation.yml
│   │       └── 1.introduction.md
│   └── fr/                         # 或其他检测到的语言
│       ├── index.md
│       └── 1.getting-started/
│           ├── .navigation.yml
│           └── 1.introduction.md
├── nuxt.config.ts                  # 国际化配置必需
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore

Create package.json

创建package.json

Default:
json
{
  "name": "[project-name]-docs",
  "private": true,
  "scripts": {
    "dev": "nuxt dev --extends docus",
    "build": "nuxt build --extends docus",
    "generate": "nuxt generate --extends docus",
    "preview": "nuxt preview --extends docus"
  },
  "dependencies": {
    "docus": "latest",
    "better-sqlite3": "^12.5.0",
    "nuxt": "^4.2.2"
  }
}
i18n (add 
@nuxtjs/i18n
):
json
{
  "name": "[project-name]-docs",
  "private": true,
  "scripts": {
    "dev": "nuxt dev --extends docus",
    "build": "nuxt build --extends docus",
    "generate": "nuxt generate --extends docus",
    "preview": "nuxt preview --extends docus"
  },
  "dependencies": {
    "@nuxtjs/i18n": "^10.2.1",
    "docus": "latest",
    "better-sqlite3": "^12.5.0",
    "nuxt": "^4.2.2"
  }
}
默认：
json
{
  "name": "[project-name]-docs",
  "private": true,
  "scripts": {
    "dev": "nuxt dev --extends docus",
    "build": "nuxt build --extends docus",
    "generate": "nuxt generate --extends docus",
    "preview": "nuxt preview --extends docus"
  },
  "dependencies": {
    "docus": "latest",
    "better-sqlite3": "^12.5.0",
    "nuxt": "^4.2.2"
  }
}
国际化版本（添加
@nuxtjs/i18n
）：
json
{
  "name": "[project-name]-docs",
  "private": true,
  "scripts": {
    "dev": "nuxt dev --extends docus",
    "build": "nuxt build --extends docus",
    "generate": "nuxt generate --extends docus",
    "preview": "nuxt preview --extends docus"
  },
  "dependencies": {
    "@nuxtjs/i18n": "^10.2.1",
    "docus": "latest",
    "better-sqlite3": "^12.5.0",
    "nuxt": "^4.2.2"
  }
}

Create nuxt.config.ts (i18n only)

创建nuxt.config.ts（仅国际化版本需要）

ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', language: 'en-US', name: 'English' },
      { code: 'fr', language: 'fr-FR', name: 'Français' }
    ],
    defaultLocale: 'en'
  }
})
ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', language: 'en-US', name: 'English' },
      { code: 'fr', language: 'fr-FR', name: 'Français' }
    ],
    defaultLocale: 'en'
  }
})

Create .gitignore

创建.gitignore

node_modules
.nuxt
.output
.data
dist
node_modules
.nuxt
.output
.data
dist

Update Monorepo Configuration (if applicable)

更新单仓配置（若适用）

pnpm Monorepo

pnpm单仓

  1. Add docs to workspace and configure 
    onlyBuiltDependencies
    (required for better-sqlite3):
yaml
packages:
  - 'apps/*'
  - 'docs'

onlyBuiltDependencies:
  - better-sqlite3
  1. Add dev script to root package.json:
json
{
  "scripts": {
    "docs:dev": "pnpm run --filter [docs-package-name] dev"
  }
}
Or with directory path:
json
{
  "scripts": {
    "docs:dev": "cd docs && pnpm dev"
  }
}
  1. 将文档添加到工作区并配置
    onlyBuiltDependencies
    （better-sqlite3必需）：
yaml
packages:
  - 'apps/*'
  - 'docs'

onlyBuiltDependencies:
  - better-sqlite3
  1. 为根package.json添加开发脚本：
json
{
  "scripts": {
    "docs:dev": "pnpm run --filter [docs-package-name] dev"
  }
}
或使用目录路径：
json
{
  "scripts": {
    "docs:dev": "cd docs && pnpm dev"
  }
}

npm/yarn Monorepo

npm/yarn单仓

json
{
  "workspaces": ["apps/*", "docs"],
  "scripts": {
    "docs:dev": "npm run dev --workspace=docs"
  }
}
json
{
  "workspaces": ["apps/*", "docs"],
  "scripts": {
    "docs:dev": "npm run dev --workspace=docs"
  }
}

Step 3: Generate Documentation

步骤3：生成文档

Use templates from references/templates.md.
CRITICAL: MDC Component Naming
All Nuxt UI components in MDC must use the 
u-
prefix:
CorrectWrong
::u-page-hero
::page-hero
::u-page-section
::page-section
:::u-page-feature
:::page-feature
:::u-button
:::button
::::u-page-card
::::page-card
Without the 
u-
prefix, Vue will fail to resolve the components.
使用references/templates.md中的模板。
关键：MDC组件命名规则
MDC中的所有Nuxt UI组件必须使用
u-
前缀：
正确写法错误写法
::u-page-hero
::page-hero
::u-page-section
::page-section
:::u-page-feature
:::page-feature
:::u-button
:::button
::::u-page-card
::::page-card
如果不使用
u-
前缀，Vue将无法解析组件。

Documentation Structure

文档结构

content/
├── index.md                        # Landing page
├── 1.getting-started/
│   ├── .navigation.yml
│   ├── 1.introduction.md
│   └── 2.installation.md
├── 2.guide/
│   ├── .navigation.yml
│   ├── 1.configuration.md
│   ├── 2.authentication.md
│   └── 3.deployment.md
└── 3.api/                          # If applicable
    ├── .navigation.yml
    └── 1.reference.md
content/
├── index.md                        # 首页
├── 1.getting-started/
│   ├── .navigation.yml
│   ├── 1.introduction.md
│   └── 2.installation.md
├── 2.guide/
│   ├── .navigation.yml
│   ├── 1.configuration.md
│   ├── 2.authentication.md
│   └── 3.deployment.md
└── 3.api/                          # 若适用
    ├── .navigation.yml
    └── 1.reference.md

Generate Pages

生成页面

  1. Landing page (
    index.md
    ) - Hero + features grid
  2. Introduction - What & why, use cases
  3. Installation - Prerequisites, install commands
  4. Guide pages - Feature documentation with action-based H2 headings
For writing style, see references/writing-guide.md. For MDC components, see references/mdc-components.md.
  1. 首页（
    index.md
    ）- 英雄区 + 特性网格
  2. 介绍 - 是什么/为什么、使用场景
  3. 安装 - 前置要求、安装命令
  4. 指南页面 - 特性文档，使用基于动作的H2标题
写作风格请参考references/writing-guide.md。 MDC组件请参考references/mdc-components.md。

Step 4: Configure AI Integration

步骤4：配置AI集成

Docus automatically includes MCP server (
/mcp
) and llms.txt generation. No configuration needed.
Do NOT add AI Integration sections to the landing page. These features work automatically.
Optionally mention in the introduction page:
markdown
::note
This documentation includes AI integration with MCP server and automatic `llms.txt` generation.
::
Docus自动包含MCP服务器（
/mcp
）和llms.txt生成功能，无需额外配置。
请勿在首页添加AI集成相关章节。 这些功能会自动生效。
可选择在介绍页面中提及：
markdown
::note
本文档包含与MCP服务器的AI集成以及自动生成`llms.txt`功能。
::

Optional: app.config.ts

可选：app.config.ts

ts
export default defineAppConfig({
  docus: {
    name: '[Project Name]',
    description: '[Project description]',
    url: 'https://[docs-url]',
    socials: {
      github: '[org]/[repo]'
    }
  }
})
ts
export default defineAppConfig({
  docus: {
    name: '[Project Name]',
    description: '[Project description]',
    url: 'https://[docs-url]',
    socials: {
      github: '[org]/[repo]'
    }
  }
})

Optional: Theme Customization

可选：主题自定义

If the project has a design system or brand colors, customize the docs theme.
如果项目有设计系统或品牌色，可自定义文档主题。

Custom CSS

自定义CSS

Create 
app/assets/css/main.css
:
css
@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  /* Custom font */
  --font-sans: 'Inter', sans-serif;

  /* Custom container width */
  --ui-container: 90rem;

  /* Custom primary color (use project brand color) */
  --color-primary-50: oklch(0.97 0.02 250);
  --color-primary-500: oklch(0.55 0.2 250);
  --color-primary-900: oklch(0.25 0.1 250);
}
创建
app/assets/css/main.css
：
css
@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  /* 自定义字体 */
  --font-sans: 'Inter', sans-serif;

  /* 自定义容器宽度 */
  --ui-container: 90rem;

  /* 自定义主色调（使用项目品牌色） */
  --color-primary-50: oklch(0.97 0.02 250);
  --color-primary-500: oklch(0.55 0.2 250);
  --color-primary-900: oklch(0.25 0.1 250);
}

Extended app.config.ts

扩展app.config.ts

ts
export default defineAppConfig({
  docus: {
    name: '[Project Name]',
    description: '[Project description]',
    url: 'https://[docs-url]',
    socials: {
      github: '[org]/[repo]',
      x: '@[handle]'
    }
  },
  // Customize UI components
  ui: {
    colors: {
      primary: 'emerald',
      neutral: 'zinc',
    },
    pageHero: {
      slots: {
        title: 'font-semibold sm:text-6xl'
      }
    }
  }
})
ts
export default defineAppConfig({
  docus: {
    name: '[Project Name]',
    description: '[Project description]',
    url: 'https://[docs-url]',
    socials: {
      github: '[org]/[repo]',
      x: '@[handle]'
    }
  },
  // 自定义UI组件
  ui: {
    colors: {
      primary: 'emerald',
      neutral: 'zinc',
    },
    pageHero: {
      slots: {
        title: 'font-semibold sm:text-6xl'
      }
    }
  }
})

Step 5: Finalize

步骤5：收尾

Provide instructions using detected package manager.
使用检测到的包管理器提供操作说明。

Standard Project

标准项目

Documentation created in [docs-location]

To start:

  cd [docs-location]
  [pm] install
  [pm] run dev

Available at http://localhost:3000
文档已创建在[docs-location]

启动方式：

  cd [docs-location]
  [pm] install
  [pm] run dev

访问地址：http://localhost:3000

Monorepo

单仓项目

Documentation created in [docs-location]

To start from root:

  [pm] install
  [pm] run docs:dev

Or from docs directory:

  cd [docs-location]
  [pm] run dev

Available at http://localhost:3000
文档已创建在[docs-location]

从根目录启动：

  [pm] install
  [pm] run docs:dev

或从文档目录启动：

  cd [docs-location]
  [pm] run dev

访问地址：http://localhost:3000

Features Included

包含的特性

  • Full-text search
  • Dark mode
  • MCP server for AI tools (/mcp)
  • LLM integration (/llms.txt)
  • SEO optimized
  • 全文搜索
  • 深色模式
  • 用于AI工具的MCP服务器（/mcp）
  • LLM集成（/llms.txt）
  • SEO优化

Next Steps

后续步骤

  1. Review generated content
  2. Add more guides in 
    content/2.guide/
  3. Customize theme in 
    app.config.ts
  4. Deploy to Vercel/Netlify/Cloudflare
  1. 审核生成的内容
  2. 在
    content/2.guide/
    中添加更多指南
  3. 在
    app.config.ts
    中自定义主题
  4. 部署到Vercel/Netlify/Cloudflare

Suggest Follow-ups

建议的后续优化

After documentation is created, suggest enhancements:
Your documentation is ready!

Would you like me to:
- **Customize the UI** - Match your brand colors and style
- **Enhance the landing page** - Add feature cards, code previews, visuals
- **Add i18n support** - Multi-language documentation
- **Set up deployment** - Deploy to Vercel, Netlify, or Cloudflare

Let me know what you'd like to improve!
文档创建完成后，可建议以下增强项：
您的文档已准备就绪！

是否需要我帮您：
- **自定义UI** - 匹配您的品牌色和风格
- **优化首页** - 添加特性卡片、代码预览、视觉元素
- **添加国际化支持** - 多语言文档
- **配置部署** - 部署到Vercel、Netlify或Cloudflare

请告知您想要优化的内容！

Deployment

部署

PlatformCommandOutput
Vercel
npx vercel --prod
Auto-detected
Netlify
[pm] run generate
.output/public
Cloudflare Pages
[pm] run generate
.output/public
GitHub Pages
[pm] run generate
.output/public
平台命令输出目录
Vercel
npx vercel --prod
自动检测
Netlify
[pm] run generate
.output/public
Cloudflare Pages
[pm] run generate
.output/public
GitHub Pages
[pm] run generate
.output/public

Example: auth-utils

示例：auth-utils

Detected: pnpm monorepo, package in packages/
Generated structure:
docs/
├── content/
│   ├── index.md
│   ├── 1.getting-started/
│   │   ├── .navigation.yml
│   │   ├── 1.introduction.md
│   │   └── 2.installation.md
│   ├── 2.guide/
│   │   ├── .navigation.yml
│   │   ├── 1.authentication.md
│   │   ├── 2.oauth-providers.md
│   │   └── 3.sessions.md
│   └── 3.api/
│       ├── .navigation.yml
│       └── 1.composables.md
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore
Inside 
authentication.md
 (action-based H2 headings):
markdown
undefined
检测结果： pnpm单仓，包位于packages/目录
生成的结构：
docs/
├── content/
│   ├── index.md
│   ├── 1.getting-started/
│   │   ├── .navigation.yml
│   │   ├── 1.introduction.md
│   │   └── 2.installation.md
│   ├── 2.guide/
│   │   ├── .navigation.yml
│   │   ├── 1.authentication.md
│   │   ├── 2.oauth-providers.md
│   │   └── 3.sessions.md
│   └── 3.api/
│       ├── .navigation.yml
│       └── 1.composables.md
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore
authentication.md
内部示例（基于动作的H2标题）：
markdown
undefined

Add basic authentication

添加基础认证

Protect your routes

保护您的路由

Handle login redirects

处理登录重定向

Customize the session

自定义会话

undefined
undefined