最近我在用 Claude Code 开发一个 React Native 项目，代码跑得挺顺，但每次让它生成界面，出来的效果总是“能用就好”。按钮间距不对称、颜色撞得难受、整体布局像临时堆砌。开发者论坛里很多人吐槽过这个，AI 写逻辑强，但审美这块始终是短板。我刷到 Mattia 的这条推文时，心里其实没抱太大期待——又一个“提升设计”的工具？点开视频一看，却直接被震住了。
视频里他让代理用 Sleek Design Skill 建一个游戏化番茄钟 App。整个过程就是一句 prompt，代理自己去调用 Sleek，生成每个屏幕的 HTML 代码和截图，然后并行转成 React Native 文件。渲染出来的 iPhone 界面，番茄角色呆萌又高级，计时器渐变按钮、进度卡片、统计页的配色和间距，全是那种能直接上线 App Store 的水准。我当时就想，这 Skill 是不是把“设计品味”打包成了可安装的模块？正好我手头有项目需要优化，决定立刻上手测测看。结果一试，发现它确实把 AI 编码流程里最薄弱的设计环节补上了，而且操作远没有想象中复杂。
我理解的是，这个 Skill 不是让 AI 自己凭空画图，而是让代理和 Sleek 这个 AI 移动设计工具无缝对接。Sleek 负责出专业设计，代理负责把设计翻译成代码，两边配合后，输出的 UI 瞬间从“功能型”升级到“产品级”。这个细节很多人忽略了——以前我们总在 prompt 里反复强调“用现代设计风格”“参考 iOS Human Interface Guidelines”，但效果有限。现在直接装个 Skill，就相当于给代理装了个随叫随到的设计专家。
Sleek Design Skill 到底是怎么解决 AI 移动设计痛点的？
我先简单说说背景。AI 代理写移动 App 代码已经很成熟了，不管是 React Native 还是 SwiftUI，逻辑和功能基本能一次过。但设计一直是硬伤：配色没层次、排版没节奏、交互反馈平淡。原因其实很简单，LLM 训练数据里虽然有大量 UI 代码，可“品味”这种主观东西很难量化。很多开发者最后还是得自己手动调样式，或者拉设计师来救场，效率大打折扣。
Sleek Design Skill 就把这个环节外包给了专业的 AI 设计工具。Skill 的全称是 design-mobile-apps，它能让代理直接创建屏幕、生成 HTML 预览和截图，然后代理拿着这些参考去写真实代码。视频演示里，代理先用 Sleek 生成 home、stats、timer 三个屏幕的 HTML 和 PNG，存到 design 文件夹，再并行创建所有屏幕文件。整个过程代理自己思考、调用、保存，几乎不需要人工干预。
我上手之后发现，这个设计不是泛泛的“漂亮”，而是针对移动端的：圆角、阴影、间距、字体权重都贴合 iOS / Android 的现代风格。假设你做一个番茄钟，Skill 能自动给出带角色插图的欢迎页、带倒计时大按钮的工作页、带周统计的进度页，这些元素组合起来既有功能性又有情感温度。理论上，这套流程能让任何支持 skills 的代理（Claude Code、Codex 或者其他）都受益，因为设计参考是通用的 HTML，代理再转成目标语言就行。社区里已经有开发者反馈，用它之后生成的 UI 不再“一眼开发者味”，信任度直接拉满。
更重要的是，它把设计变成了可复用的模块。以前每次新项目都要重写一堆设计 prompt，现在装一次 Skill，后续项目直接调用就行。这点反直觉的地方在于：我们总觉得设计是艺术、代码是工程，现在却能把“艺术”也模块化安装。Skill 目前专注移动 App（网页暂时还不支持），但这已经覆盖了大多数独立开发者或小团队的场景。我测的这个 demo 项目，从 prompt 到完整可运行 App，前后不到两分钟，UI 质量直接超过我自己以前手调的版本。
Sleek Design Skill 让代理不再只是“会写代码”，而是“会设计代码”。这可能是 AI 移动开发下一个明显的分水岭。
安装和配置 Sleek Design Skill 到底有多容易？
说实话，我原本以为要注册一堆账号、填各种 key，结果整个过程比想象中轻量多了。根据官方提供的 GitHub 仓库，安装命令就一行：
npx skills add sleekdotdesign/Agent-skills
或者直接指定 skill：
npx skills add sleekdotdesign/agent-skills -s sleek-design-mobile-apps
安装前有两个硬性要求：必须有 Sleek 的 Pro 计划及以上账号（免费版不支持），然后在 sleek.design/dashboard/api-keys 页面创建 API key，把它存到环境变量 SLEEK_API_KEY 里。整个配置我在 Mac 上花了不到一分钟，终端里敲完命令后，Skill 就自动注册到我的 Claude Code 环境了。
我测了一下，Skill 安装完后，代理会自动识别并使用它。prompt 里不用写特别长的指令，只要提到“using Sleek skill for the design”就行，代理自己知道怎么调用。GitHub 文档写得很清楚，这个 skill 专门用来设计移动 App、创建屏幕、管理 Sleek 项目，整个交互都是通过 Sleek 的 API 完成的。社区反馈也一致：只要环境变量设置对，基本一次成功。
这个细节很多人忽略了——Skill 不是独立运行的工具，而是“代理增强模块”。它不替换你的编码代理，而是给代理额外的能力。安装后重启一下 Claude Code（或者你用的任何支持 skills 的工具），就能直接用了。整个过程没有复杂的依赖，也没有需要额外学习的 DSL，熟悉 npx 的开发者上手零门槛。
安装只需要一行 npx 命令 + 一个 API key，配置完立刻可用。这就是 agent skills 最方便的地方。
操作 / 案例：用 Sleek Design Skill 快速做一个游戏化番茄钟
我直接复现了视频里的案例，步骤非常清晰，下面是完整操作记录（全过程我自己跑了一遍，耗时不到三分钟）：
- 1. 确保已安装 Skill 并设置好
SLEEK_API_KEY 环境变量。 - 2. 在终端进入项目目录，启动 Claude Code（或者你用的代理工具）。
- 3. 输入 prompt：
Build a gamified pomodoro timer app in React Native using Sleek skill for the design
- 4. 代理自动开始工作：它先调用 Sleek 生成 home、stats、timer 三个屏幕的 HTML 代码和 PNG 截图，全部保存到
./design 文件夹。终端会实时显示 “Saved timer.png”“Saved home.html”等信息。 - 5. 接下来代理读取这些文件，理解设计语言（颜色、间距、组件结构），然后并行创建所有屏幕的 React Native 代码文件。代码里直接带了现代样式，比如圆角阴影、渐变按钮、自定义字体权重。
- 6. 最后运行项目，iPhone 模拟器里就出现了完整 App：顶部 3 天 streak 徽章、呆萌番茄角色、25:00 大倒计时、醒目的 START FOCUS 按钮，底部还有 Home / Stats / Profile 导航。切换到进度页，能看到每周柱状图、会话记录，视觉上既有游戏感又不花哨。
整个 demo 项目从零到可运行，只用了一句 prompt。生成的 UI 比我之前手动写的好看太多，颜色方案是柔和渐变，交互反馈自然，角色插图也增加了趣味性。假设你想改成 SwiftUI，代理也可以拿着同样的 HTML 参考去适配，因为设计语言是通用的。
我额外试了下现有项目：把一个旧的计时器页面描述给代理，它也能用 Skill 重新生成设计后再重构代码，效果一样好。目前 Skill 专注移动 App，但从社区讨论看，未来扩展应该不难。
总的来说，这次上手让我对 AI 移动开发的信心又多了一点。Sleek Design Skill 把“设计”这个曾经最难标准化的环节，变成了一个可安装、可复用的能力。只要你已经在用支持 skills 的代理，强烈建议去 GitHub 装一个试试。尤其是做独立 App 的朋友，这可能直接把你的产品视觉质量拉高一个档次。
粤ICP备14082021号
免费POC，
零成本试错
