菜单
官网前台框架生成器。采用 Vue3 + Element Plus + Vite + TypeScript + Mock.js。用于快速创建完整的企业官网、产品官网等用户前台系统。使用场景：(1) 需要创建新的官网项目，(2) 用户描述了导航结构、页面类型（首页/产品/关于我们/新闻/联系我们等）、主题颜色等需求，(3) 用户提供官网设计稿，通过分析图片中的导航结构、配色方案、页面布局来生成官网，(4) 需要一个带 Mock 数据的前端项目（无需后端），(5) 快速搭建官网原型。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/wang-q-l/ai-web --skill website-generator命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| 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 插件，参考官方文档配置