12条原生保真法则：appllama-skills让React Native App摆脱网页感清单

12条原生保真法则：appllama-skills让React Native App摆脱网页感清单

【免费下载链接】appllama-skillsA builder, not just a researcher. Agent skills that turn top-grossing app patterns into native-quality mobile screens.项目地址: https://gitcode.com/gh_mirrors/ap/appllama-skills

还在为 React Native App 的"网页感"头疼吗？appllama-skills是 Appllama 开源的一套 AI Agent 技能包，把 App Store 畅销榜应用的设计规律，变成 AI 编码助手可直接执行的"原生质量构建标准"。安装后，Claude Code、Cursor 等 Agent 就能帮你构建通过模拟器逐帧验证、毫无网页味的原生质感屏幕。

什么是 appllama-skills 🧠

README.md 对它的定位很精辟："A builder, not just a researcher."（是构建者，不只是研究者）。

项目包含两个配套技能：

两者分工明确：usage 决定研究什么，design 决定怎么构建，且都坚持"循环的终点只能是模拟器里挑不出毛病的屏幕"。

为什么你的 App 有"网页感"？

用 Expo / React Native 做的 App，第一眼像 Web 页面，往往不是布局错了，而是踩中了平台细节的雷区。skills/appllama-app-design-skill/SKILL.md 中的Native fidelity laws（原生保真法则）开篇就点明：

这些细节，就是"套壳网页"和"原生应用"的分界线。违反任何一条都是缺陷，不是风格偏好。

下面就是这12 条原生保真法则清单，可以直接当检查表用 ✅

12条原生保真法则清单 📋

法则 1：语义化颜色，双主题第一天就要有

从项目第一天起就使用系统语义颜色令牌（iOS 的label、secondarySystemBackground，Android 的 Material 动态色），每个屏幕必须在浅色和深色模式下都正确渲染才算完成。

法则 2：用原生控件，别自己重造

Switch、Slider、分段控制器、上下文菜单、日期选择器：一律使用原生控件。一个自绘的开关如果比 iOS 系统的动画慢 50 毫秒，用户会瞬间觉得"假"。选型对照表见 references/native-controls.md。

法则 3：图标用 SF Symbols / Material Symbols

iOS 优先 SF Symbols——它们会自动继承字重、光学尺寸和动态字体行为。同一个屏幕不要混用三种图标家族。

法则 4：排版即层级

使用平台字号梯度（iOS 的 Large Title / Title / Headline / Body / Footnote），每屏一个展示级字号；凡是计数、时间、价格，启用等宽数字（tabular-nums）；用户想复制的数据文本必须可选中。

法则 5：连续圆角

每个圆角矩形都设置borderCurve: 'continuous'。Squircle（连续曲率圆角）是成本最低、见效最快的"iOS 感"加分项。

法则 6：阴影只表达层级

用boxShadow而非过时的shadow*/elevation属性；阴影是层级逻辑，不是装饰，一个 App 只允许一套阴影体系。

法则 7：间距要有节奏

选定一个基础单位（4 或 8）然后永不偏离；优先用 flexbox 的gap而不是堆 margin；ScrollView 的 padding 放进contentContainerStyle。

法则 8：安全区和灵动岛是设计的一部分

必须验证：内容滚动到灵动岛下方时的模糊/渐隐效果是否成立、底部 CTA 是否避让了 Home 指示条、横屏（若支持）下是否正常。

法则 9：导航标题交给导航器

能用 Stack 的原生标题（含 iOS 大标题折叠行为）就绝不自绘 header。

法则 10：触觉反馈是标点符号

选中档位时给轻 tick、元素回位时给轻 impact、结果成功/失败时给 notification——与视觉反馈同帧出现、每个用户动作只响一次，永远不要作为唯一反馈，也绝不在滚动和循环里触发。

法则 11：像产品一样格式化数字，而不是像数据库

1.4M、38k、$4.99——去掉多余的尾零，本地化日期。

法则 12：根滚动行为

任何可能溢出的屏幕，路由的第一个组件就应是 ScrollView，并开启contentInsetAdjustmentBehavior="automatic"；尺寸用useWindowDimensions，不用Dimensions.get()。

法则之外：导航语义与"反 AI 味"纪律 🧭

保真法则管"静态质感"，SKILL.md 还规定了两组同样关键的行为标准：

导航法则（6 条），核心口诀：

• push 走向深处，replace 向前推进——返回键撤销的是导航，不是事件
• 呈现方式即语义：自带步骤的任务用 modal，短打断（选择器、筛选）用 formSheet，沉浸内容用 fullScreenModal
• 单行道要离开堆栈：登录、完成 onboarding、支付成功之后，返回键绝不能重新进入旧状态（已购的 paywall 永远不应再次弹出）
• Tab 之间禁止滑动切换，每个 Tab 保留自己的堆栈

反 AI 味法则（Anti-slop）：禁用紫色渐变发光 CTA、万物玻璃拟态等"模型默认审美"；一个强调色、锁死；圆角半径声明为规则后永不破坏；UI 框架里 0 个 emoji；每个意图只用一个按钮文案（别一会儿"立即开始"一会儿"马上开启"）。

不可妥协的终点：模拟器全动效循环 🎬

这套技能的"完成定义"相当严苛：一个屏幕，在你看过它运行之前，就不算存在。

references/simulator-loop.md 要求：

1. 在 iOS 模拟器启动，截图并真的去看（对齐、间距节奏、长内容截断、深色模式、动态字体 XL）
2. 整条流程录屏，全速看一遍感受，再逐帧拖——截图能证明布局，证明不了动效
3. 逐帧猎杀：丢帧、一帧白闪、错误主题帧、布局跳变、弹簧过冲
4. 修复 → 重启 → 再验证，直到放大 100% 也挑不出毛病才算完成

动效本身也有硬门槛：手势动画必须走 Worklet 共享值、绝不跨 JS 线程；验收标准是"在支持的最慢设备上用 release 包实测 60 fps"——开发模式恰好会掩盖你正在追的那些卡顿（详见 references/performance.md 和 references/motion.md）。

一键安装，立即生效 🚀

在项目根目录执行一条命令，即可装入 Claude Code、Cursor、Codex 等 70+ Agent：

npx skills@latest add appllama/appllama-skills

只想装设计技能（不连 MCP 也能独立工作）：

npx skills@latest add appllama/appllama-skills --skill appllama-app-design-skill

装好后直接对 Agent 说："先研究一下畅销的习惯追踪类 App，再帮我建一个，每个屏幕都要通过模拟器对比才能停。" 研究引擎的方法论可查阅 references/research-methods.md 与 references/improve-a-screen.md。

总结：把"原生质感"变成可验收的工程标准 📌

appllama-skills 的价值不在于教你某一行代码，而在于给 AI Agent（以及你自己）装上一套可量化、可验收的原生保真标准：12 条保真法则管静态质感，导航法则管交互语义，反 AI 味纪律管品牌一致性，模拟器全动效循环管最终裁决。

当你不确定某个界面"像不像原生"时，答案不在审美争论里——按清单逐条过一遍，挑不出缺陷的那一刻，才是它真正完成的那一刻。

【免费下载链接】appllama-skillsA builder, not just a researcher. Agent skills that turn top-grossing app patterns into native-quality mobile screens.项目地址: https://gitcode.com/gh_mirrors/ap/appllama-skills