ui-page

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Page

UI 页面

Overview

概述

Part of StyleSeed, this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections.

作为StyleSeed的一部分，该skill使用Toss seed的移动端优先组合规则搭建完整的页面或屏幕。它基于现有外壳、顶部栏、底部导航和卡片节奏进行构建，保持页面结构一致，而非生成相互独立的区块。

When to Use

使用场景

Use when you need a new page in a Toss-seed app
Use when you want a consistent page shell, spacing, and navigation structure
Use when you are adding a new product flow and need a solid starting layout
Use when you want to stay mobile-first even if the project later expands to larger breakpoints

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

How It Works

工作流程

Step 1: Inspect the Existing Shell

步骤1：检查现有外壳

Read the current page scaffolding patterns first, especially:

page shell
top bar
bottom navigation
representative pages using the same route family

首先查看当前页面的搭建模式，尤其是：

页面外壳
顶部栏
底部导航
使用相同路由体系的代表性页面

Step 2: Define the Page Purpose

步骤2：定义页面用途

Clarify:

the page name
the primary user question the screen answers
the top one or two actions the user should take

Every screen should have one dominant purpose.

明确：

页面名称
该页面要解答的用户核心问题
用户应执行的首要一到两个操作

每个屏幕都应有一个核心用途。

Step 3: Use the Information Pyramid

步骤3：使用信息金字塔

Lay out the page from highest importance to lowest:

Hero or top summary
KPI or key actions
detail cards or supporting modules
lists, history, or secondary content

Avoid repeating the same section type mechanically from top to bottom.

按照重要性从高到低排列页面内容：

焦点区域或顶部摘要
关键绩效指标（KPI）或核心操作
详情卡片或支持模块
列表、历史记录或次要内容

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

Step 4: Apply the Toss Layout Rules

步骤4：应用Toss布局规则

Default layout choices:

mobile viewport width around
```
max-w-[430px]
```
page background on
```
bg-background
```
horizontal padding around
```
px-6
```
section rhythm with
```
space-y-6
```
generous bottom padding if a bottom nav is present
cards using semantic surface tokens, rounded corners, and light shadows

默认布局选项：

移动端视口宽度约为
```
max-w-[430px]
```
页面背景使用
```
bg-background
```
水平内边距约为
```
px-6
```
区块间距使用
```
space-y-6
```
若存在底部导航，设置充足的底部内边距
卡片使用语义化表面令牌、圆角和浅色阴影

Step 5: Compose Instead of Rebuilding

步骤5：组合而非重建

Use existing

ui/

and

patterns/

components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them.

尽可能使用现有的

ui/

和

patterns/

组件。新页面应主要编排现有构建块，而非重新创建它们。

Step 6: Account for Real Device Constraints

步骤6：考虑真实设备限制

handle safe-area insets
avoid horizontal overflow
keep interactive clusters thumb-friendly
ensure long content scrolls cleanly without clipping the bottom navigation

处理安全区域内边距
避免水平溢出
确保交互区域适合拇指操作
确保长内容可流畅滚动，且不会遮挡底部导航

Output

输出内容

Return:

The page scaffold
The chosen section structure
Reused components and any newly required components
Empty, loading, and error states that the page will need next

页面脚手架
选定的区块结构
复用的组件以及任何新增所需组件
页面后续需要的空状态、加载状态和错误状态

Best Practices

最佳实践

Keep the first version structurally correct before adding decoration
Use one strong hero instead of multiple competing highlights
Preserve navigation consistency across sibling screens
Prefer reusable section components when the page will likely repeat

在添加装饰前，先确保第一版结构正确
使用一个清晰的焦点区域，而非多个相互竞争的高亮部分
在同级屏幕间保持导航一致性
当页面可能重复出现时，优先使用可复用的区块组件

Additional Resources

额外资源

Limitations

局限性

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

仅当任务明确符合上述描述的范围时，才可使用该skill。
不要将输出内容视为特定环境下验证、测试或专家评审的替代品。
若缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。