进阶约 25 分钟 2026-10-09 01:13:05 · 2 阅读

Appllama MCP 接入实操：把畅销 App 界面库接进 AI 编程助手

做移动端 App 的界面，最难的不是写代码，是判断"这样设计对不对"。同类的成功 App 已经把答案摆在那里——它们的注册流程、付费墙、订阅页都是真金白银 A/B 测出来的。Appllama 做的事就是把畅销榜 App 的真实界面拆成一座可检索的设计图书馆，再通过 MCP 服务器把这座馆接到你的 AI 编程助手（Claude、Cursor、Codex 等）里：你说"帮我做一个习惯打卡 App"，助手先去搜真实的头部习惯类 App、翻它们的每一屏，再照着这些验证过的模式写界面。

这篇依据 Appllama 官方仓库 README 与其两条 agent skills 的说明文档整理，覆盖三块：这套 MCP 和配套 skills 怎么装、唯一的免费工具 get_credits 怎么用、官方文档里写明的额度规则与使用边界。文末会给出真实调用受限的说明——这个服务器的付费墙比一般 MCP 都硬，动手前值得知道。

先弄清楚：MCP 服务器和 skills 是两样东西

Appllama 的接入分两层，官方也是分开发布的。第一层是 MCP 服务器，端点是 https://mcp.appllama.io/mcp，负责连接数据：搜 App、翻界面、查流量，全部数据能力都在这一层。第二层是 agent skills，即仓库 Appllama/appllama-skills 里的两个技能包，负责方法论：告诉 AI 该研究什么、按什么标准做。服务器是数据接口，skills 是使用说明书，两层装齐才完整。

GitHub 仓库首页对这套组合的定位只有一句话："A builder, not just a researcher."——不止于研究，更是构建工具。仓库目前约 2454 星，在 GitHub 官方 MCP Registry 在册。

Appllama 官网 MCP 页面顶部：Try MCP 标题与 Install MCP 按钮

Appllama 官网 MCP 专页顶部，主按钮 Install MCP 直达客户端配置，旁边标着 GitHub Registry 在册与安装量

装 skills：一条命令

skills 的安装就一条命令，在项目根目录执行：

npx skills@latest add appllama/appllama-skills

README 写明这条命令对 Claude Code、Cursor、Codex 以及 70 多种 agent 通用（通过 skills.sh 分发）。三个变体供不同场景：

# 指定客户端、免交互安装
npx skills@latest add appllama/appllama-skills -a claude-code -a cursor -y

# 装到用户目录（对所有项目生效）而不是当前项目
npx skills@latest add appllama/appllama-skills -g

# 只要其中一个 skill
npx skills@latest add appllama/appllama-skills --skill appllama-app-design-skill

不想跑 npx 也可以手动装。skills 本质是普通目录，clone 仓库后把 skills/ 下的内容复制进 agent 的技能目录（Claude Code 是项目级 .claude/skills/ 或用户级 ~/.claude/skills/），其他客户端放各自的等价位置。

装进来的两条 skill 分工明确，README 的表格原文如下：

appllama-usage — The research engine: how to use the Appllama MCP like a design director — the full tool map, and the playbooks for building an app from scratch, improving an existing screen, and flow & element research.
appllama-app-design-skill — The build bar: native-feeling Expo / React Native screens — Apple HIG fidelity, semantic colors, native controls, anti-slop discipline, navigation that behaves, a strict motion bar, generated image assets, and a full-motion simulator loop.

Appllama GitHub 仓库 README 中 The skills 小节的两行表格

GitHub 仓库 README 的 The skills 小节：appllama-usage 管"研究什么"，appllama-app-design-skill 管"怎么建"

翻译过来就是：usage 决定研究什么，design 决定怎么建。官方要求两条配对使用，并且强调研究不落到模拟器验证上就不算完成——design skill 里有一条"非协商"规则：界面必须跑在模拟器里全流程验证过才算存在，截图证明不了动效，只有录屏逐帧检查可以。

连 MCP：三步与一个入口

skills 装好后连服务器。官方 MCP 专页给了两步：

第一步，添加连接器。Claude 客户端可以一键从 connector directory 加；其他客户端手动加：设置里的 Customize → Connectors → Add custom connector，端点填：

https://mcp.appllama.io/mcp

第二步，用自己的 Appllama 账号批准连接。MCP 访问属于 Pro 订阅的一部分。

Appllama MCP 页面：手动添加 custom connector 的端点地址与 Install the skills 命令

官方 MCP 页的接入区：上框是 custom connector 的端点，下框 02 是 skills 安装命令

get_credits：唯一免费的工具，先学会用它

这里要如实说： Appllama MCP 的工具面不小，但公开注册信息里 免费可用的只有一个 get_credits——查当前账户剩余额度，且这个调用本身不扣额度。其余的检索工具（搜 App、翻界面、查流量、找同类界面等）都需要 Pro 订阅的 credits。这不是缺陷，是产品形态：数据服务按量计费。README 原文写得很直白：

Start with get_credits — it's free. It tells you the balance, limits, and reset date. Pro includes 1,500 credits a month (they reset in full on the 1st, UTC); every other call spends 1 credit.

规则浓缩成三句：每次会话先调 get_credits 看余额；Pro 每月 1500 额度，每月 1 日（UTC）全额重置；除此之外每次调用花 1 额度。usage skill 的 ground rules 还补了一条：额度用尽时工具会返回带说明的错误，提示 credits 在 1 日重置、可以在 Settings → Usage 里申请更多，照着提示办即可，不要连发重试。

订阅价格以官方页面为准（印度区定价，含 GST，年付折算约每月 ₹1000；页面标注限时 38% 折扣的截止时间会变动），本文不誊抄价格表。

工具全景：一张官方地图

虽然免费层只有 get_credits，但了解全量工具有助于判断这套 MCP 值不值得订阅。usage skill 的工具地图（Tool map 一节）列了 14 个工具，按功能分四组：

工具	作用
`get_credits`	查余额、限额、重置日期。免费。
`search_apps`	按类目/需求搜 App，每页 10 个，带收入、下载量、评分、发布日期、界面数、流量清单
`get_app`	单个 App 全量档案：评分细分、类目排名、内购定价、主要国家、flows
`list_app_screens`	按用户旅程顺序翻某 App 的界面（每页 10 屏），可按 flow/section 过滤
`search_screens`	跨全库搜界面，keyword 模式按名字匹配、semantic 模式按视觉语义搜
`get_screen`	单屏详情 + 最多 5 个其他 App 的视觉相似屏；接受 `app_id/screen_id` 格式的 screen_ref
`list_flows` / `get_flow_apps`	流量分类法清单 / 含某 flow 的 App（按收入排）
`list_ui_elements` / `get_element_screens`	约 38 个 UI 元素家族清单 / 用了某元素家族的界面
`list_my_boards` / `get_board`	自己在 appllama.io 收藏的看板 / 看板全量内容

其中有个官方称为"握手"的用法：在 appllama.io 网站上任何一屏点 Copy Screen ID，会得到形如 1393061654/spl_9i075 的引用，直接把它发给 AI，AI 调 get_screen 就能定位到你说的那一屏，连带 5 个最相似的兄弟屏。

写第一条提示词之前，过一遍官方规则

usage skill 的 ground rules 有几条直接影响使用体验，提前知道能少走弯路：

媒体链接约一小时过期。研究时看到要用的界面截图要立刻下载，链接失效后凭 screen id 重新请求会拿到新链接。界面 id 是持久的，链接不是。

翻页是顺序的。每个列表响应带 next_cursor，传回去翻下一页；不能跳页，游标只对铸造它的那次查询有效，报错了就从第一页重来。

别动水印。所有界面图和视频左上角带 Appllama 水印，官方明确这是来源标记，阅读界面时忽略它，也不要在自己构建的东西里复刻它。

禁止扫库。 swept 整个目录把数据集本身扒下来属于服务条款禁止的 harvesting，官方写明"server-side detected"——服务器端能检测到。研究的姿势是带着任务查，不是为了攒数据。

这些规则在两份 skill 文档里反复出现，是使用这套服务的前提而不是建议。

试一试：官方给的五条示例提示词

README 的 Try it 一节给了五条开箱即用的提示词，直接粘给连好 MCP 的 agent 即可。这里照录三条原文：

Build me a habit tracker. Study the top-grossing habit apps first and don't stop until every screen survives the simulator comparison.
How do the best fitness apps structure onboarding — how long, what does each step earn, and where does the paywall sit?
Wire up the checkout flow. Decide which screens push, which present as sheets, and make sure nobody can go back into the paywall after paying.

第一条是完整闭环：先研究头部习惯类 App，再构建，最后用模拟器对比验证，直到每一屏都挑不出毛病——这正是两条 skill 配合的标准用法。第二条是纯研究场景，问的是健身类 App 的 onboarding 结构和付费墙位置。第三条考察导航语义：哪些屏 push、哪些用 sheet 弹出，以及付完款后不能退回付费墙（design skill 里称为"单向门"）。

没有 Pro 账号时的诚实预期

这点需要写明：不带凭证直接请求该端点，服务器返回 401 Unauthorized，响应头里的 www-authenticate 字段指向 OAuth 保护的资源元数据地址。也就是说，不同于很多"先给免费额度再登录"的 MCP，Appllama 的所有数据工具都在认证墙后。动手顺序应该是：先免费装 skills（这步不需要账号）、再决定是否为数据层订阅 Pro，然后连 MCP、先调 get_credits 确认额度到账，最后才进入正式的研究-构建循环。

另一个官方写明的边界：Appllama 的素材是真实 App 的界面与数据，MIT 许可只覆盖 skills 代码本身；仓库页脚注明 Appllama 名称、羊驼形象和 logo 是 Antmind Ventures Private Limited 的商标，许可不授予使用权。

小结

Appllama 这套组合的思路是把"参考成功案例"变成 AI 的工作方法：MCP 提供带营收语境的真实界面库，skills 把研究流程和构建标准写成 AI 能执行的纪律。对做 Expo / React Native 应用、且愿意为竞品研究付费的团队，它省下的是翻无数 App Store 页和截图的时间；对暂时不想订阅的开发者，两条 skills 本身（尤其 design skill 里那份从 HIG 保真到动效纪律的清单）也是值得单独一读的工程文档。

延伸阅读：Appllama 官网 MCP 专页（appllama.io/mcp）、GitHub 仓库 Appllama/appllama-skills、定价页 appllama.io/pricing。站内相关的 AI 客户端接入教程可参考 draw.io MCP 接入实战与 Oh My Posh 配置校验 MCP 实操两篇。

本文步骤与图片依据 Appllama 官方仓库 README、appllama-usage / appllama-app-design-skill 两条 skill 文档及 appllama.io/mcp 官方页面整理，版权归原作者所有。