关于 ui-page
面向现有 StyleSeed 项目的移动端页面脚手架技能，按项目设计系统和布局规范生成新页面，并在提交前检查视觉与交互规则。
主要功能
- 01按 StyleSeed 模式搭建移动页面
- 02复用现有 UI 与页面组件
- 03遵循语义颜色和间距规范
- 04检查触控目标及页面布局
- 05验证生成页面的设计规则
适用场景
- 01为移动应用创建新页面
- 02按项目组件规范构建屏幕
- 03检查新页面是否符合设计规则
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/ui-page确认已加载。
详细介绍
移动页面脚手架
适用场景
当你需要使用 StyleSeed 布局模式搭建新的移动页面/屏幕时，请使用此技能。
不适用场景
- 在现有页面中使用单个组合模式 → 使用
/ss-pattern - 仅适用于桌面的屏幕——此技能以移动端为先
- 多页面导航结构 → 先使用
/ss-flow - 调整现有页面——直接编辑文件
创建新页面：$0 描述：$ARGUMENTS
说明
-
阅读设计系统参考资料：
CLAUDE.md，了解文件结构和约定components/patterns/page-shell.tsx，了解页面布局components/patterns/top-bar.tsx，了解顶部栏模式components/patterns/bottom-nav.tsx，了解导航
-
页面结构示例（编译前，将所有仅包含注释的 JSX 属性替换为实际值）：
import { PageShell, PageContent } from "@/components/patterns/page-shell"
import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
import { BottomNav } from "@/components/patterns/bottom-nav"
export default function PageName() {
return (
<PageShell>
<TopBar
logo={/* logo or page title */}
subtitle={/* optional subtitle */}
actions={/* optional action buttons */}
/>
<PageContent>
{/* Page sections with space-y-6 */}
</PageContent>
<BottomNav items={[/* nav items */]} activeIndex={0} />
</PageShell>
)
}
-
布局规则：
- 容器：
max-w-[430px]（移动视口） - 页面背景：
bg-background - 区块水平内边距：
px-6 - 区块垂直间距：
space-y-6 - 导航底部内边距：
pb-24 - 卡片：
bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]
- 容器：
-
所有颜色均使用语义化令牌——切勿硬编码十六进制值。
-
尽可能使用现有组件（ui/ 和 patterns/）组合页面。
-
安全区域：为现代设备添加
env(safe-area-inset-*)内边距。 -
生成后验证（强制）： 创建页面后，请对照黄金规则进行验证：
- 所有内容都位于卡片内（无裸露在背景上的内容）
- 点缀色仅使用
--brand（不使用其他点缀色） - 不含硬编码的十六进制值（全部使用语义化令牌）
- 区块类型交替排列（相邻区块类型不得相同）
- 数字与单位的比例为 2:1
- 间距使用 6px 的倍数（p-1.5、p-3、p-6）
- 单张卡片使用
mx-6，网格/轮播使用px-6 - 所有交互元素的触控目标 ≥ 44px 如果发现任何违规项，请在向用户展示页面前修正。
限制
- 仅当任务与其上游来源和本地项目上下文明确匹配时，才使用此技能。
- 应用更改前，请验证命令、生成的代码、依赖项、凭据和外部服务行为。
- 示例不能替代针对特定环境的测试、安全审查，也不能替代用户对破坏性或高成本操作的批准。
执行边界
本指南面向现有的 StyleSeed 项目。此单文件入口未包含所列项目路径、组件、令牌和 /ss-* 命令。进行修改前，请确认实际项目根目录并验证这些前置条件；如果缺少资源，应如实报告，而非凭空编造。请使用宿主支持的调用方式并遵循现有项目约定。布局数值是设计系统的选择，并非普遍适用的易用性保证。请在实际界面中测试键盘访问、响应式溢出和减少动态效果设置。
评论
支持 Markdown