What is the web-design skill?
The web-design skill is a SKILL.md inside the CountBot repository that turns your agent into a single-page HTML builder for reports, landing pages and data visualizations. It uses Tailwind CSS, Chart.js and Font Awesome, and includes a Python script that deploys the file to Cloudflare Pages.
The deploy half of the web-design skill needs no wrangler and no Node.js. It is a Python script on the standard library that talks to the Cloudflare REST API with one API token.
The skill lives in the workspace/skills folder of CountBot, an open-source AI agent framework aimed at Chinese-speaking users. Its SKILL.md is written in Chinese, and it describes pages for reports, landing pages and data visualization.
What the generated pages look like
- One self-contained HTML file per page, styled with Tailwind CSS from a CDN.
- Charts drawn with Chart.js: bar, line, doughnut, radar and polarArea.
- Icons from Font Awesome 6.x. The skill bans emoji and purple gradients.
- Layouts built with Tailwind Grid and Flex, checked for both mobile and desktop.
- A fresh visual style each time, since the instructions ask the agent to avoid repeating one look.
Optional libraries
SKILL.md lists extra CDN resources and tells the agent to load only what the page needs, not everything at once. The table groups them by purpose.
| Purpose | Libraries listed |
|---|---|
| Animation | animate.css, AOS |
| Fonts | Inter, Noto Sans SC |
| Charts | chartjs-plugin-datalabels |
| Carousel and gallery | Swiper, lightGallery |
| Content effects | CountUp, Typed.js, tsParticles |
| Docs and code | marked, highlight.js |
Deploying to Cloudflare Pages
- Create a Cloudflare API token with the Cloudflare Pages: Edit permission and put it in
scripts/config.jsonasapi_token. - Run
python3 skills/web-design/scripts/deploy.py deploy index.html --project my-sitefor one file, or pass a directory. - Add
--branch previewfor a preview deployment, or runlistanddeploymentsto inspect projects and history. - Read the pages.dev address the script returns for your project name.
The account id needs no setup because the script fetches it through the API. When you do not name a project, the skill adds an eight-character random prefix to avoid name clashes.
Limits worth knowing first
- A single deployed file is capped at 10MB, and a project name becomes the subdomain.
- Pages pull Tailwind and other libraries from CDNs, so they need network access when viewed.
- The CountBot README says the author will not keep updating the project in the short term.
- No README line names other agents as supported for this skill.
Who the web-design skill is for
Best for
- Quick shareable pages such as a product intro, a status report or a chart-heavy summary.
- People who want a public pages.dev address without installing Node tooling.
- Agents that run Python and can follow a Chinese-language SKILL.md.
Not for
- Multi-page sites with a build step or a component framework.
- Teams that need a strict brand system. Pair it with a styling skill for tokens and rules.
- Performance-critical pages, where CDN scripts need review. See web-performance-skill.
Use it with UiChemy
This skill outputs a standalone HTML page, which UiChemy does not edit directly. To move an AI-built page into WordPress, import the build with UiChemy AI to WordPress and refine it there. Click Get Started on uichemy.com.
How to install Web Design Skill: Single-Page HTML and Cloudflare Deploy
git clone https://github.com/countbot-ai/CountBot.gitClone the repository
Run the command above. The README offers no standalone installer for this skill, so you copy the folder out of the CountBot checkout.
Copy the skill folder
Copy workspace/skills/web-design, including its assets and scripts folders, into the place your agent loads skills from. Keep the folder name, because SKILL.md calls
skills/web-design/scripts/deploy.py.Add your Cloudflare token
Only needed for deployment. Copy config.json.example to config.json inside scripts and set
api_token. Create the token in the Cloudflare dashboard with Cloudflare Pages: Edit.Ask for a page
Request a product intro page or a chart report. Say deploy it when you want the pages.dev address.
Check that it loaded
Ask for a one-page product intro. The agent should write a single HTML file with Tailwind, Font Awesome icons and no emoji, and on a deploy request should name the project with an eight-character prefix.
Key features
- Single-page HTML outputGenerates one HTML file for reports, landing pages and data visualization, saved locally before any deployment step.
- Fixed core stackTailwind CSS for layout, Chart.js for charts and Font Awesome for icons, all loaded from CDNs rather than installed.
- Design constraintsBans purple gradients and emoji, requires Font Awesome icons instead, and asks for a different visual style on every page.
- Chart varietyChart.js types named in the skill are bar, line, doughnut, radar and polarArea, with a datalabels plugin option.
- Load only what you needLists CDN resources for animation, fonts, carousels, code highlighting, counters, typing effects, particles, markdown and lightboxes.
- Responsive by ruleRequires the page to present well on both mobile and desktop screens, using Tailwind Grid and Flex.
- Reference templateassets/template.html shows one white card layout, but the skill says not to copy it every time.
- Python deploy scriptdeploy.py supports deploy, list and deployments commands, a project flag and a branch flag, with no wrangler or Node.js.
- Safe project namingWithout an explicit target, uses a random eight-character prefix plus a content name. Existing projects update only when you name them.
- Deployment detailsSingle files become index.html, the first deploy creates the project, and the result is a project subdomain on pages.dev.
Frequently asked questions
What is the web-design skill?
It is a SKILL.md in the CountBot repository, under workspace/skills/web-design. It tells an agent to build single-page HTML pages with Tailwind CSS, Chart.js and Font Awesome, and to deploy them to Cloudflare Pages with a bundled Python script.
How do I install the web-design skill?
Clone the CountBot repository and copy workspace/skills/web-design into your agent's skills location. There is no separate installer for this skill. Add a Cloudflare API token to scripts/config.json if you want deployment, since building pages alone needs no token.
Which AI coding agents can use the web-design skill?
The repository describes itself as compatible with the OpenClaw skills ecosystem and ships the skill inside CountBot's workspace. The README does not list other agents for this skill, so test it in yours. Any agent that reads a SKILL.md and runs Python can follow it.
Is the SKILL.md written in English?
No. The instructions and the trigger description are written in Chinese. The font list includes both Inter and Noto Sans SC, so pages are not tied to one language, but you should read the file before relying on it.
What does the Cloudflare token need?
The skill says to create a token in the Cloudflare dashboard under profile API tokens, choosing Create Token and the Cloudflare Pages: Edit permission. Store it as api_token in scripts/config.json. The account id is fetched automatically.
How does it avoid overwriting my existing site?
If you do not name a target project, the skill must use an eight-character random prefix plus a content name. It deploys to an existing project only when you say deploy to that project or update it by name.
Can I change the design it produces?
Yes. The design rules are ordinary instructions in SKILL.md, plus an optional white card template in assets. For a bolder look, add direction such as design-taste-frontend or the tokens from Tailwind guidance to your prompt.
What license does the web-design skill use?
The repository is MIT licensed, per GitHub and the README. The README also states that the author will not keep updating CountBot in the short term and invites pull requests, so expect to maintain your own copy of the skill.