For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /zh/docs/mobile/ui.md (or send Accept: text/markdown).
原生 UI 与主题
镜像 Web 设计决策的屏幕原语与共享 view-model。
开始之前
使用“文件”→“打开文件夹”在 Visual Studio Code 中打开下载的 supastack 项目，然后选择“终端”→“新建终端”。存储库根目录是包含 package.json、apps 和 packages 的文件夹。运行下面的命令并保持终端打开。如果无法识别命令，请先完成工具安装指南，然后再继续。
首先阅读平台教程。服务器是响应浏览器或电话请求的应用程序进程。 Web 读取 apps/web/.env.local，Expo 读取 apps/mobile/.env.local，数据库迁移命令读取 root .env。无数据库/仪表板演示与真实/身份验证帐户分开，需要迁移Postgres。仅电话或桌面结帐需要单独运行的 Web 后端。
corepack pnpm --filter @supastack/mobile start安装与配置
屏幕基础组件位于 apps/mobile/src/ui —— Screen、Card、Title、Detail、SectionLabel、ErrorText、AppButton —— 由 apps/mobile/src/theme 提供样式，使网页端的视觉决策直接映射到原生界面。在外观设置中，“跟随网页端”模式（通过 GET/PUT /api/mobile/appearance 调用的 apps/mobile/src/theme/synced.ts）会从本地缓存应用已登录用户同步的网页端配色包。
packages/ui-native 承载跨平台的 view-model 助手：createEntitlementCard 把服务端权限状态转成卡片的 title、status、detail、动作标签与无障碍标签，让 Web 与移动端渲染同一个访问决策。
apps/mobile/src/ui/screen.tsx exports:
Screen, Card, H1, H2, Title, Detail,
SectionLabel, ErrorText, AppButton
@supastack/ui-native → createEntitlementCard(input)
→ { title, status, detail, accessibilityLabel, action }实现流程
先用共享原语组装屏幕，再写新元素；对齐 theme 模块的令牌与密度，而不是硬编码尺寸和颜色。
产品文案不要进入原语 —— 它们渲染标签，不做文案决策。像 createEntitlementCard 那样，在自定义行中透传无障碍标签。
验证与排障
在浅色与深色、最大文字尺寸、读屏标签与小屏设备下验证界面。在 200% 文字下截断或裁切的组件不算完成。