메뉴
官网前台框架生成器。采用 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 표시 중
| 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 插件，参考官方文档配置
SOC 직업 분류 기준