Sky-Cube 多端页面生成Skill
适用场景
生成 Web(PC/H5)与移动端页面:页面结构划分、响应式布局、多端适配策略、样式与性能规范。
执行步骤
- 明确端与断点:确认目标端(PC/H5/小程序/APP)、分辨率范围;响应式按内容断点设计(参考:手机 375/平板 768/桌面 1024/大屏 1440,按项目实际调整)。
- 页面结构划分:自上而下拆分布局区(顶部导航/主体内容/侧栏/页脚),先骨架后组件,单文件不超一屏逻辑。
- 布局实现:优先 Flex/Grid 布局,移动优先编写样式;间距、字号用设计 token 变量,禁止魔法数字。
- 多端适配策略:二选一或组合——响应式(一套代码多端)与独立端(PC/H5 分项目);小程序跨端优先 uni-app/Taro 等成熟方案(需验证团队技术栈)。
- 组件与资源:图片按端加载合适尺寸并懒加载;图标用 SVG;首屏资源按需加载。
- 兼容与安全:主流浏览器/微信内置内核适配;样式 scoped 防污染;外链 rel 属性、XSS 防护按规范处理。
规范要点
- 移动优先:先满足小屏再增强大屏,断点之间布局平滑过渡,禁止横向滚动。
- 样式统一 scoped 或 CSS Modules,禁止全局样式污染;公共样式抽主题文件。
- 触控目标不小于 44px(参考值),移动端不可依赖 hover,交互需可点击可触达。
- 组件拆分单一职责,页面层只做编排不堆业务逻辑;状态管理按需引入。
- 禁止硬编码接口地址与密钥,环境相关配置走环境变量。
- 可访问性:语义化标签、表单 label、焦点可见、对比度达标。
输出模板
## 页面生成方案
端与断点:目标端 + 断点表(区间/布局变化)
页面结构树:布局区 → 组件清单
适配策略:响应式方案 或 多端分离方案 + 理由
资源与性能清单:图片/懒加载/首屏优化
自检清单
- 目标端与断点明确,无横向滚动
- 结构分层清晰,组件单一职责
- 样式 scoped、token 化,无魔法数字
- 触控可操作,可访问性达标
- 无硬编码地址/密钥,资源按端优化