在 Expo 应用中建立和维护设计系统（主题令牌…

当需要为 Expo 应用建立统一的视觉来源（主题令牌与可复用组件），或修复看起来像 AI 生成、风格不统一的界面时使用。

适用场景

解决思路

1. 先检测再构建：在已有屏幕的应用中，先查看 package.json 是否有样式库（NativeWind/Tailwind、Tamagui、Restyle、Unistyles、styled-components），再查找令牌文件（theme.ts、src/theme/、constants/theme.ts、constants/Colors.ts）。
2. 若已存在系统，它就是唯一事实来源：按其自身习惯（命名、尺度、存储格式）扩展，并针对该系统审计漂移，而不是照搬示例。
3. 若只有事实上的重复值（无主题文件），把这些值作为尺度的输入而非权威：从最高频的值推导令牌，并对齐到 4 点网格。
4. 绝不在已有系统旁引入第二套系统（例如在 Tamagui 配置旁新建 src/theme/），那属于设计系统漂移。
5. 仅在什么都不存在时，才按默认方案执行：所有令牌放在 src/theme/ 下；无 src/ 的项目用等价的顶层位置（如 theme/ 或 constants/），保持相同文件布局。
6. 按令牌类别拆分文件：colors.ts、spacing.ts、typography.ts、radius.ts、shadows.ts、motion.ts、index.ts（统一再导出，如 import { spacing, type } from "@/theme"）。
7. 新应用可先用单个 src/theme.ts 容纳所有对象，当某一类需要独立文件时再提升为文件夹形式；始终只有一个主题入口，绝不出现两个竞争令牌文件。
8. 规则：每个重复出现的视觉值都是令牌；组件导入令牌，屏幕导入组件；除 src/theme/ 外绝不硬编码十六进制颜色、字号或间距倍数；真正局部的一次性值可内联但需注释说明原因。
9. 颜色：用 expo-router 的 Color 配合 Platform.select 构建调色板并集中在 theme/colors.ts，语义色在设备上解析并自动适配明暗模式。
10. 仅在品牌需要平台未提供的值时，才以显式明/暗配对添加品牌色（如 useBrandColors 钩子），品牌色集保持极小（accent、accentContrast，可能每个功能一个 tint）。
11. 区分静态安全与仅钩子：语义/平台色是静态安全的，可在模块作用域导入；品牌明暗配对是仅钩子的，只能在组件渲染时应用；绝不在同一文件混用两者。
12. 若静态样式需要品牌强调色，要么在组件渲染时应用，要么用静态动态颜色（iOS 上 DynamicColorIOS）使其变为静态安全。
13. 间距：使用基于 4 点网格的单一尺度，按尺寸而非用途命名（xs:4、sm:8、md:16、lg:24、xl:32、xxl:48）。
14. 用 gap 配合间距令牌做布局节奏；屏幕边缘内边距统一为 spacing.md；需要中间值时用最近步长；若同一 4 的倍数（如 12、20）反复出现，则将其作为命名步长加入尺度并纳入审计白名单。
15. 排版：定义命名文本样式而非原始字号，镜像平台阶梯（Apple 文本样式）：largeTitle、title、headline、body、subhead、caption。
16. 若项目打包静态字体文件（每字重一个文件，用 expo-font 或配置插件加载），则通过 fontFamily 名称设置字重并省略 fontWeight，否则 iOS 会合成字重或回退到系统字体。
17. 通过单一组件（如 ThemedText）暴露文本样式，使屏幕永不直接接触 fontSize。
18. 动态字体：文本随系统字号缩放（allowFontScaling 默认开启）；用 padding 或 minHeight 让行可增长，检查大号无障碍字号；让标签换行或重排，再考虑对受限 chrome 使用 maxFontSizeMultiplier；绝不用 allowFontScaling={false} 全局禁用缩放。
19. 圆角：定义 radius 尺度（sm:8、md:12、lg:16、full:9999）；每个非胶囊圆角都配 borderCurve: "continuous"。
20. 阴影：使用 boxShadow 字符串（绝不用旧式 shadow/elevation 属性），两到三个层级即可（card、raised、overlay）。
21. 动效：定义时长与共享弹簧/缓动配置（fast:150 状态反馈、base:250 元素过渡、slow:400 大表面），使全应用动画感觉相关；注意不要把 Color/PlatformColor 令牌值传入 Reanimated 样式，那里用静态颜色。
22. 可复用组件放在 src/components/；每个设计系统原语显式定义：变体（primary、secondary、ghost、destructive，仅当真实屏幕需要时添加）、尺寸（sm、md、lg，默认 md，映射到间距/排版令牌）、状态（默认、pressed 而非 hover、disabled、loading，用 Pressable 样式函数处理 pressed，绝不让可点击元素缺少按压反馈）。
23. 组件接受 style 属性并最后合并，使调用方可调整布局（边距、flex）而无需分叉组件；调用方可覆盖布局而非身份——调用方改按钮颜色说明变体集缺了东西。
24. 自定义交互原语暴露其角色与 disabled/busy/selected 状态；文本子元素可提供标签；仅图标控件和用 spinner 替换文本的按钮需要显式标签且在加载时仍可用；也要验证原生控件上的标签。
25. 组合优于配置：当组件 props 开始描述内容（leftIcon、subtitle、footerText、badgeCount）时，停止加 props 改为接受 children；渲染 children 并带令牌内边距的 Card 比有十二个内容 props 的 Card 更长寿。
26. 抽取时机：当视图出现在两个或更多屏幕、有可命名角色（如 Card、EmptyState、Badge）、且 API 小于实现时，才提升到 src/components/。
27. 提升路径：内联 JSX → screens/<name>/ 中的组件 → src/components/；一次只走一步，触发条件满足时才移动，绝不投机性抽取；错误的抽象比重复代价更高。
28. 不要包装已承载设计语言的平台组件（Switch、DateTimePicker、栈头部、@expo/ui 视图）只为让它们走系统；对这些组件而言原生样式就是设计系统。
29. 决策归属：任何用过两次的视觉值放 src/theme/；被复用元素的结构与变体放 src/components/；单个屏幕的私有组合放 screens/<name>/；一次性局部调整内联并注释；屏幕标题与顶层 chrome 放导航栈选项。
30. 构建或修改屏幕后截图并按原则自查：层级/对比（最重要元素是否明显第一，用 type 阶梯修复而非临时字号）、邻近/留白（相关项是否比不相关项更近，用 gap + 间距令牌修复）、重复/统一（所有圆角、阴影、强调色是否一致，不一致说明有值逃出主题，移回去）、对齐（边缘是否共享轴线，用一致的屏幕边缘内边距修复）。
31. 修复值后重新检查渲染结果；若同一缺陷跨屏幕反复出现，修复共享令牌或组件；同时运行 expo-native-ui 行为部分的主要任务与内容检查，截图无法验证交互。
32. 识别并避免命名失败（Native Slop）：The Web Modal（自定义居中对话框，改用原生 sheet 或菜单）、Everything's a Card（每行每节都套白色圆角阴影盒，改用分组列表）、Emoji Iconography（用 emoji 当图标，改用 SF Symbols/Material 图标）、The Purple-Gradient Hero（装饰性渐变把任务推到折叠以下）、The Spinner Blink（每个状态间全屏 spinner 或首次加载时闪现空状态）。
33. 把视觉特征当作评审提示而非全面禁令；修复可观察的问题并尊重用户简报与现有设计系统；完整 20 条与 grep 检查见 references/native-slop.md。
34. 审计已有应用：按 references/audit.md 的 grep 检查、评分标准、增量采用顺序，以及记录现有组件和提议新组件的模板来度量漂移。
35. 如遇错误或过时信息，用 npx --yes submit-expo-feedback@latest --category skills --subject "expo-design-system" "<actionable feedback>" 提交反馈；若 AI 代理反复失败或用户接管，加载 expo-skill-feedback 技能并走其 eval-candidate 流程。

适用边界 · 注意事项

• 平台样式细节（语义色、HIG 规则、原生控件）应使用 expo-native-ui 技能，而非本技能。
• 新应用的文件夹布局应使用 expo-project-structure 技能。
• Tailwind 项目应把令牌放在 global.css 作为 CSS 变量并遵循样式库自身设置指南，仅尺度和命名沿用本技能。