web-front

---

name: web-front description: | 网站前端生成技能。根据用户需求生成HTML/CSS/JS前端页面， 自动保存到指定目录并在浏览器中打开预览。 学习主流网站的设计并记录在学习资源目录中。 metadata: {"clawdbot":{"emoji":"🌐","priority":50}}

---

网站前端生成

根据用户描述生成前端网页，自动保存并在浏览器中预览。

输出目录

所有生成的网页文件保存在：

{baseDir}/html/

使用流程

步骤 1：理解需求

分析用户想要什么样的网页：

页面类型（落地页、表单、展示页、游戏等）

风格要求（简约、炫酷、商务、可爱等）

功能需求（动画、交互、响应式等）

步骤 2：生成文件

根据需求生成以下文件：

html/
├── {项目名}/
│   ├── index.html      # 主页面
│   ├── style.css       # 样式文件（可选）
│   └── script.js       # 脚本文件（可选）

命名规则：

项目名使用英文小写 + 连字符，如 my-landing-page

单页面可直接命名为 index.html

步骤 3：保存文件

使用 Write 工具将生成的代码保存到对应目录：

{baseDir}/html/{项目名}/index.html
{baseDir}/html/{项目名}/style.css
{baseDir}/html/{项目名}/script.js

步骤 4：打开浏览器预览

生成完成后，使用系统命令在浏览器中打开：

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       # 优秀案例收集

每个文件都包含该领域的核心知识和最佳实践，生成网页时会自动读取并应用。

学习流程

当用户请求生成网页时：

1. 读取学习资料：先读取 learning/ 目录下的相关学习文件 2. 分析需求匹配：根据用户需求匹配对应的设计模式和组件 3. 应用最佳实践：将学到的技巧应用到生成的代码中 4. 持续改进：每次生成后总结经验，更新学习资料

主流学习平台

生成代码时参考以下平台的优秀实践：

| 平台 | 网址 | 学习重点 | |------|------|----------| | 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 | 技术产品落地页 |

学习触发条件

以下情况会主动学习并更新资料：

用户要求"参考 xxx 风格"

用户对生成结果不满意

用户要求"做得更好看"

遇到新的设计趋势

学习资料内容要求

每个学习文件应包含：

design-patterns.md - 设计模式

常见的布局模式（Z-pattern、F-pattern、Golden pattern）

导航设计模式

卡片设计模式

响应式 breakpoints

color-schemes.md - 配色方案

主色、辅助色、中性色定义

渐变色使用规范

深色模式配色

色彩心理学应用

animations.md - 动画效果

过渡效果时长（200-500ms）

缓动函数选择

微交互设计

滚动动画

components.md - 组件模板

按钮的各种状态

卡片组件

表单组件

导航栏

Hero 区域

typography.md - 字体排版

字体大小比例（1.25/1.333）

行高规范

字重选择

中英文混排

inspirations.md - 优秀案例

收集的灵感链接

设计亮点分析

可复用的设计思路

质量检查清单

每次生成网页后自检：

[ ] 布局：是否符合常见设计模式

[ ] 配色：是否符合配色规范

[ ] 字体：是否有层次感

[ ] 间距：是否保持一致

[ ] 动画：是否流畅自然

[ ] 响应式：是否适配各种屏幕

[ ] 可访问性：颜色对比度是否足够

代码规范

HTML

CSS

使用现代 CSS 特性（Flexbox、Grid、CSS Variables）

支持响应式设计

添加必要的动画效果

遵循 BEM 或其他命名规范

使用 CSS 变量管理主题色

JavaScript

使用 ES6+ 语法

代码简洁清晰

添加必要的事件处理

使用 IntersectionObserver 实现滚动动画

使用 requestAnimationFrame 优化动画性能

示例

用户请求

> 帮我生成一个个人介绍页面，简约风格，包含头像、名字、简介和社交链接

生成结果

html/
└── personal-intro/
    ├── index.html
    ├── style.css
    └── avatar.svg

自动打开

生成完成后自动在默认浏览器中打开 index.html。

常见页面类型

| 类型 | 说明 | 特点 | |------|------|------| | 落地页 | 产品/服务介绍 | 突出CTA、视觉冲击 | | 个人主页 | 个人介绍展示 | 头像、简介、链接 | | 表单页 | 数据收集 | 表单验证、提交 | | 展示页 | 作品/项目展示 | 图片画廊、卡片布局 | | 登录页 | 用户认证 | 表单、社交登录 | | 游戏页 | 小游戏 | Canvas、交互逻辑 |

注意事项

1. 单文件优先：简单页面尽量合并到单个 HTML 文件中（内联 CSS/JS） 2. 资源路径：使用相对路径，确保本地打开时资源正常加载 3. 编码格式：统一使用 UTF-8 编码 4. 移动适配：添加 viewport meta 标签，支持移动端浏览 5. 浏览器兼容：避免使用过于前沿的特性，确保主流浏览器兼容

快速模板

单文件模板

适用于简单页面，所有代码在一个 HTML 文件中：

网站管理

列出所有网站

当用户说"列出所有网站"、"有哪些网站"、"查看网站列表"时：

1. 扫描 {baseDir}/html/ 目录 2. 列出所有子目录（每个子目录代表一个网站项目） 3. 显示每个项目的基本信息

示例输出：

📁 已生成的网站列表：
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"时：

1. 在 {baseDir}/html/ 中查找对应项目 2. 使用系统命令在浏览器中打开

命令：

# Windows
start "" "{baseDir}/html/{项目名}/index.html"
macOS
open "{baseDir}/html/{项目名}/index.html"
Linux
xdg-open "{baseDir}/html/{项目名}/index.html"

修改网站

当用户说"修改 xxx 网站"、"更新 xxx 页面"时：

1. 先读取现有文件内容 2. 根据用户需求修改代码 3. 保存更新后的文件 4. 可选择自动刷新浏览器预览

修改流程：

用户请求修改 → 读取现有文件 → 理解修改需求 → 更新代码 → 保存 → 预览

删除网站

当用户说"删除 xxx 网站"、"移除 xxx 项目"时：

1. 确认删除操作（避免误删） 2. 删除整个项目目录

删除命令：

# 删除整个项目目录
rm -rf "{baseDir}/html/{项目名}"

安全确认：

⚠️ 确认删除
项目名称：{项目名}
项目路径：{baseDir}/html/{项目名}/
包含文件：index.html, style.css, ...
确定要删除吗？此操作不可恢复。

重命名网站

当用户说"重命名 xxx 为 yyy"时：

1. 检查新名称是否已存在 2. 重命名项目目录

命令：

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
    └── ...