Agent skill · Frontend

web-design

网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。

countbot-aigithub.com/countbot-aiGitHub ↗
claude-codeships scriptsMIT
Install
npx skills add countbot-ai/CountBot --skill web-design --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 5
SKILL.md size: 4 KB
Bundled scripts: yes
Path: workspace/skills/web-design/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 760
Language: Python

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# 网页设计与部署 生成精美单页 HTML 并部署到 Cloudflare Pages。 ## 设计规范 ### 设计语言 根据用户需求自由设计，每次生成的页面应有独特的视觉风格，避免千篇一律。 设计约束： - 不使用紫色渐变配色 - 不使用 Emoji 表情符号，统一使用 Font Awesome 图标代替 - 布局：灵活运用 Tailwind CSS 的 Grid / Flex 布局，根据内容量和类型选择合适的排版 - 卡片组件：圆角、阴影、悬停动效等可根据风格调整 - 图标：使用 Font Awesome 6.x `<i class="fa-solid fa-xxx">` - 图表：使用 Chart.js，支持 bar / line / doughnut / radar / polarArea 等 - 响应式：确保移动端和桌面端都有良好的展示效果 ### 推荐在线资源（CDN） ```html <!-- 核心 --> <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-

What's inside
Steps it walks through
  1. 设计规范
  2. 设计语言
  3. 推荐在线资源（CDN）
  4. 部署到 Cloudflare Pages
  5. 重要规则
  6. 配置
  7. 命令行调用
  8. AI 调用场景
  9. 注意事项
Ships with 4 files
  • assets/template.html
  • scripts/config.json
  • scripts/config.json.example
  • scripts/deploy.py
Commands it runs
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
python3 skills/web-design/scripts/deploy.py deploy 文件路径 --project a3f8k2m1-product-intro
python3 skills/web-design/scripts/deploy.py deploy 文件路径 --project prompt123
More from CountBot
All skills →
agent-browserBrowser automation CLI for AI agents. Use when the user needs to interact with websites, including…Testing & QAagent-team-manager多智能体团队管理。创建、查看、修改、删除 CountBot 的多智能体团队，管理团队成员（角色）和团队级自定义模型配置。当用户要新建 Pipeline/Graph/Council…AI & Agentsbaidu-search百度 AI 搜索。支持网页搜索、百度百科、秒懂百科、AI 智能生成四种模式。自动包含当前日期上下文。当用户要求搜索信息、查询百科、获取最新资讯、搜索新闻、查找资料时使用。Othercron-manager定时任务管理。创建、查看、修改、删除定时任务，管理任务会话数据。当用户需要设置提醒、定时执行任务、管理调度计划时使用。Otheremail通过 QQ 或 163 邮箱发送和接收邮件。支持发送普通邮件、带附件邮件、接收邮件、检查新邮件。当用户要求发送邮件、查看邮件、检查新邮件时使用。Content & Marketingfind-skills基于腾讯 SkillHub 搜索、安装和管理技能。用户提到“找技能”“安装 skill”“扩展功能”“启用/禁用 skill”“删除 skill”“安装 SkillHub CLI”时优先使用。AI & Agents
About this skill
What does the web-design skill do?

网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。

How do I install it?

Run `npx skills add countbot-ai/CountBot --skill web-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From countbot-ai/CountBot, a repository with 760 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.