Skip to main content

网页设计与部署

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

按需引入,不必全部加载。根据页面类型选择合适的资源。 按需参考 assets/template.html 了解一种可能的实现方式(白底卡片式布局),但不要每次都照搬。

部署到 Cloudflare Pages

重要规则

  • 如果用户没有明确指定部署到哪个项目,必须使用八位随机字母数字前缀 + 内容名称作为项目名(如 a3f8k2m1-product-introx7b9d4e2-annual-report),避免项目名冲突
  • 只有用户明确说”部署到 xxx 项目”或”更新 xxx”时,才部署到已有项目
  • 随机前缀使用小写字母和数字混合,每次部署生成新的前缀

配置

编辑 skills/web-design/scripts/config.json
API Token 获取:Cloudflare Dashboard > Create Token > Cloudflare Pages: Edit account_id 无需配置,脚本会通过 API 自动获取。

命令行调用

纯 Python + REST API 实现,无需 wrangler 或 Node.js。
部署成功后会返回 https://<project>.pages.dev 的访问地址。

AI 调用场景

用户说”帮我做一个产品介绍页”:
  1. 根据用户需求设计独特的页面风格
  2. 生成 HTML 并保存到本地文件
用户说”部署到线上”(未指定项目):
用户说”更新 xxxx 网站”:

注意事项

  • 单文件部署时自动复制为 index.html
  • 单文件限制 10MB
  • 项目名会作为子域名:<project>.pages.dev
  • 首次部署会自动创建项目
  • 纯 Python 标准库实现,无需 Node.js 或 wrangler