mobile-app-ui-design
一个指导设计专业移动应用界面的Claude技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：mobile-app-ui-design。 它的用途是：一个指导设计专业移动应用界面的Claude技能。 完整的 Skill 内容见：https://321skill.com/skills/mobile-app-ui-design/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我想设计一个健身记录App的主页，用户主要是年轻上班族，需要展示今日运动数据、快速开始按钮和每周趋势。”，它会先引导你明确用户目标和情感基调，然后按照结构优先（如将‘开始运动’按钮放在拇指热区）和视觉设计（应用色彩、字体、间距系统）的步骤，生成一个专业、清晰的设计方案描述和布局建议。
介绍
这个技能旨在解决移动应用界面设计中的专业性问题，帮助用户快速生成符合现代设计规范、视觉美观且用户体验流畅的移动端UI/UX方案。它提供了一套从理解上下文、规划用户流程到应用视觉设计原则的完整方法论。
使用时，用户只需向AI描述其应用类型、目标用户和核心功能，该技能便会引导AI遵循一套结构化的设计流程，产出包含布局、色彩、字体、间距等细节的专业设计方案，并参考Airbnb、Spotify等顶级应用的设计哲学。
它非常适合产品经理、独立开发者、UI/UX设计初学者，或任何需要在没有专业设计师参与的情况下，快速构思或优化移动应用界面原型的人员。
与同类仅提供笼统建议或简单组件库的AI技能不同，它深度整合了行业最佳实践（如60/30/10色彩法则、8点网格系统、拇指热区考量），强调设计的“意图性”而非简单的美观，能产出更具落地指导性的设计决策和视觉规范。
核心特点
该技能的核心区别在于其高度结构化、原则驱动的设计流程，严格遵循顶级应用的设计哲学（如F型布局、拇指热区），并提供了具体的视觉系统规则（如60/30/10色彩法则、8点网格），而非仅提供模糊的美学建议。
注意事项
不适合需要高度定制化、突破性创意或复杂交互动画的先锋性艺术设计项目。
常见问题
这个技能能直接生成代码吗？
不能，它主要指导UI/UX设计思路和视觉规范，但产出的设计可用于指导React Native、Flutter等框架的代码实现。
没有设计基础能用好吗？
可以，技能提供了清晰的设计原则和步骤，能引导初学者产出专业水准的界面方案。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/mobile-app-ui-design/raw/index.md 读取 mobile-app-ui-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/mobile-app-ui-design/raw/index.md（查看排版版本）