flutter-mobile-design
专注于Flutter移动应用开发的Material Design 3专家技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：flutter-mobile-design。 它的用途是：专注于Flutter移动应用开发的Material Design 3专家技能 完整的 Skill 内容见：https://321skill.com/skills/flutter-mobile-design/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“使用flutter-mobile-design技能，帮我构建一个带有邮箱和密码输入框、记住我复选框以及登录按钮的Material 3风格登录屏幕，使用Riverpod进行状态管理。”，它会生成完整的Flutter widget代码，包含符合M3规范的ColorScheme、Typography设置，以及基于Riverpod的状态管理逻辑骨架。
介绍
这个Skill旨在解决开发者在构建Flutter移动应用时，从UI设计到代码实现、从架构选型到性能优化的全链路需求。它尤其擅长将Figma等设计稿高效、准确地转换为遵循Material Design 3规范的Flutter代码，并提供基于Riverpod、BLoC等主流架构的最佳实践指导。
使用方式非常简单，在Claude中安装此Skill后，您可以直接用自然语言描述您的开发需求，例如“创建一个Material 3风格的登录页面”或“将这个设计稿转换成Flutter代码”。Skill会理解您的意图，并生成高质量、可运行的Flutter代码片段或完整的实现方案。
它非常适合前端开发、移动应用开发者和全栈开发者，特别是那些希望快速构建现代化、美观且符合设计系统的Flutter应用的工程师。对于需要将设计概念快速落地的产品经理或UI设计师来说，这也是一个极佳的沟通和验证工具。
建议在使用时，尽量提供清晰的设计描述或参考图。虽然Skill能自动识别需求，但若功能未触发，可在提示词中明确指定“使用flutter-mobile-design技能”。对于复杂的业务逻辑，建议结合具体的状态管理库（如Riverpod）进行描述，以获得更贴合项目架构的代码。
核心特点
本Skill深度集成了最新的Material Design 3（M3）设计系统，能生成完全遵循M3色彩、排版和组件规范的前沿代码；同时，它并非简单的代码生成器，而是提供了从设计到代码、架构选型（如Riverpod、BLoC）到最佳实践的完整开发指导。
注意事项
不适合非Flutter技术栈（如原生iOS/Android开发）或对Material Design风格无要求的项目。
常见问题
这个Skill支持React Native吗？
不支持，本仓库的`flutter-mobile-design`技能专精于Flutter。如需React Native，请安装同仓库下的`react-native-mobile-design`技能。
如何确保生成的代码符合我的项目架构？
在提示词中明确指定您使用的状态管理库（如“使用Riverpod”），Skill会据此生成适配的代码结构。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/flutter-mobile-design/raw/index.md 读取 flutter-mobile-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/flutter-mobile-design/raw/index.md（查看排版版本）