メニュー
网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | web-design |
| description | 网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。 |
| homepage | https://github.com/countbot-ai/CountBot |
生成精美单页 HTML 并部署到 Cloudflare Pages。
根据用户需求自由设计，每次生成的页面应有独特的视觉风格，避免千篇一律。
设计约束：
<i class="fa-solid fa-xxx"><!-- 核心 -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- 动画 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css">
<!-- 字体 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap">
<!-- 图表增强 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<!-- 轮播 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 代码高亮（技术类页面） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- 数字滚动动画 -->
<script src="https://cdn.jsdelivr.net/npm/countup.js@2/dist/countUp.umd.min.js"></script>
<!-- 打字机效果 -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.js"></script>
<!-- 粒子背景 -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles-slim@2/tsparticles.slim.bundle.min.js"></script>
<!-- Markdown 渲染（文档类页面） -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- 图片灯箱 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2/css/lightgallery-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2/lightgallery.umd.min.js"></script>
按需引入，不必全部加载。根据页面类型选择合适的资源。
按需参考 assets/template.html 了解一种可能的实现方式（白底卡片式布局），但不要每次都照搬。
a3f8k2m1-product-intro、x7b9d4e2-annual-report），避免项目名冲突编辑 skills/web-design/scripts/config.json：
{
"api_token": "YOUR_CLOUDFLARE_API_TOKEN"
}
API Token 获取：Cloudflare Dashboard > Create Token > Cloudflare Pages: Edit
account_id 无需配置，脚本会通过 API 自动获取。
纯 Python + REST API 实现，无需 wrangler 或 Node.js。
# 部署单个 HTML 文件（自动创建项目，自动作为 index.html）
python3 skills/web-design/scripts/deploy.py deploy index.html --project my-site
# 部署整个目录
python3 skills/web-design/scripts/deploy.py deploy ./dist --project my-site
# 部署到预览分支
python3 skills/web-design/scripts/deploy.py deploy ./dist --project my-site --branch preview
# 查看项目列表
python3 skills/web-design/scripts/deploy.py list
# 查看项目部署历史
python3 skills/web-design/scripts/deploy.py deployments --project my-site
部署成功后会返回 https://<project>.pages.dev 的访问地址。
用户说"帮我做一个产品介绍页"：
用户说"部署到线上"（未指定项目）：
# 八位随机前缀 + 内容名称，避免冲突
python3 skills/web-design/scripts/deploy.py deploy 文件路径 --project a3f8k2m1-product-intro
用户说"更新 xxxx 网站"：
python3 skills/web-design/scripts/deploy.py deploy 文件路径 --project prompt123
<project>.pages.dev基于腾讯 SkillHub 搜索、安装和管理技能。用户提到“找技能”“安装 skill”“扩展功能”“启用/禁用 skill”“删除 skill”“安装 SkillHub CLI”时优先使用。
Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.
通过 IMA OpenAPI 处理知识库任务。支持知识库内容搜索、命中详情查看、条目浏览、列出知识库、上传文件、导入网页。用户提到知识库、资料库、上传到知识库、导入网页、搜知识库时使用。
通过 IMA OpenAPI 处理笔记任务。支持搜索笔记、读取笔记、列出笔记、新建笔记、追加笔记。用户提到笔记、备忘录、记一下、追加到某篇笔记时使用。
多智能体团队管理。创建、查看、修改、删除 CountBot 的多智能体团队，管理团队成员（角色）和团队级自定义模型配置。当用户要新建 Pipeline/Graph/Council 团队、调整成员分工、修改依赖关系、开关技能系统、设置团队专属模型时使用。
定时任务管理。创建、查看、修改、删除定时任务，管理任务会话数据。当用户需要设置提醒、定时执行任务、管理调度计划时使用。