移动端生成
- 作者仓库星标 0
- 作者更新于 实时读取
- 作者仓库 skills-registry
- 领域
- 设计与多媒体
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @tomevault-io · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 即装即用
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- 未声明(默认跨平台)
- 底层运行要求
- Python
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生,可能与作者实际意图存在差异。
需要注意: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: flutter-icon
description: Generates or updates Flutter app icons correctly for Android adaptive icons and iOS full-bleed.…
category: 设计与多媒体
runtime: Python
---
# flutter-icon 输出预览
## PART A: 任务判断
- 适用问题:视觉内容、演示材料、信息图或设计交付。
- 输入要求:目标材料、限制条件、期望输出和验收方式。
- 证据边界:围绕“Arguments / Rules — read before touching any file / Why these rules exist”读取原文规则,不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断:确认你的需求是否属于视觉内容、演示材料、信息图或设计交付,并标出输入、限制和预期结果。
- **02** 执行计划:优先按“Arguments / Rules — read before touching any file / Why these rules exist”拆成步骤,说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果:给出可复制的命令、文件改动、检查清单或内容草稿,并说明如何继续迭代。
- **04** 风险边界:结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件;主要在本地完成;通常不需要额外 API Key。
- 先小样例验证,再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。 原文没有稳定的斜杠命令要求。安装验证后通常全局生效,直接在对话里点名这个 Skill 并描述任务即可。
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是:读取文件、写入/修改文件。
先用一个小任务确认它会围绕“Arguments / Rules — read before touching any file / Why these rules exist”工作;涉及文件或命令时,先看 diff、日志、预览或测试结果。
检查最终产物是否包含明确结果、必要证据和下一步动作;如果输出泛泛而谈,就补充输入、边界和验收标准后重跑。
---
name: flutter-icon
description: Generates or updates Flutter app icons correctly for Android adaptive icons and iOS full-bleed.…
category: 设计与多媒体
source: tomevault-io/skills-registry
---
# flutter-icon
## 什么时候使用
- 把设计与视觉方向的常用动作沉淀成 Agent 可调用的技能 适合处理界面、视觉、封面、信息图或演示材料交付,核心价值是把输入、判断、执行、验证和交付边界固定下来,避免 Agent 泛泛回答。 把任务拆成可执行、可检查、可继续迭代的步骤…
- 面向视觉内容、演示材料、信息图或设计交付,优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「Arguments / Rules — read before touching any file / Why these rules exist」组织步骤,不把推断写成作者事实。
- 读取文件、写入/修改文件;主要在本地完成;通常不需要额外 API Key。
- 先跑小样例,确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown,不编造命令、平台或依赖。 作者原文负责流程事实;仓库文件负责来源和命令;流狐只补充适用场景、限制和质量判断。
skill "flutter-icon" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> Arguments / Rules — read before touching any file / Why these rules exist
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> Python | 读取文件、写入/修改文件 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
} Flutter App Icon Generator
Generate or update the app icon for a Flutter project correctly across Android (adaptive) and iOS (full-bleed).
Arguments
$ARGUMENTS — Optional description of the desired icon design. If empty, redesign the existing icon or use a sensible default for the project.
Rules — read before touching any file
Why these rules exist
- Android API 26+ uses adaptive icons: the OS composites a foreground layer (PNG with transparent bg) over a background layer (solid color or image) and then clips both with a shape mask (squircle, circle, etc.). If you bake rounded corners into the source image, Android clips it again → "icon inside icon."
- iOS applies its own squircle mask to a full-bleed square. Pre-baked rounded corners leave visible corner padding inside the squircle → same inset problem.
Correct approach
| Asset | Background | Rounded corners | Notes |
|---|---|---|---|
app_icon_ios.png |
Full-bleed solid color | ❌ None | iOS adds its own mask |
app_icon_foreground.png |
Transparent (RGBA) | ❌ None | Android foreground layer; content must fit inside safe zone |
Android safe zone: the center 72/108 = 66.7% of the canvas is always visible regardless of mask shape. Keep all meaningful content (outer_r, etc.) within that region. For a 1024 px canvas: safe = 683 px, so outer_r ≤ 340.
Steps
1. Check prerequisites
python3 -c "from PIL import Image; print('ok')" 2>/dev/null || pip3 install Pillow
Check pubspec.yaml for flutter_launcher_icons in dev_dependencies. If absent, add it:
dev_dependencies:
flutter_launcher_icons: ^0.14.1
2. Create icon assets directory
mkdir -p assets/icon
3. Generate icon PNGs with Python/Pillow
Write and run a Python script that produces two files:
assets/icon/app_icon_ios.png — 1024×1024, full-bleed square
from PIL import Image, ImageDraw
size = 1024
img = Image.new('RGBA', (size, size), BACKGROUND_COLOR) # solid fill, no rounded_rectangle
draw = ImageDraw.Draw(img)
# ... draw design centered on canvas ...
img.save('assets/icon/app_icon_ios.png')
- Use
Image.new('RGBA', (size, size), bg_color)for the background — notdraw.rounded_rectangle. - Design fills edge-to-edge; iOS clips to squircle automatically.
assets/icon/app_icon_foreground.png — 1024×1024, transparent background
fg = Image.new('RGBA', (size, size), (0, 0, 0, 0)) # fully transparent
draw = ImageDraw.Draw(fg)
# ... draw design centered, scaled so outer_r ≤ 340 for 1024px canvas ...
# When cutting out a center hole in a donut, fill with (0,0,0,0) not the bg color
fg.save('assets/icon/app_icon_foreground.png')
- Background must be transparent —
(0, 0, 0, 0). - Any "hole" in the design (donut center, gaps) must also be
(0, 0, 0, 0). - Scale all radii/sizes proportionally so content stays inside the 683 px safe zone.
4. Update pubspec.yaml
Set the flutter_launcher_icons section to:
flutter_launcher_icons:
android: true
ios: true
image_path_android: "assets/icon/app_icon_ios.png" # legacy Android (API < 26)
image_path_ios: "assets/icon/app_icon_ios.png"
adaptive_icon_background: "#RRGGBB" # match the bg color used in app_icon_ios.png
adaptive_icon_foreground: "assets/icon/app_icon_foreground.png"
min_sdk_android: 21
remove_alpha_ios: true
image_path_android(legacy) andimage_path_iosmust both be present — the tool errors if either is missing when using the split-path form.adaptive_icon_backgroundis a hex color string matching the background ofapp_icon_ios.png.- Do not use the single
image_pathkey when you also set adaptive icon keys.
5. Run the generator
flutter pub get && dart run flutter_launcher_icons
Expected output includes:
• Creating adaptive icons Android• Creating mipmap xml file Android✓ Successfully generated launcher icons
Verify that android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml was created — this is the adaptive icon XML. If it's missing, the Android "icon inside icon" bug is not fixed.
6. Verify
After running, confirm:
android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xmlexists and references@color/ic_launcher_background+@drawable/ic_launcher_foregroundandroid/app/src/main/res/values/colors.xmlcontains theic_launcher_backgroundcolorios/Runner/Assets.xcassets/AppIcon.appiconset/contains updated PNGs
Common mistakes to avoid
- ❌ Drawing the background with
draw.rounded_rectangle(...)— causes double-rounding on both platforms - ❌ Filling the donut center hole with the background color in the foreground PNG — should be
(0,0,0,0) - ❌ Omitting
image_path_androidwhen usingimage_path_ios— tool will error - ❌ Making
outer_r > 340on a 1024px foreground — content gets clipped by aggressive masks (circle) - ❌ Using a single
image_pathfor both platforms — loses adaptive icon support on Android
Source: albertopeam/macro-tracker — distributed by TomeVault.
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核