Web Design

This generates single-page HTML sites with Tailwind, Chart.js, and Font Awesome, then deploys them straight to Cloudflare Pages via Python scripts. No Node.js or wrangler needed, just REST API calls. It's built for landing pages, reports, and data visualizations where you want something polished fast. The design spec explicitly bans purple gradients and emoji, which is refreshing. Each deployment gets an eight-digit random prefix to avoid name collisions unless you specify an existing project. Honestly useful if you're already in the Cloudflare ecosystem and want to skip the usual build toolchain. Covers everything from particle backgrounds to chart plugins, so you can make it as fancy or minimal as needed.

GitHub stars: 722
last updated: Jun 1, 2026

View on GitHub

Install

$ npx -y skills add countbot-ai/countbot --skill web-design --agent claude-code

Installs into .claude/skills of the current project.

Files

网页设计与部署

生成精美单页 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）

<!-- 核心 -->
<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">

SKILL.md on GitHub