尧图网页设计 
如何让AI写出像原生的AppExpo Skills原生UI、expo/ui与设计系统完整指南【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/gh_mirrors/skills9/skills还在为 AI 生成的 App 总有一股网页味而头疼吗Expo Skills 是 Expo 官方团队开源的一套 AI 智能体技能包专治这种AI 脸。它通过expo-native-ui原生 UI 规范、expo/ui真原生组件和expo-design-system设计系统三个技能让 AI 助手像资深移动工程师一样为你写出符合 iOS 人界面指南与 Material Design 3 的原生级应用。本指南将带你快速上手这套 Expo 原生 UI 技能告别AI 生成感。为什么 AI 写出的 App 不像原生AI 常见的翻车现场用 emoji 当图标、每个列表项都塞进白色圆角卡片、紫色渐变 Hero 占满首屏……这些在 native-slop.md 中被总结为20 种原生味翻车反模式Native Slop包括Web 弹窗卡片泛滥深色模式失忆等。Expo Skills 的思路很简单把什么才像原生变成 AI 能读懂的规则手册。每个技能都是一个 SKILL.md 文件AI 会根据任务自动加载对应技能。快速安装 Expo Skills 技能包插件安装适合 Claude Code / Codex官方市场自动更新claude plugin install expoclaude-plugins-officialSkills CLI 安装适合 Cursor、Copilot、Windsurf 等大多数 AI 编码工具npx skillslatest add expo/skills --skill *在项目根目录执行后重启 AI 会话即可。完整的技能清单与更新方法见 README.md。技能一expo-native-ui掌握原生视觉语言expo-native-ui 是视觉语言教练核心规则包括各说各话的设计语言iOS 遵循 Apple HIGAndroid 遵循 Material Design 3绝不把 iOS 的大标题搬去 Android语义化颜色用Color.ios.label、Color.android.dynamic.onSurface等原生色值自动适配深浅色模式告别深色模式失忆原生图标iOS 用 SF Symbolsexpo-symbolsAndroid 用 Material 图标✨ 当图标是明确禁止项原生手感iOS 上用expo-haptics触觉反馈圆角统一用borderCurve: continuous配套的参考文档覆盖 控件、图标、渐变 与视觉特效模糊、液态玻璃。技能二expo/ui渲染真正的原生组件这是让 App真的原生的关键——expo/ui 用 SwiftUIiOS和 Jetpack ComposeAndroid渲染真实原生组件而 React 只是描述层。核心亮点你需要用它底部弹出面板BottomSheet不用 Reanimated / gorhom/bottom-sheet分组设置列表ListListItem开关 / 滑块 / 选择器Switch/Slider/Picker表单分组FieldGroup/CollapsibleSDK 56 免构建通用组件层可直接在 Expo Go 中运行无需自定义原生构建一份代码三端通吃Host包裹下的组件树在 iOS、Android、Web 上无差别运行无需.ios.tsx文件拆分平滑迁移路径drop-in-replacements.md 提供了gorhom/bottom-sheet、日期选择器等 8 个社区库的 API 兼容替代品换个 import 路径即可迁移一个小坑提醒expo/ui的List渲染的是原生分组行类似 iOS 设置页不是虚拟化列表——长列表请用FlatList或FlashList。技能三expo-design-system用设计令牌统一管理视觉expo-design-system 负责值的家让所有屏幕从同一套设计令牌design tokens取值。令牌目录结构src/theme/下colors.ts # 语义色 品牌色 spacing.ts # 4 点网格xs 4 / sm 8 / md 16 / lg 24 ... typography.ts # 命名文本样式对齐系统字阶 radius.ts # 圆角 shadows.ts # 2-3 级阴影 motion.ts # 统一动画时长三条铁律出现两次的视觉值必须变成令牌——绝不硬编码十六进制颜色组件导入令牌屏幕导入组件——屏幕文件里重定义按钮颜色就是漂移已有样式库Tamagui、NativeWind 等就沿用它扩展绝不并立第二套系统技能还定义了组件契约variant / size / state / 样式覆盖 / 无障碍以及何时把重复视图升级为共享组件的判断标准。老项目想体检audit.md 提供 grep 检查、评分标准和渐进式整改方案。组合工作流三个技能如何协同Expo Skills 采用路由式协作expo-overview 是入口按任务分流搭新屏→expo-native-ui管布局与风格先查expo-ui有没有现成原生组件要动效→ 转交expo-animationReanimated 动画与手势视觉不统一→expo-design-system收敛令牌与组件要上架→eas-app-stores、expo-upgrade等 EAS 技能接力一个实用提示词示例来自官方 README用原生风格搭一个带标签栏、模态框和动画的 Expo Router 屏幕AI 会自动串联多个技能产出符合平台习惯的界面。常见问题Qexpo/ui 和 React Native 自带组件怎么选先expo/ui——它是真原生渲染且 Expo Go 免构建缺少对应组件时才回退到 RN 内置组件规则写在 expo-ui SKILL.md 的对照表中。Q我的 SDK 不到 56 能用吗通用组件层要求 SDK 56drop-in 替代品和平台专属层SwiftUI / Jetpack Compose在 SDK 55 也可用版本细节见 universal.md。Q技能会不会乱改我的项目不会。技能只教 AI 规则Expo 官方文档、Expo CLI 和 EAS CLI 才是最终事实来源遇到技能错误还可通过submit-expo-feedback反馈给官方。总结想让 AI 写出像原生的 App靠的不是玄学提示词而是一套可执行的规则装技能npx skillslatest add expo/skills --skill *一条命令搞定立规范让 AI 加载 expo-native-ui按平台设计语言写界面换引擎用 expo/ui 的真原生组件替换社区库收令牌用 expo-design-system 把颜色、间距、字号收进src/theme/按这套流程AI 的产出会从能跑的网页进化为拿不出手就不该上架的原生体验 。【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/gh_mirrors/skills9/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何让AI写出像原生的App：Expo Skills原生UI、@expo/ui与设计系统完整指南
如何让AI写出像原生的AppExpo Skills原生UI、expo/ui与设计系统完整指南【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/gh_mirrors/skills9/skills还在为 AI 生成的 App 总有一股网页味而头疼吗Expo Skills 是 Expo 官方团队开源的一套 AI 智能体技能包专治这种AI 脸。它通过expo-native-ui原生 UI 规范、expo/ui真原生组件和expo-design-system设计系统三个技能让 AI 助手像资深移动工程师一样为你写出符合 iOS 人界面指南与 Material Design 3 的原生级应用。本指南将带你快速上手这套 Expo 原生 UI 技能告别AI 生成感。为什么 AI 写出的 App 不像原生AI 常见的翻车现场用 emoji 当图标、每个列表项都塞进白色圆角卡片、紫色渐变 Hero 占满首屏……这些在 native-slop.md 中被总结为20 种原生味翻车反模式Native Slop包括Web 弹窗卡片泛滥深色模式失忆等。Expo Skills 的思路很简单把什么才像原生变成 AI 能读懂的规则手册。每个技能都是一个 SKILL.md 文件AI 会根据任务自动加载对应技能。快速安装 Expo Skills 技能包插件安装适合 Claude Code / Codex官方市场自动更新claude plugin install expoclaude-plugins-officialSkills CLI 安装适合 Cursor、Copilot、Windsurf 等大多数 AI 编码工具npx skillslatest add expo/skills --skill *在项目根目录执行后重启 AI 会话即可。完整的技能清单与更新方法见 README.md。技能一expo-native-ui掌握原生视觉语言expo-native-ui 是视觉语言教练核心规则包括各说各话的设计语言iOS 遵循 Apple HIGAndroid 遵循 Material Design 3绝不把 iOS 的大标题搬去 Android语义化颜色用Color.ios.label、Color.android.dynamic.onSurface等原生色值自动适配深浅色模式告别深色模式失忆原生图标iOS 用 SF Symbolsexpo-symbolsAndroid 用 Material 图标✨ 当图标是明确禁止项原生手感iOS 上用expo-haptics触觉反馈圆角统一用borderCurve: continuous配套的参考文档覆盖 控件、图标、渐变 与视觉特效模糊、液态玻璃。技能二expo/ui渲染真正的原生组件这是让 App真的原生的关键——expo/ui 用 SwiftUIiOS和 Jetpack ComposeAndroid渲染真实原生组件而 React 只是描述层。核心亮点你需要用它底部弹出面板BottomSheet不用 Reanimated / gorhom/bottom-sheet分组设置列表ListListItem开关 / 滑块 / 选择器Switch/Slider/Picker表单分组FieldGroup/CollapsibleSDK 56 免构建通用组件层可直接在 Expo Go 中运行无需自定义原生构建一份代码三端通吃Host包裹下的组件树在 iOS、Android、Web 上无差别运行无需.ios.tsx文件拆分平滑迁移路径drop-in-replacements.md 提供了gorhom/bottom-sheet、日期选择器等 8 个社区库的 API 兼容替代品换个 import 路径即可迁移一个小坑提醒expo/ui的List渲染的是原生分组行类似 iOS 设置页不是虚拟化列表——长列表请用FlatList或FlashList。技能三expo-design-system用设计令牌统一管理视觉expo-design-system 负责值的家让所有屏幕从同一套设计令牌design tokens取值。令牌目录结构src/theme/下colors.ts # 语义色 品牌色 spacing.ts # 4 点网格xs 4 / sm 8 / md 16 / lg 24 ... typography.ts # 命名文本样式对齐系统字阶 radius.ts # 圆角 shadows.ts # 2-3 级阴影 motion.ts # 统一动画时长三条铁律出现两次的视觉值必须变成令牌——绝不硬编码十六进制颜色组件导入令牌屏幕导入组件——屏幕文件里重定义按钮颜色就是漂移已有样式库Tamagui、NativeWind 等就沿用它扩展绝不并立第二套系统技能还定义了组件契约variant / size / state / 样式覆盖 / 无障碍以及何时把重复视图升级为共享组件的判断标准。老项目想体检audit.md 提供 grep 检查、评分标准和渐进式整改方案。组合工作流三个技能如何协同Expo Skills 采用路由式协作expo-overview 是入口按任务分流搭新屏→expo-native-ui管布局与风格先查expo-ui有没有现成原生组件要动效→ 转交expo-animationReanimated 动画与手势视觉不统一→expo-design-system收敛令牌与组件要上架→eas-app-stores、expo-upgrade等 EAS 技能接力一个实用提示词示例来自官方 README用原生风格搭一个带标签栏、模态框和动画的 Expo Router 屏幕AI 会自动串联多个技能产出符合平台习惯的界面。常见问题Qexpo/ui 和 React Native 自带组件怎么选先expo/ui——它是真原生渲染且 Expo Go 免构建缺少对应组件时才回退到 RN 内置组件规则写在 expo-ui SKILL.md 的对照表中。Q我的 SDK 不到 56 能用吗通用组件层要求 SDK 56drop-in 替代品和平台专属层SwiftUI / Jetpack Compose在 SDK 55 也可用版本细节见 universal.md。Q技能会不会乱改我的项目不会。技能只教 AI 规则Expo 官方文档、Expo CLI 和 EAS CLI 才是最终事实来源遇到技能错误还可通过submit-expo-feedback反馈给官方。总结想让 AI 写出像原生的 App靠的不是玄学提示词而是一套可执行的规则装技能npx skillslatest add expo/skills --skill *一条命令搞定立规范让 AI 加载 expo-native-ui按平台设计语言写界面换引擎用 expo/ui 的真原生组件替换社区库收令牌用 expo-design-system 把颜色、间距、字号收进src/theme/按这套流程AI 的产出会从能跑的网页进化为拿不出手就不该上架的原生体验 。【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/gh_mirrors/skills9/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考