---

name: ui-page description: "使用 StyleSeed Toss 布局模式、区块节奏和现有 shell 组件搭建新的移动优先页面。" category: design risk: safe source: community source_repo: bitjaru/styleseed source_type: community date_added: "2026-04-08" author: bitjaru tags: [ui, page-design, mobile, layout, styleseed] tools: [claude, cursor, codex, gemini]

UI 页面

概述

作为 StyleSeed 的一部分，此技能使用 Toss seed 的移动优先组合规则搭建完整的页面或屏幕。它通过基于现有 shell、顶部栏、底部导航和卡片节奏来保持页面结构一致，而不是生成断开的区块。

使用场景

• 当你需要在 Toss-seed 应用中创建新页面时使用
• 当你想要一致的页面 shell、间距和导航结构时使用
• 当你添加新的产品流程并需要可靠的起始布局时使用
• 当你想保持移动优先，即使项目后续扩展到更大断点时使用

工作原理

步骤 1：检查现有 Shell

首先阅读当前的页面脚手架模式，特别是：

• 页面 shell
• 顶部栏
• 底部导航
• 使用相同路由族的代表性页面

步骤 2：定义页面用途

明确：

• 页面名称
• 屏幕回答的主要用户问题
• 用户应执行的前一到两个操作

每个屏幕应有一个主导用途。

步骤 3：使用信息金字塔

从最高重要性到最低重要性排列页面：

1. 主视觉区或顶部摘要
2. KPI 或关键操作
3. 详情卡片或支持模块
4. 列表、历史记录或次要内容

避免从上到下机械地重复相同的区块类型。

步骤 4：应用 Toss 布局规则

默认布局选择：

• 移动视口宽度约 max-w-[430px]
• 页面背景使用 bg-background
• 水平内边距约 px-6
• 区块节奏使用 space-y-6
• 如果有底部导航则使用充足的底部内边距
• 卡片使用语义化表面 token、圆角和轻阴影

步骤 5：组合而非重建

尽可能使用现有的 ui/ 和 patterns/ 组件。新页面应主要编排现有构建块，而不是重新创建它们。

步骤 6：考虑真实设备约束

• 处理安全区域内边距
• 避免水平溢出
• 保持交互区域对拇指友好
• 确保长内容滚动时不会裁剪底部导航

输出

返回：

1. 页面脚手架
2. 选定的区块结构
3. 复用的组件和任何新需要的组件
4. 页面接下来需要的空状态、加载状态和错误状态

最佳实践

• 在添加装饰之前先保持第一版结构正确
• 使用一个强主视觉区而非多个竞争的高亮区
• 在同级屏幕间保持导航一致性
• 当页面可能重复时优先使用可复用的区块组件

附加资源

• StyleSeed 仓库
• 源技能

限制

• 仅在任务明确匹配上述描述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停下来要求澄清。