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
Install
$ npx -y skills add countbot-ai/countbot --skill web-design --agent claude-codeInstalls 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">
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/countbot-ai/countbot
- Categories
- Frontend Development, Cloud & Infrastructure, Design & UI/UX
- License
- MIT
- First seen
- Jun 11, 2026
