Tailwind Builder - 自动化优化流程
sequenceDiagram
participant User as 用户
participant AI as AI Skill (Builder)
participant Env as 本地运行环境
participant File as 项目文件系统
User->>AI: 请求优化页面 (CDN -> Local)
AI->>File: 扫描 HTML 检测 CDN 引用
AI->>Env: 检查 Node.js & NPM 环境
alt 环境就绪
AI->>Env: 执行 npm init -y
AI->>Env: 安装 tailwindcss postcss autoprefixer
AI->>File: 生成 tailwind.config.js & input.css
AI->>Env: 执行编译指令 (npx tailwindcss -i ...)
AI->>File: 替换 HTML 中的 标签
AI->>User: 任务完成,报告性能提升数据
else 环境缺失
AI->>User: 提示安装 Node.js 依赖并终止
end
性能数据统计点
优化前后对比:HTTP 请求数 (-1)、CSS 体积 (通常减少 70%-90%)、FCP 首次内容渲染时间。