使用 AI 快速构建移动端优先的 UI 页面骨架 #

解决 UI 开发中页面风格不统一、间距随意的问题：通过 StyleSeed Toss 布局规范，让 AI 能够快速生成一个结构严谨、符合移动端交互逻辑且可直接复用现有组件的页面骨架。

为什么需要这个技能 #

在快速迭代产品时，开发者容易陷入“碎片化”开发，导致每个页面的顶部导航、底部间距、卡片节奏各不相同。如果让 AI 随意生成代码，它往往会创造一套新的样式，而不是复用项目已有的 Shell 结构。

本技能通过引入 Toss 布局模式（Mobile-first Composition），强制 AI 遵循一套标准的信息金字塔结构和布局规则（如 max-w-[430px] 限制、space-y-6 节奏），确保新页面在视觉和交互上与现有系统完美统一。

适用场景 #

• 需要在现有 Toss-seed 应用中快速增加一个新功能页面。
• 想要在构建产品流程（User Flow）时，快速搭建一套一致的页面壳（Page Shell）。
• 需要确保页面在移动端设备上的安全区域（Safe Area）和拇指操作区域得到正确处理。
• 避免重复编写基础 UI 代码，希望 AI 优先通过编排（Orchestration）现有组件来完成页面。

核心工作流 #

1. 分析既有 Shell：AI 首先扫描当前项目的 Page Shell、Top Bar 和 Bottom Navigation，确保新页面在路由家族中保持一致。
2. 定义页面目的：明确页面名称、核心问题以及用户需要执行的 1-2 个主要操作，确保每个页面只有一个主导目的。
3. 构建信息金字塔：按照重要程度由高到低排列：Hero/顶层摘要 $\to$ KPI/关键动作 $\to$ 详情卡片 $\to$ 列表/次要内容。
4. 应用 Toss 布局规则：
   • 视口宽度限制在 max-w-[430px] 左右。
   • 使用标准背景色 bg-background 和水平内边距 px-6。
   • 模块间距遵循 space-y-6 节奏。
5. 组件编排而非重建：优先调用 ui/ 和 patterns/ 目录下的既有组件，仅在绝对必要时创建新组件。
6. 设备适配优化：处理安全区域内缩，防止水平溢出，并确保长内容滚动时不会被底部导航遮挡。

下载和安装 #

下载 ui-page 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐