首页 / 技能 / web-front — 技能工具

📦 web-front — 技能工具

v1.0.0

网站前端生成技能。根据用户需求生成HTML/CSS/JS前端页面， 自动保存到指定目录并在浏览器中打开预览。 学习主流网站的设计并记录在学习资源目录中。

0· 103·0 当前·0 累计
uwvwko-zzz 头像by @uwvwko-zzz (uwvwko)·MIT-0
网络工具浏览器自动化
下载技能包
License
MIT-0
最后更新
2026/3/27
0
安全扫描
VirusTotal
可疑
查看报告
OpenClaw
可疑
medium confidence
The skill's behavior mostly matches a front-end generator, but there are a few concerning signs (hidden unicode control characters in the SKILL.md and filesystem delete/open commands) that warrant caution before installing.
评估建议
This skill is coherent with a web front-end generator, but take these precautions before installing or granting it broad access: 1) Inspect SKILL.md raw bytes (or view hidden/unicode control characters) to ensure there are no hidden instructions or obfuscated content. The scanner flagged unicode-control-chars which can hide text. 2) Confirm what {baseDir} will resolve to in your environment. The skill uses rm -rf "{baseDir}/html/{项目名}" and other file-system operations — ensure baseDir is restric...
详细分析 ▾
✓ 用途与能力
Name/description (generate HTML/CSS/JS, save to html/, open preview, learn from examples) align with the included files and declared behavior. No unrelated credentials, binaries, or installs are requested. The provided learning materials and HTML templates are consistent with a front-end generator.
⚠ 指令范围
Runtime instructions read/write files under {baseDir}/html and learning/, list/modify/delete projects, and run platform shell commands to open files in the browser (start/open/xdg-open). Those actions are expected for this purpose, but the SKILL.md includes an rm -rf "{baseDir}/html/{项目名}" delete command and instructions to read and update local files — which are powerful operations. If {baseDir} is misresolved or attacker-controlled, deletion or overwriting outside the intended tree is possible. Also, a prompt-injection pattern (unicode-control-chars) was detected inside SKILL.md, which could be used to hide instructions or manipulate parsers.
✓ 安装机制
Instruction-only skill with no install spec or external downloads. Lowest install risk: nothing is written to disk at install time beyond the skill's own generated files when invoked.
✓ 凭证需求
No environment variables, credentials, or config paths are requested. The skill's declared needs are minimal and proportional to its stated function.
ℹ 持久化与权限
always is false and the skill is user-invocable; autonomous invocation is allowed by default (platform-normal). The skill does request file-system operations (read/write/delete/mv) within the baseDir and to open system browser via shell commands. Combined with the rm -rf guidance and the prompt-injection signal, this elevates the need for sandboxing and restricted permissions, though the skill does not request persistent elevated privileges itself.
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/3/27

- 初始版本发布，包含网页前端自动生成与管理功能 - 支持根据用户描述生成 HTML/CSS/JS 静态网页，并自动保存到指定目录 - 提供一键浏览器预览、项目创建、修改、重命名、删除等常用操作 - 内置主流设计学习机制，自动记录和应用前端设计最佳实践 - 附带质量检查清单和常用页面类型说明，便于规范化开发 - 管理命令速查表，方便网站项目维护

● 可疑

安装命令

点击复制
官方npx clawhub@latest install uwvwko-web-front
镜像加速npx clawhub@latest install uwvwko-web-front --registry https://cn.longxiaskill.com

技能文档

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

输出目录

所有生成的网页文件保存在： `` {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： `bash start "" "{baseDir}/html/{项目名}/index.html" ` macOS： `bash open "{baseDir}/html/{项目名}/index.html" ` Linux： `bash 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 | 技术产品落地页 |

学习触发条件

以下情况会主动学习并更新资料：
  • 用户要求"参考 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

`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、交互逻辑 |

注意事项

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

快速模板

单文件模板

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

网站管理

列出所有网站

当用户说"列出所有网站"、"有哪些网站"、"查看网站列表"时：
  • 扫描 {baseDir}/html/ 目录
  • 列出所有子目录（每个子目录代表一个网站项目）
  • 显示每个项目的基本信息
示例输出： ` 📁 已生成的网站列表：
  • personal-intro
📄 文件：index.html, style.css 📅 创建：2026-03-20
  • todo-app
📄 文件：index.html, style.css, script.js 📅 创建：2026-03-19
  • game-snake
📄 文件：index.html 📅 创建：2026-03-18 共 3 个网站项目 `

打开网站

当用户说"打开 xxx 网站"、"预览 xxx"时：
  • 在 {baseDir}/html/ 中查找对应项目
  • 使用系统命令在浏览器中打开
命令： `bash # Windows start "" "{baseDir}/html/{项目名}/index.html" # macOS open "{baseDir}/html/{项目名}/index.html" # Linux xdg-open "{baseDir}/html/{项目名}/index.html" `

修改网站

当用户说"修改 xxx 网站"、"更新 xxx 页面"时：
  • 先读取现有文件内容
  • 根据用户需求修改代码
  • 保存更新后的文件
  • 可选择自动刷新浏览器预览
修改流程： ` 用户请求修改 → 读取现有文件 → 理解修改需求 → 更新代码 → 保存 → 预览 `

删除网站

当用户说"删除 xxx 网站"、"移除 xxx 项目"时：
  • 确认删除操作（避免误删）
  • 删除整个项目目录
删除命令： `bash # 删除整个项目目录 rm -rf "{baseDir}/html/{项目名}" ` 安全确认： ` ⚠️ 确认删除 项目名称：{项目名} 项目路径：{baseDir}/html/{项目名}/ 包含文件：index.html, style.css, ... 确定要删除吗？此操作不可恢复。 `

重命名网站

当用户说"重命名 xxx 为 yyy"时：
  • 检查新名称是否已存在
  • 重命名项目目录
命令： `bash 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 └── ... ``

数据来源：ClawHub ↗ · 中文优化：龙虾技能库