# UI Page

> 使用 StyleSeed Toss 布局模式、区块节奏和现有外壳组件搭建移动优先的新页面。当用户要求'创建新页面'、'搭建页面'、'移动端页面设计'、'Toss 布局'、'页面脚手架'、'UI 页面'、'页面结构'时使用。

- Skill: `kscz0000/ui-page` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/ui-page`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/ui-page/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/ui-page

---


# UI Page

## 概述

作为 [StyleSeed](https://github.com/bitjaru/styleseed) 的一部分，本技能使用 Toss seed 的移动优先组合规则搭建完整的页面或屏幕。它通过基于现有的外壳、顶栏、底部导航和卡片节奏来构建，而非生成孤立的区块，从而保持页面结构的一致性。

## 使用时机

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

## 工作原理

### 步骤 1：检查现有外壳

首先阅读当前的页面脚手架模式，特别是：
- 页面外壳
- 顶栏
- 底部导航
- 使用相同路由族的代表性页面

### 步骤 2：定义页面目的

明确：
- 页面名称
- 该屏幕要回答的主要用户问题
- 用户应采取的首要一两个操作

每个屏幕应该有一个主导目的。

### 步骤 3：使用信息金字塔

按重要性从高到低排列页面内容：
1. 主视觉区或顶部摘要
2. KPI 或关键操作
3. 详情卡片或支撑模块
4. 列表、历史记录或次要内容

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

### 步骤 4：应用 Toss 布局规则

默认布局选择：
- 移动视口宽度约为 `max-w-[430px]`
- 页面背景使用 `bg-background`
- 水平内边距约为 `px-6`
- 区块间距使用 `space-y-6`
- 如果存在底部导航，需预留充足的底部内边距
- 卡片使用语义化 surface token、圆角和轻微阴影

### 步骤 5：组合而非重建

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

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

- 处理安全区域 insets
- 避免水平溢出
- 保持交互区域适合拇指操作
- 确保长内容滚动流畅，不会被底部导航截断

## 输出

返回：
1. 页面脚手架
2. 选定的区块结构
3. 复用的组件和任何新增的必需组件
4. 页面后续需要的空状态、加载状态和错误状态

## 最佳实践

- 第一版保持结构正确，然后再添加装饰
- 使用一个强有力的主视觉区，而非多个相互竞争的亮点
- 在同级屏幕间保持导航一致性
- 当页面可能重复时，优先使用可复用的区块组件

## 更多资源

- [StyleSeed 仓库](https://github.com/bitjaru/styleseed)
- [源技能](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-page/SKILL.md)

## 限制

- 仅当任务明确符合上述描述的范围时使用本技能。
- 不要将输出替代特定环境的验证、测试或专家评审。
- 如果缺少必需的输入、权限、安全边界或成功标准，请停下来请求澄清。