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/web/ui-kit.md (or send Accept: text/markdown).
UI 套件与区块
共享组件、设计令牌与区块目录。
开始之前
使用“文件”→“打开文件夹”在 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/web dev安装与配置
packages/ui-web 包含共享产品组件(按钮、输入、卡片、徽章、对话框、外壳部件),packages/design-tokens 是 app-theme.css 映射为 CSS 变量的令牌来源。/kit-blocks 路由挂载区块目录 —— 你可以带入产品的组合区块。
apps/mobile 消费 packages/ui-native 以获得等价原生原语,因此端面样式按平台保留,而契约保持共享。
# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser
# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)实现流程
优先用共享组件组合界面;只有当套件无法表达某个模式时才退回到自定义元素。新的共享部件属于 ui-web,采用令牌驱动的样式,使每个主题包自动应用。
将营销组件(src/marketing)保持在产品端面之外,反之亦然 —— 两套外壳系统是有意分离的。
验证与排障
对每个 density/radius/font 预设以及至少一个亮色和一个暗色包验证新组件。检查键盘焦点、320px 布局和 reduced motion;/settings/appearance 的套件画廊是最快的检查方式。