메뉴
官网前台框架生成器。采用 Vue3 + Element Plus + Vite + TypeScript + Mock.js。用于快速创建完整的企业官网、产品官网等用户前台系统。使用场景：(1) 需要创建新的官网项目，(2) 用户描述了导航结构、页面类型（首页/产品/关于我们/新闻/联系我们等）、主题颜色等需求，(3) 用户提供官网设计稿，通过分析图片中的导航结构、配色方案、页面布局来生成官网，(4) 需要一个带 Mock 数据的前端项目（无需后端），(5) 快速搭建官网原型。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
移动端应用框架生成器。采用 Vue3 + Vant + Vite + TypeScript + Mock.js。用于快速创建完整的移动端 H5 应用。使用场景：(1) 需要创建新的移动端项目，(2) 用户描述了底部导航结构、页面类型（列表/表单/详情）、主题颜色等需求，(3) 用户提供移动端设计稿，通过分析图片中的 Tabbar 结构、配色方案、页面布局来生成应用，(4) 需要一个带 Mock 数据的移动端前端项目（无需后端），(5) 快速搭建移动端应用原型。
生成或细化需求说明书文档。支持完整文档生成和局部细化两种模式。适用场景：(1) 将需求概述转换为完整的需求说明书，(2) 对已有文档的特定章节进行详细补充和细化，(3) 只生成某个功能模块的详细说明，(4) 需要标准化的需求文档格式，支持多端系统（Web管理后台、Web学员端、移动App等）
管理后台框架生成器。采用Vue3 + Element Plus + Vite + TypeScript + Mock.js 。用于快速创建完整的 Web 管理后台系统。使用场景：(1) 需要创建新的管理后台项目，(2) 用户描述了登录页样式、布局方式(左右布局/顶部导航等)、菜单结构、主题颜色等需求，(3) 用户提供参考图或手稿图,通过分析图片中的布局结构、配色方案、菜单结构来生成后台系统，(4) 需要一个带 Mock 数据的前端项目(无需后端)，(5) 快速搭建管理系统原型。
生成或细化需求说明书文档。支持完整文档生成和局部细化两种模式。适用场景：(1) 将需求概述转换为完整的需求说明书，(2) 对已有文档的特定章节进行详细补充和细化，(3) 只生成某个功能模块的详细说明，(4) 需要标准化的需求文档格式，支持多端系统（Web管理后台、Web学员端、移动App等）
管理后台框架生成器。采用Vue3 + Element Plus + Vite + TypeScript + Mock.js 。用于快速创建完整的 Web 管理后台系统。使用场景：(1) 需要创建新的管理后台项目，(2) 用户描述了登录页样式、布局方式(左右布局/顶部导航等)、菜单结构、主题颜色等需求，(3) 用户提供参考图或手稿图,通过分析图片中的布局结构、配色方案、菜单结构来生成后台系统，(4) 需要一个带 Mock 数据的前端项目(无需后端)，(5) 快速搭建管理系统原型。
在长对话中创建检查点，保存任务状态和关键信息，帮助在新对话中快速恢复工作进度。触发场景：用户说「创建检查点」「保存进度」「对话太长了」「上下文快满了」，或长时间对话后需要开始新会话。
| name | website-generator |
| description | 官网前台框架生成器。采用 Vue3 + Element Plus + Vite + TypeScript + Mock.js。用于快速创建完整的企业官网、产品官网等用户前台系统。使用场景：(1) 需要创建新的官网项目，(2) 用户描述了导航结构、页面类型（首页/产品/关于我们/新闻/联系我们等）、主题颜色等需求，(3) 用户提供官网设计稿，通过分析图片中的导航结构、配色方案、页面布局来生成官网，(4) 需要一个带 Mock 数据的前端项目（无需后端），(5) 快速搭建官网原型。 |
根据用户描述的需求（导航结构、页面类型、主题颜色等）或提供的设计稿，快速生成一个完整的 Vue3 + Element Plus 官网前台项目，包含完整的项目结构、路由配置、Mock 数据，开箱即用。
支持两种输入方式：
支持两种方式提供需求：
从用户描述中提取以下信息：
必需信息：
可选信息：
#409eff#ffffff#333333#2c3e50功能分类示例：
公开访问页面（无需登录）：
需要登录的页面：
询问用户的问题：
当用户提供设计稿时，需要分析以下内容：
布局结构分析：
颜色提取：
导航结构识别：
其他视觉元素：
分析步骤：
注意事项：
如信息不完整，使用默认值或询问用户。
重要：项目必须在当前工作目录直接创建，不要创建子目录！
将 assets/template/ 目录下的完整项目复制到当前工作目录：
cp -r assets/template/* ./
注意事项：
/path/to/new-project/ 这样的子目录.claude 目录同级模板包含：
根据收集的需求信息，修改以下文件：
修改 src/styles/variables.css：
:root {
/* 主题色 */
--primary-color: #409eff; /* 根据需求修改 */
/* 导航栏 */
--nav-bg-color: #ffffff;
--nav-text-color: #333333;
--nav-active-color: #409eff;
/* 页脚 */
--footer-bg-color: #2c3e50;
--footer-text-color: #ffffff;
}
根据导航菜单，修改 src/router/modules/ 下的路由文件：
// src/router/modules/main.ts
import { RouteRecordRaw } from 'vue-router'
const mainRoutes: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: () => import('@/views/home/index.vue'),
meta: { title: '首页' }
},
{
path: '/products',
name: 'Products',
component: () => import('@/views/products/index.vue'),
meta: { title: '产品中心' }
},
{
path: '/about',
name: 'About',
component: () => import('@/views/about/index.vue'),
meta: { title: '关于我们' }
}
// 根据需求添加更多路由...
]
export default mainRoutes
修改 src/config/menu.ts：
export const menuConfig = [
{ name: '首页', path: '/' },
{ name: '产品中心', path: '/products' },
{ name: '解决方案', path: '/solutions' },
{ name: '关于我们', path: '/about' },
{ name: '新闻动态', path: '/news' },
{ name: '联系我们', path: '/contact' }
]
修改 src/config/site.ts：
export const siteConfig = {
name: '公司名称',
logo: '/logo.png',
description: '公司简介',
keywords: 'SEO关键词',
// 联系信息
contact: {
phone: '400-xxx-xxxx',
email: 'contact@example.com',
address: '公司地址'
},
// 社交媒体
social: {
wechat: '',
weibo: '',
linkedin: ''
}
}
根据路由配置，在 src/views/ 下创建对应的页面文件：
# 创建页面目录
mkdir -p src/views/{home,products,about,news,contact}
# 创建页面文件
touch src/views/home/index.vue
touch src/views/products/index.vue
touch src/views/about/index.vue
touch src/views/news/index.vue
touch src/views/contact/index.vue
每个页面使用统一的模板结构：
<template>
<div class="page-container">
<h1>{{ title }}</h1>
<p>页面内容待完善</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const title = ref('页面标题')
</script>
<style scoped>
.page-container {
padding: 40px 20px;
min-height: 500px;
}
</style>
项目创建完成后，按以下顺序执行命令：
步骤 1: 安装依赖
cd /path/to/new-project
npm install
步骤 2: 验证构建（重要！）
npm run build
这一步非常重要，可以提前发现：
如果构建失败：
npm run build 验证只有构建成功后，才进行下一步。
步骤 3: 启动开发服务器
npm run dev
<script setup>project/
├── public/ # 静态资源
│ └── logo.png
├── src/
│ ├── assets/ # 资源文件
│ │ ├── images/
│ │ └── styles/
│ ├── components/ # 组件
│ │ ├── common/ # 通用组件
│ │ ├── layout/ # 布局组件
│ │ ├── business/ # 业务组件
│ │ └── page-templates/ # 页面模板
│ ├── config/ # 配置文件
│ │ ├── menu.ts # 菜单配置
│ │ └── site.ts # 网站配置
│ ├── layout/ # 布局
│ │ ├── Header.vue # 导航栏
│ │ ├── Footer.vue # 页脚
│ │ └── MainLayout.vue # 主布局
│ ├── router/ # 路由
│ │ ├── index.ts
│ │ └── modules/ # 路由模块
│ ├── stores/ # 状态管理
│ ├── styles/ # 样式
│ │ ├── variables.css
│ │ └── main.css
│ ├── utils/ # 工具函数
│ ├── views/ # 页面
│ │ ├── home/ # 首页
│ │ ├── products/ # 产品页
│ │ ├── about/ # 关于我们
│ │ ├── news/ # 新闻动态
│ │ └── contact/ # 联系我们
│ ├── App.vue
│ └── main.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
生成的项目默认包含以下页面：
生成项目后，可以参考以下文档：
references/layout-configuration.md - 布局配置指南references/theme-customization.md - 主题定制指南references/router-configuration.md - 路由配置指南references/component-organization.md - 组件组织规范references/seo-optimization.md - SEO 优化指南需求：
- 网站类型：企业官网
- 导航菜单：首页、产品中心、解决方案、关于我们、新闻动态、联系我们
- 主题色：#1890ff
- 风格：商务简约
需求：
- 网站类型：产品官网
- 导航菜单：首页、产品特性、定价、文档、博客、登录
- 主题色：#52c41a
- 风格：科技感
A:
src/views/ 下创建新页面目录和文件src/router/modules/ 中添加路由配置src/config/menu.ts 中添加菜单项A: 修改 src/styles/variables.css 中的 CSS 变量
A: 修改 src/layout/Header.vue 组件
A: 需要集成 vue-i18n 插件，参考官方文档配置