Flutter AppStore Doc + UI Kit
Generate an App Store-ready pack in gated stages with mandatory user review between stages:
- -
docs/app-feature-spec.zh-CN.md + INLINECODE1 - INLINECODE2 (AI-generated Apple-style page design images)
- INLINECODE3 +
icon/app_icon_1024.svg (square-corner icon)
Workflow (Approval-Gated)
- 1. Generate APP feature docs in Chinese + English and output them.
- Ask user to download/review docs; wait for: continue or revise docs.
- Proceed only after user explicitly approves docs.
- Confirm image-generation capability:
- If API/model access exists, generate page-level UI images from approved docs.
- If no API/model access, output one unified style prompt package for user-side generation.
- 5. Ask user to download/review UI images.
- Proceed only after user explicitly approves UI images.
- Confirm icon-generation capability:
- If API/model access exists, generate icon via model.
- If no API/model access, generate icon with programmatic SVG->PNG pipeline.
- 8. Ask user to review icon.
- Finish only after user explicitly approves icon.
Do not auto-skip any gate. If user asks for changes, revise only that stage and re-submit for approval.
1) Required Inputs
Collect/confirm:
- - App name
- Target language(s)
- Preferred app direction (if none, pick a low-saturation utility direction)
- Optional color style
Hard constraints to enforce:
- - Tech stack: Flutter via FVM Flutter 3.35.1
- Includes camera + photo library permissions
- Avoid over-saturated app categories and avoid risky claim patterns
- No backend server required
- No TODO placeholders or temporary/fake data sections
- Document scope must be version 1.0.0 only
- Do not include roadmap/future updates/backlog/post-v1 plans
- Can include general capabilities: i18n, dark mode, accessibility, privacy-first local storage
- App icon must be square-corner (not rounded)
2) Stage 1 — Generate and Deliver Feature Docs (ZH + EN)
Run once:
CODEBLOCK0
Then prepare doc outputs first and deliver only docs for review:
- -
docs/app-feature-spec.zh-CN.md (if missing, derive from base spec and provide Chinese version) - INLINECODE6 (if missing, derive from base spec and provide English version)
If the generator only creates one base spec file, split/translate into two locale files before sending to user.
3) Stage 2 — Generate and Deliver UI Design Images
After user approves both docs, check capability first.
Option A: API/model access available
Use
scripts/generate_ui_ai.py.
Required auth:
- -
OPENAI_API_KEY in environment (or another confirmed image model backend configured by user).
Example:
CODEBLOCK1
Outputs:
- -
ui/page-01-*.png ... INLINECODE10
Option B: no API/model access
Output a single unified prompt package (global style + 8 page prompts + naming rules) for the user to generate images manually in external tools.
Then collect user-generated images and continue to UI review gate.
Do not deliver icon in this stage.
4) Stage 3 — Generate and Deliver App Icon
After user approves UI images, check capability first.
Option A: API/model access available
Generate icon with image model and export PNG.
Option B: no API/model access
Generate icon with deterministic programmatic pipeline (SVG source + PNG output).
Deliver icon artifacts:
- - INLINECODE11
- INLINECODE12
5) Quality Validation
Before each approval gate, validate that stage artifacts are complete:
Doc stage:
- - Both
zh-CN and en-US docs exist and are semantically aligned. - Feature doc explicitly states FVM Flutter 3.35.1.
- Feature doc version is explicitly marked
1.0.0. - Camera + photo permissions appear in feature/privacy sections.
- No backend dependency appears in architecture/data flow.
- No TODO/TBD/temp/placeholder language.
- No roadmap / future update sections are present.
UI stage:
- - UI images are PNG outputs (AI-generated or user-generated from provided prompt package).
- UI images cover all listed key pages in approved spec.
- Labels and flows match approved doc wording.
Icon stage:
- - Icon is visually square (no rounded corner mask baked into source).
- Icon style matches approved product direction.
6) App Store Safety Guidance
Use references/review-safety-checklist.md and keep copy conservative:
- - No medical/financial/legal guarantee claims
- No “instant earnings” or manipulative wording
- Permission usage tied to clear user-triggered actions
- Privacy text explicitly local-first and user-controllable
Notes
- - This skill creates design/spec artifacts, not Flutter code.
- If user also needs implementation scaffolding, create a separate Flutter build skill.
Flutter AppStore 文档 + UI 工具包
在分阶段的门控流程中生成App Store就绪包,阶段之间需经过用户审核:
- - docs/app-feature-spec.zh-CN.md + docs/app-feature-spec.en-US.md
- ui/*.png(AI生成的苹果风格页面设计图片)
- icon/appicon1024.png + icon/appicon1024.svg(直角图标)
工作流程(审批门控)
- 1. 生成中英文App功能文档并输出。
- 要求用户下载/审核文档;等待:继续或修改文档。
- 仅在用户明确批准文档后继续。
- 确认图片生成能力:
- 如果存在API/模型访问权限,根据已批准的文档生成页面级UI图片。
- 如果没有API/模型访问权限,输出一个统一的样式提示包供用户端生成。
- 5. 要求用户下载/审核UI图片。
- 仅在用户明确批准UI图片后继续。
- 确认图标生成能力:
- 如果存在API/模型访问权限,通过模型生成图标。
- 如果没有API/模型访问权限,通过程序化SVG->PNG管道生成图标。
- 8. 要求用户审核图标。
- 仅在用户明确批准图标后完成。
不要自动跳过任何门控。如果用户要求修改,仅修改该阶段并重新提交审批。
1) 必需输入
收集/确认:
- - 应用名称
- 目标语言
- 首选应用方向(若无,选择低饱和度实用方向)
- 可选颜色风格
需强制执行的硬约束:
- - 技术栈:通过FVM Flutter 3.35.1的Flutter
- 包含相机+相册权限
- 避免过度饱和的应用类别,避免风险性声明模式
- 无需后端服务器
- 无TODO占位符或临时/虚假数据部分
- 文档范围必须仅为版本1.0.0
- 不包含路线图/未来更新/待办事项/1.0后计划
- 可包含通用能力:国际化、深色模式、无障碍、隐私优先的本地存储
- 应用图标必须为直角(非圆角)
2) 阶段1 — 生成并交付功能文档(中文+英文)
运行一次:
bash
python3 scripts/generateappstorepack.py \
--app-name SnapSort \
--out ./out/snapsort \
--locales en,zh-Hans \
--primary-color #0A84FF
然后先准备文档输出,仅交付文档供审核:
- - docs/app-feature-spec.zh-CN.md(若缺失,从基础规范推导并提供中文版本)
- docs/app-feature-spec.en-US.md(若缺失,从基础规范推导并提供英文版本)
如果生成器仅创建一个基础规范文件,在发送给用户前将其拆分/翻译为两个语言文件。
3) 阶段2 — 生成并交付UI设计图片
用户批准两个文档后,首先检查能力。
选项A:存在API/模型访问权限
使用scripts/generate
uiai.py。
必需认证:
- - 环境中的OPENAIAPIKEY(或用户配置的其他已确认图像模型后端)。
示例:
bash
python3 scripts/generateuiai.py \
--doc ./out/snapsort/docs/app-feature-spec.en-US.md \
--out ./out/snapsort/ui \
--primary-color #0A84FF
输出:
- - ui/page-01-.png ... ui/page-08-.png
选项B:无API/模型访问权限
输出一个统一的提示包(全局样式+8个页面提示+命名规则),供用户在外部工具中手动生成图片。
然后收集用户生成的图片,继续进入UI审核门控。
此阶段不交付图标。
4) 阶段3 — 生成并交付应用图标
用户批准UI图片后,首先检查能力。
选项A:存在API/模型访问权限
使用图像模型生成图标并导出PNG。
选项B:无API/模型访问权限
通过确定性程序化管道生成图标(SVG源+PNG输出)。
交付图标产物:
- - icon/appicon1024.png
- icon/appicon1024.svg
5) 质量验证
在每个审批门控前,验证阶段产物是否完整:
文档阶段:
- - 存在zh-CN和en-US两个文档且语义一致。
- 功能文档明确声明FVM Flutter 3.35.1。
- 功能文档版本明确标记为1.0.0。
- 相机+相册权限出现在功能/隐私部分。
- 架构/数据流中无后端依赖。
- 无TODO/TBD/临时/占位符语言。
- 无路线图/未来更新部分。
UI阶段:
- - UI图片为PNG输出(AI生成或用户根据提供的提示包生成)。
- UI图片覆盖已批准规范中列出的所有关键页面。
- 标签和流程与已批准的文档措辞一致。
图标阶段:
- - 图标视觉上为方形(源文件中未嵌入圆角蒙版)。
- 图标风格与已批准的产品方向一致。
6) App Store安全指南
使用references/review-safety-checklist.md并保持文案保守:
- - 无医疗/金融/法律保证声明
- 无即时收益或操纵性措辞
- 权限使用与明确的用户触发操作关联
- 隐私文本明确为本地优先且用户可控
备注
- - 此技能创建设计/规范产物,而非Flutter代码。
- 如果用户还需要实现脚手架,请创建一个单独的Flutter构建技能。