kscz0000 UI Page
概述
作为 StyleSeed 的一部分，本技能使用 Toss seed 的移动优先组合规则搭建完整的页面或屏幕。它通过基于现有的外壳、顶栏、底部导航和卡片节奏来构建，而非生成孤立的区块，从而保持页面结构的一致性。
使用时机
- 需要在 Toss-seed 应用中创建新页面时使用
- 需要一致的页面外壳、间距和导航结构时使用
- 添加新产品流程并需要可靠的起始布局时使用
- 即使项目后续扩展到更大的断点，也希望保持移动优先时使用
工作原理
步骤 1：检查现有外壳
首先阅读当前的页面脚手架模式，特别是：
- 页面外壳
- 顶栏
- 底部导航
- 使用相同路由族的代表性页面
步骤 2：定义页面目的
明确：
- 页面名称
- 该屏幕要回答的主要用户问题
- 用户应采取的首要一两个操作
每个屏幕应该有一个主导目的。
步骤 3：使用信息金字塔
按重要性从高到低排列页面内容：
- 主视觉区或顶部摘要
- KPI 或关键操作
- 详情卡片或支撑模块
- 列表、历史记录或次要内容
避免机械地从上到下重复相同的区块类型。
步骤 4：应用 Toss 布局规则
默认布局选择：
- 移动视口宽度约为
max-w-[430px] - 页面背景使用
bg-background - 水平内边距约为
px-6 - 区块间距使用
space-y-6 - 如果存在底部导航，需预留充足的底部内边距
- 卡片使用语义化 surface token、圆角和轻微阴影
步骤 5：组合而非重建
尽可能使用现有的 ui/ 和 patterns/ 组件。新页面应该主要是编排现有的构建模块，而非重新创建它们。
步骤 6：考虑真实设备约束
- 处理安全区域 insets
- 避免水平溢出
- 保持交互区域适合拇指操作
- 确保长内容滚动流畅，不会被底部导航截断
输出
返回：
- 页面脚手架
- 选定的区块结构
- 复用的组件和任何新增的必需组件
- 页面后续需要的空状态、加载状态和错误状态
最佳实践
- 第一版保持结构正确，然后再添加装饰
- 使用一个强有力的主视觉区，而非多个相互竞争的亮点
- 在同级屏幕间保持导航一致性
- 当页面可能重复时，优先使用可复用的区块组件
更多资源
限制
- 仅当任务明确符合上述描述的范围时使用本技能。
- 不要将输出替代特定环境的验证、测试或专家评审。
- 如果缺少必需的输入、权限、安全边界或成功标准，请停下来请求澄清。