SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsweb-design

web-design

Frontend & websites

View repository

Updated 10-15 20:28

About this skill

Web Design and Deployment

Generate beautiful single-page HTML and deploy to Cloudflare Pages.

Design Specifications

Design Language

Design freely according to user needs; each generated page should have a unique visual style, avoiding uniformity.

Design constraints:

  • Do not use purple gradient color schemes
  • Do not use Emoji symbols; uniformly use Font Awesome icons instead
  • Layout: Flexibly use Tailwind CSS Grid / Flex layouts, and choose appropriate typography based on content volume and type
  • Card components: Rounded corners, shadows, hover animations, etc. can be adjusted according to style
  • Icons: Use Font Awesome 6.x <i class="fa-solid fa-xxx">
  • Charts: Use Chart.js, supporting bar / line / doughnut / radar / polarArea, etc.
  • Responsive: Ensure good display on both mobile and desktop

Recommended Online Resources (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">

<!-- 图表增强 -->
<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>

Import as needed; not all need to be loaded. Choose appropriate resources based on the page type.

Refer as needed to assets/template.html to understand one possible implementation approach (white-background card-style layout), but do not copy it every time.

Deploy to Cloudflare Pages

Important Rules

  • If the user does not explicitly specify which project to deploy to, you must use an eight-character random alphanumeric prefix + content name as the project name (e.g., a3f8k2m1-product-intro、x7b9d4e2-annual-report), to avoid project name conflicts
  • Only deploy to an existing project when the user explicitly says "deploy to xxx project" or "update xxx"
  • The random prefix uses a mix of lowercase letters and numbers, generating a new prefix for each deployment

Configuration

Edit skills/web-design/scripts/config.json：

{
  "api_token": "YOUR_CLOUDFLARE_API_TOKEN"
}

API Token retrieval:Cloudflare Dashboard > Create Token > Cloudflare Pages: Edit

account_id No configuration needed; the script will automatically retrieve it via the API.

Command-Line Invocation

Implemented in pure Python + REST API, no wrangler or Node.js needed.

# 部署单个 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

After successful deployment, it will return the access address of https://<project>.pages.dev .

AI Invocation Scenarios

User says "help me make a product introduction page":

  1. Design a unique page style according to user needs
  2. Generate HTML and save to a local file

User says "deploy online" (no project specified):

# 八位随机前缀 + 内容名称，避免冲突
python3 skills/web-design/scripts/deploy.py deploy 文件路径 --project a3f8k2m1-product-intro

User says "update xxxx website":

python3 skills/web-design/scripts/deploy.py deploy 文件路径 --project prompt123

Notes

  • When deploying a single file, it is automatically copied as index.html
  • Single file limit is 10MB
  • The project name will serve as the subdomain:<project>.pages.dev
  • The first deployment will automatically create the project
  • Implemented with pure Python standard library, no Node.js or wrangler needed