什么是 React Next.js 项目生成器？

React Next.js 项目生成器是一款高性能自动化工具，旨在弥补设计与开发之间的差距。通过利用先进的 AI 分析，它能够解析 UI 设计文件和功能规范，从而搭建出完整、即用的 Web 应用程序。此技能是 Openclaw Skills 集合中的强大补充，可确保前端架构的一致性。

它专门利用现代技术栈，包括用于构建稳健组件的 Ant Design、用于实用优先样式的 Tailwind CSS 以及用于轻量级状态管理的 Zustand。无论是构建原型还是可扩展的企业级应用，此技能都能简化初始开发阶段，让开发人员专注于复杂逻辑而非样板代码。

下载入口:https://github.com/openclaw/skills/tree/main/skills/batype/react-nextjs-generator

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

React Next.js 项目生成器 应用场景

• 从线框图或高保真 UI 设计快速原型化 Web 应用程序。
• 使用包含 Next.js、AntD 和 Tailwind 的标准化技术栈引导新的企业项目。
• 将功能需求文档转换为交互式 React 页面结构。
• 在多个开发团队中标准化项目架构和文件夹约定。

1. 接收并分析用户上传的需求文档和 UI 设计图片。
2. 提取关键功能需求、导航流程和视觉设计令牌。
3. 按照 Next.js App Router 或 Pages Router 最佳实践初始化结构化目录系统。
4. 生成 Tailwind CSS、Ant Design 和 TypeScript 的核心配置文件。
5. 根据设计分析构建模块化页面组件和 UI 元素。
6. 使用 Zustand 实现状态管理库，以处理应用数据和全局状态。
7. 应用最终样式配置，确保与源设计的视觉一致性。

React Next.js 项目生成器 配置指南

要在 Openclaw Skills 生态系统中使用此功能，请确保您的环境已准备好进行现代前端开发。使用以下命令准备基础环境：

# 如果从头开始，初始化一个新的 Next.js 项目
npx create-next-app@latest my-app --typescript --tailwind

# 安装生成器使用的核心依赖项
cd my-app
npm install antd zustand @ant-design/icons

环境准备就绪后，请将您的 UI 截图和 PRD 文件提供给智能体以开始生成过程。

React Next.js 项目生成器 数据架构与分类体系

该技能使用标准化的目录布局组织项目，以确保可维护性：

React Next.js 项目生成器技能

描述

根据需求文档和UI设计图生成完整的React + Next.js项目，使用Ant Design、Tailwind CSS和Zustand技术栈。

使用方法

当用户上传需求文档和UI设计图时，执行以下步骤：

1. 分析需求文档内容
2. 解析UI设计图元素
3. 生成项目结构
4. 创建页面组件
5. 配置状态管理
6. 设置样式系统

技术栈

• React
• Next.js
• Ant Design (antd)
• Tailwind CSS
• Zustand (状态管理)

工作流程

1. 接收需求文档和UI图
2. 分析并提取关键信息
3. 创建项目目录结构
4. 生成基础配置文件
5. 创建页面和组件
6. 集成状态管理
7. 应用样式配置