任务
No description provided
Resources
9Install
npx skillscat add xialu-pro/test Install via the SkillsCat registry.
name:design-demo-tool
description:根据业务需求生成完整的网站设计评审提案,完成调性、风格定义
任务
- 生成一个可以演示的、能展示功能的网站原型，目的是评审网站的排版、调性和风格。
- 目标用户-需要根据业务形成进行补充，请询问
- 用途-需要根据业务形成进行补充，请询问
网站风格调性
- 具备科技感，和开发者调性，请查看开发者常用的网站风格
- 用户友好化，信息易获取
- 因为是demo所以在没有可参考内容的情况下，使用假内容（视频、gif动图、图片）等填充，要求素材尽可能的贴近业务。
- 输出的页面需要考虑屏效比，特别是杜绝首屏banner面积过大，内容少。
- 请输出2-3中风格差异大的样式进行选择
网站业务信息
已经有的信息——需要进行补充，请询问
要求生成的demo，可以本地预览，HTML Demo 自包含文件生成规范（避免 CDN 依赖陷阱）
背景
在国内/受限网络环境下生成的纯 HTML demo 文件，常因 CDN 不可访问导致页面异常。
以下是经过实际排查总结的完整规范。
必须遵守的规则
1. 禁止在 或任何大型容器上使用 x-cloak
x-cloak 依赖 Alpine.js 移除 [x-cloak] 样式才能显示内容。
若 Alpine 未加载，加了 x-cloak 的元素永久隐藏。
✅ 只在小型弹窗/下拉等组件上使用 x-cloak
❌ 不要在 或页面主容器上使用 x-cloak
2. Alpine.js 必须内联，并修正初始化时机
从 https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js 下载后内联。
内联后必须将源码末尾的：
queueMicrotask(()=>{Ht.start()})
替换为：
document.addEventListener("DOMContentLoaded",()=>{Ht.start()})
原因：Alpine CDN 版本设计为配合 <script defer> 使用，defer 保证 DOM 解析完再执行。<br>内联到 <head> 去掉 defer 后，queueMicrotask 会在 DOM 就绪前立即触发，<br>导致 Alpine 扫描不到任何 x-data 元素就退出，所有 x-text/x-for/x-show 全部失效。</p> <h3>3. Tailwind CSS 必须内联，且需配置 safelist</h3> <p>使用 Tailwind CLI 静态构建（非 Play CDN），内联到 <style> 标签。<br>关键：动态绑定的 class（通过 :class="item.xxx" 读取 JS 数组中的字符串）<br>CLI 扫描不到，必须手动加入 safelist：<br>tailwind.config.js:<br> safelist: [<br> 'bg-gradient-to-br', 'bg-gradient-to-r',<br> 'from-blue-500', 'from-violet-500', 'from-green-500', 'from-orange-500',<br> 'from-cyan-400', 'from-pink-400', 'from-red-900', ...（所有动态 from-/to-）<br> 'to-blue-700', 'to-purple-700', 'to-teal-600', 'to-red-600', ...<br> // 以及其他在 JS 数组中作为字符串存储的 bg-/text-/border- 类<br> ]</p> <h3>4. 检查清单（生成后必须验证）</h3> <ul> <li><input disabled="" type="checkbox"> <body> 上没有 x-cloak</li> <li><input disabled="" type="checkbox"> Alpine.js 已内联，且使用 DOMContentLoaded 而非 queueMicrotask</li> <li><input disabled="" type="checkbox"> Tailwind CSS 已内联（无 <script src="cdn.tailwindcss.com">）</li> <li><input disabled="" type="checkbox"> 所有通过 :class="item.xxx" 动态绑定的 class 已加入 safelist</li> <li><input disabled="" type="checkbox"> 页面无任何外部 JS/CSS 请求（图片除外）</li> <li><input disabled="" type="checkbox"> 用 python 验证：re.findall(r'src="(https?://[^"]+)"', html) 结果为空</li> </ul> <h3>5. 快速诊断指南</h3> <table> <thead> <tr> <th>现象</th> <th>原因</th> <th>修复</th> </tr> </thead> <tbody><tr> <td>页面全白/不显示</td> <td>x-cloak 在顶层容器</td> <td>移除 x-cloak</td> </tr> <tr> <td>骨架显示，内容全空</td> <td>Alpine.js 未加载</td> <td>内联 Alpine.js</td> </tr> <tr> <td>有布局无样式</td> <td>Tailwind 未加载</td> <td>内联 Tailwind CSS</td> </tr> <tr> <td>有样式，动态颜色全灰/缺失</td> <td>safelist 缺少动态 class</td> <td>补全 safelist 重新构建</td> </tr> <tr> <td>有布局有样式，完全无文字</td> <td>Alpine queueMicrotask 时序问题</td> <td>替换为 DOMContentLoaded</td> </tr> </tbody></table>