根据用户描述生成前端网页，自动保存并在浏览器中预览。
所有生成的网页文件保存在：
{baseDir}/html/
分析用户想要什么样的网页：
根据需求生成以下文件：
html/
├── {项目名}/
│ ├── index.html # 主页面
│ ├── style.css # 样式文件（可选）
│ └── script.js # 脚本文件（可选）
命名规则：
my-landing-page
index.html
使用 Write 工具将生成的代码保存到对应目录：
{baseDir}/html/{项目名}/index.html
{baseDir}/html/{项目名}/style.css
{baseDir}/html/{项目名}/script.js
生成完成后，使用系统命令在浏览器中打开：
Windows：
start "" "{baseDir}/html/{项目名}/index.html"
macOS：
open "{baseDir}/html/{项目名}/index.html"
Linux：
xdg-open "{baseDir}/html/{项目名}/index.html"
为了提升生成质量，本技能会主动学习主流前端平台的优秀设计。
学习资料保存在 {baseDir}/learning/ 目录：
learning/
├── design-patterns.md # 设计模式与布局技巧
├── color-schemes.md # 配色方案
├── animations.md # 动画效果库
├── components.md # 常用组件模板
├── typography.md # 字体排版规范
└── inspirations.md # 优秀案例收集
每个文件都包含该领域的核心知识和最佳实践，生成网页时会自动读取并应用。
当用户请求生成网页时：
learning/ 目录下的相关学习文件
生成代码时参考以下平台的优秀实践：
| 平台 | 网址 | 学习重点 |
|------|------|----------|
| Dribbble | https://dribbble.com | UI设计灵感、配色方案 |
| Awwwards | https://www.awwwards.com | 创意交互、动效设计 |
| CodePen | https://codepen.io | 前端代码实现、组件模板 |
| CSS-Tricks | https://css-tricks.com | CSS技巧、布局方案 |
| Tailwind UI | https://tailwindui.com | 组件设计、响应式模式 |
| Stripe | https://stripe.com | 现代商务风格 |
| Apple | https://apple.com | 极简设计、动效细节 |
| Vercel | https://vercel.com | 技术产品落地页 |
以下情况会主动学习并更新资料：
每个学习文件应包含：
design-patterns.md - 设计模式
color-schemes.md - 配色方案
animations.md - 动画效果
components.md - 组件模板
typography.md - 字体排版
inspirations.md - 优秀案例
每次生成网页后自检：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 页面内容 -->
<script src="script.js"></script>
</body>
</html>
> 帮我生成一个个人介绍页面，简约风格，包含头像、名字、简介和社交链接
html/
└── personal-intro/
├── index.html
├── style.css
└── avatar.svg
生成完成后自动在默认浏览器中打开 index.html。
| 类型 | 说明 | 特点 |
|------|------|------|
| 落地页 | 产品/服务介绍 | 突出CTA、视觉冲击 |
| 个人主页 | 个人介绍展示 | 头像、简介、链接 |
| 表单页 | 数据收集 | 表单验证、提交 |
| 展示页 | 作品/项目展示 | 图片画廊、卡片布局 |
| 登录页 | 用户认证 | 表单、社交登录 |
| 游戏页 | 小游戏 | Canvas、交互逻辑 |
适用于简单页面，所有代码在一个 HTML 文件中：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{标题}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; }
/* 样式代码 */
</style>
</head>
<body>
<!-- 页面内容 -->
<script>
// 脚本代码
</script>
</body>
</html>
当用户说"列出所有网站"、"有哪些网站"、"查看网站列表"时：
{baseDir}/html/ 目录
示例输出：
📁 已生成的网站列表：
1. personal-intro
📄 文件：index.html, style.css
📅 创建：2026-03-20
2. todo-app
📄 文件：index.html, style.css, script.js
📅 创建：2026-03-19
3. game-snake
📄 文件：index.html
📅 创建：2026-03-18
共 3 个网站项目
当用户说"打开 xxx 网站"、"预览 xxx"时：
{baseDir}/html/ 中查找对应项目
命令：
# Windows
start "" "{baseDir}/html/{项目名}/index.html"
# macOS
open "{baseDir}/html/{项目名}/index.html"
# Linux
xdg-open "{baseDir}/html/{项目名}/index.html"
当用户说"修改 xxx 网站"、"更新 xxx 页面"时：
修改流程：
用户请求修改 → 读取现有文件 → 理解修改需求 → 更新代码 → 保存 → 预览
当用户说"删除 xxx 网站"、"移除 xxx 项目"时：
删除命令：
# 删除整个项目目录
rm -rf "{baseDir}/html/{项目名}"
安全确认：
⚠️ 确认删除
项目名称：{项目名}
项目路径：{baseDir}/html/{项目名}/
包含文件：index.html, style.css, ...
确定要删除吗？此操作不可恢复。
当用户说"重命名 xxx 为 yyy"时：
命令：
mv "{baseDir}/html/{旧名称}" "{baseDir}/html/{新名称}"
| 用户说 | 操作 |
|--------|------|
| "列出所有网站" | 扫描并显示 html/ 目录下的所有项目 |
| "打开 xxx" | 在浏览器中打开指定网站 |
| "修改 xxx" | 读取并更新指定网站的代码 |
| "删除 xxx" | 删除指定网站项目 |
| "重命名 xxx 为 yyy" | 重命名项目目录 |
| "查看 xxx 代码" | 显示指定网站的源代码 |
web_front/
├── SKILL.md # 技能说明文档
└── html/ # 生成的网页存放目录
├── project-a/
│ └── index.html
├── project-b/
│ ├── index.html
│ ├── style.css
│ └── script.js
└── ...
共 1 个版本