尧图网页设计 
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.是构建者不只是研究者。项目包含两个配套技能技能职责appllama-usage研究引擎教 Agent 像设计总监一样使用 Appllama MCP研究畅销 App 的真实界面appllama-app-design-skill构建标准定义原生质感的硬性验收门槛含完整的模拟器验证循环两者分工明确usage 决定研究什么design 决定怎么构建且都坚持循环的终点只能是模拟器里挑不出毛病的屏幕。为什么你的 App 有网页感用 Expo / React Native 做的 App第一眼像 Web 页面往往不是布局错了而是踩中了平台细节的雷区。skills/appllama-app-design-skill/SKILL.md 中的Native fidelity laws原生保真法则开篇就点明这些细节就是套壳网页和原生应用的分界线。违反任何一条都是缺陷不是风格偏好。下面就是这12 条原生保真法则清单可以直接当检查表用 ✅12条原生保真法则清单 法则 1语义化颜色双主题第一天就要有从项目第一天起就使用系统语义颜色令牌iOS 的label、secondarySystemBackgroundAndroid 的 Material 动态色每个屏幕必须在浅色和深色模式下都正确渲染才算完成。法则 2用原生控件别自己重造Switch、Slider、分段控制器、上下文菜单、日期选择器一律使用原生控件。一个自绘的开关如果比 iOS 系统的动画慢 50 毫秒用户会瞬间觉得假。选型对照表见 references/native-controls.md。法则 3图标用 SF Symbols / Material SymbolsiOS 优先 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而不是堆 marginScrollView 的 padding 放进contentContainerStyle。法则 8安全区和灵动岛是设计的一部分必须验证内容滚动到灵动岛下方时的模糊/渐隐效果是否成立、底部 CTA 是否避让了 Home 指示条、横屏若支持下是否正常。法则 9导航标题交给导航器能用 Stack 的原生标题含 iOS 大标题折叠行为就绝不自绘 header。法则 10触觉反馈是标点符号选中档位时给轻 tick、元素回位时给轻 impact、结果成功/失败时给 notification——与视觉反馈同帧出现、每个用户动作只响一次永远不要作为唯一反馈也绝不在滚动和循环里触发。法则 11像产品一样格式化数字而不是像数据库1.4M、38k、$4.99——去掉多余的尾零本地化日期。法则 12根滚动行为任何可能溢出的屏幕路由的第一个组件就应是 ScrollView并开启contentInsetAdjustmentBehaviorautomatic尺寸用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 要求在 iOS 模拟器启动截图并真的去看对齐、间距节奏、长内容截断、深色模式、动态字体 XL整条流程录屏全速看一遍感受再逐帧拖——截图能证明布局证明不了动效逐帧猎杀丢帧、一帧白闪、错误主题帧、布局跳变、弹簧过冲修复 → 重启 → 再验证直到放大 100% 也挑不出毛病才算完成动效本身也有硬门槛手势动画必须走 Worklet 共享值、绝不跨 JS 线程验收标准是在支持的最慢设备上用 release 包实测 60 fps——开发模式恰好会掩盖你正在追的那些卡顿详见 references/performance.md 和 references/motion.md。一键安装立即生效 在项目根目录执行一条命令即可装入 Claude Code、Cursor、Codex 等 70 Agentnpx skillslatest add appllama/appllama-skills只想装设计技能不连 MCP 也能独立工作npx skillslatest 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 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.是构建者不只是研究者。项目包含两个配套技能技能职责appllama-usage研究引擎教 Agent 像设计总监一样使用 Appllama MCP研究畅销 App 的真实界面appllama-app-design-skill构建标准定义原生质感的硬性验收门槛含完整的模拟器验证循环两者分工明确usage 决定研究什么design 决定怎么构建且都坚持循环的终点只能是模拟器里挑不出毛病的屏幕。为什么你的 App 有网页感用 Expo / React Native 做的 App第一眼像 Web 页面往往不是布局错了而是踩中了平台细节的雷区。skills/appllama-app-design-skill/SKILL.md 中的Native fidelity laws原生保真法则开篇就点明这些细节就是套壳网页和原生应用的分界线。违反任何一条都是缺陷不是风格偏好。下面就是这12 条原生保真法则清单可以直接当检查表用 ✅12条原生保真法则清单 法则 1语义化颜色双主题第一天就要有从项目第一天起就使用系统语义颜色令牌iOS 的label、secondarySystemBackgroundAndroid 的 Material 动态色每个屏幕必须在浅色和深色模式下都正确渲染才算完成。法则 2用原生控件别自己重造Switch、Slider、分段控制器、上下文菜单、日期选择器一律使用原生控件。一个自绘的开关如果比 iOS 系统的动画慢 50 毫秒用户会瞬间觉得假。选型对照表见 references/native-controls.md。法则 3图标用 SF Symbols / Material SymbolsiOS 优先 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而不是堆 marginScrollView 的 padding 放进contentContainerStyle。法则 8安全区和灵动岛是设计的一部分必须验证内容滚动到灵动岛下方时的模糊/渐隐效果是否成立、底部 CTA 是否避让了 Home 指示条、横屏若支持下是否正常。法则 9导航标题交给导航器能用 Stack 的原生标题含 iOS 大标题折叠行为就绝不自绘 header。法则 10触觉反馈是标点符号选中档位时给轻 tick、元素回位时给轻 impact、结果成功/失败时给 notification——与视觉反馈同帧出现、每个用户动作只响一次永远不要作为唯一反馈也绝不在滚动和循环里触发。法则 11像产品一样格式化数字而不是像数据库1.4M、38k、$4.99——去掉多余的尾零本地化日期。法则 12根滚动行为任何可能溢出的屏幕路由的第一个组件就应是 ScrollView并开启contentInsetAdjustmentBehaviorautomatic尺寸用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 要求在 iOS 模拟器启动截图并真的去看对齐、间距节奏、长内容截断、深色模式、动态字体 XL整条流程录屏全速看一遍感受再逐帧拖——截图能证明布局证明不了动效逐帧猎杀丢帧、一帧白闪、错误主题帧、布局跳变、弹簧过冲修复 → 重启 → 再验证直到放大 100% 也挑不出毛病才算完成动效本身也有硬门槛手势动画必须走 Worklet 共享值、绝不跨 JS 线程验收标准是在支持的最慢设备上用 release 包实测 60 fps——开发模式恰好会掩盖你正在追的那些卡顿详见 references/performance.md 和 references/motion.md。一键安装立即生效 在项目根目录执行一条命令即可装入 Claude Code、Cursor、Codex 等 70 Agentnpx skillslatest add appllama/appllama-skills只想装设计技能不连 MCP 也能独立工作npx skillslatest 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考