原型落地Flutter独立应用

SKILL开发

原名 Prototype to Flutter · 标识 prototype-to-flutter

开发 未标注权限 许可证不明确
安装这个技能

把PRD或HTML原型变成本地优先的Flutter桌面或移动应用,用统一数据契约对齐原型与代码,输出权威源和差异清单。

一句话选型结论

按资料字段整理

原型落地Flutter独立应用是开发类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类开发 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_bdd9b996/prototype-to-flutter
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

开发
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_bdd9b996仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验2026-11-06上游最后核验时间 · 数据更新 2026-11-06
正文体量10.8 KBSKILL.md 原文大小,越大说明说明书写得越细

能做什么

0 项能力
上游给出的能力概览与适用场景
原型转Flutter页面对齐原型与代码产出差异清单

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
写代码与改 bug

按需求补代码、定位并修掉报错。

读仓库与生成改动

让模型读懂项目结构,再给出可落地的改动。

跑测试与排查故障

按现象排查问题,补测试用例并复跑。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在开发场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
原型落地Flutter独立应用当前 未标注权限 未标注 未标注 未标注 有
技能审查员 浏览器控制 ClawHub 市场 877.9 万 OpenClaw 有
Vercel React 最佳实践 浏览器控制 GitHub 仓库 849.1 万 Codex、Claude、Cursor 有
GitHub 代码协作 联网访问 ClawHub 市场 763.3 万 OpenClaw 有
网页设计指南 联网访问 GitHub 仓库 668.6 万 Codex、Claude、Cursor 有
本体论 只读 ClawHub 市场 663.7 万 OpenClaw 有

SKILL.md 全文

10.8 KB
模型实际读到的说明书原文,来自技能仓库

想法 → 本地优先主本体(Prototype → Flutter,含多线对齐)

本 skill 承载「把一个想法转变成单机独立的软件」的落地方法:PRD(逻辑)→ prototype-v2(静态视觉基线,含 mock.js 数据形状)→ 可选 React Web(web/,可运行视觉事实源)→ Flutter 本地优先主本体。核心是让 AI 在把 HTML 原型转成 Flutter 代码时,视觉、逻辑、数据、契约各归其源,不互相迁就,也不在开发中途返工。

定位与适用边界

主交付物:Flutter 本地优先主本体(桌面/移动端)

  • 主形态:Flutter 桌面端 / 移动端(Windows、Android、iOS 等)。
  • 数据:本地存储(drift / SQLite),本地为唯一事实源;云端同步仅预留 sync_queue。
  • 项目现实(2026-08-23 起):存在三线并行——Go(业务权威实现)、React Web(视觉事实源)、Flutter(本地优先主本体)。本 skill 的交付物始终是 Flutter 主本体,但流程必须服从《多线开发约束》:
  • 业务规则的权威实现在 Go(服务端),Flutter 本地副本只读同步,冲突以服务端为准(离线降级行为以 PRD 为准)。
  • 视觉以 React/原型定稿;设计 Token 只改 design/tokens.json 再生成;API 契约只改 server/api/openapi.yaml。
  • AI 等能力通过本地调用或直连第三方服务(自带 Key)。

本 skill 不适用于(应拒绝并说明):

  • 无既有原型/契约,从零搭建云服务端架构(SaaS、多端实时同步服务端)的全新任务。
  • 需要新建数据库集群、微服务等基础设施的开发任务。
  • 未接入本仓库多线约束、自行另起一套命名/枚举/字段体系的任务。

何时使用(触发条件)

  • 用户要求「把一个想法做成单机 / 本地优先 / 离线可用的软件或应用」。
  • 用户要求「按原型 / 按 PRD 开发 Flutter 页面或功能」。
  • 用户要求「对齐原型与 Flutter 代码 / 实现」。
  • 用户要求「产出权威源、差异清单、对齐表」。
  • 用户要求「定案 / 解决原型与实现之间的冲突或差异」。
  • 改动涉及 design/tokens.json、server/api/openapi.yaml、prototype-v2/mock.js 等契约单源,或涉及 Go/React/Flutter 三线字段、枚举、术语对齐。
  • 场景涉及「视觉照原型、逻辑照 PRD、数据照契约与代码」的开发意图。

核心原则

  1. 四源分离:视觉照原型(静态基线)与 React(可运行定稿)还原,功能逻辑照 PRD 实现,数据模型照契约与数据库/代码真相,设计 Token 照 design/tokens.json。四者职责分开,不互相迁就。
  2. 单一事实源:每类信息只由一个权威源负责(见下),冲突时以更高优先级为准。
  3. 实现真相 / 代码优先:当文档与代码(数据库表、模型类)冲突时,以代码为真相,回改文档;多线下业务规则的权威实现在 Go 服务端,Flutter 本地副本只读同步。
  4. 契约单源不可手改生成物:设计 Token 只改 design/tokens.json 后跑 python scripts/gen_tokens.py;API 契约只改 server/api/openapi.yaml(Go 用 swaggo 注解对齐,React 客户端生成);禁止手改 web/src/styles/tokens.css 与 Flutter Token。
  5. 原型 ≠ 功能:原型是视觉/交互基线,不一定是功能/数据源;mock.js 是数据形状参照(原型展示态),正式链路字段形状以契约与代码为准(例:meanings 数组 vs 单字符串 meaning_zh,见《权威源与差异清单》§2.2)。
  6. 本地优先:数据、计算、调度都在本地客户端完成;无后端时用本地数据库 + 本地算法(如 FSRS 自研引擎)+ 抽象接口承载能力。
  7. 多线一致:字段 / 枚举 / 术语三线统一,禁止各线自造;改一处必须三处同步并更新《多线开发约束》对齐表与术语表。

权威源判定规则

职责 权威源 冲突时
需求 / 功能逻辑 PRD 文档(主 PRD + AI 专项 PRD) —
静态视觉基线 prototype-v2/(含 mock.js 数据形状;prototype-clean/ 为其派生交付态,不得独立改动) 视觉以可控原型为准
可运行视觉事实源 web/(React 19 + TS + RTK Query,走 Go API) 交互先在此定稿,Flutter 对齐
设计 Token design/tokens.json(生成物 web/src/styles/tokens.css 与 Flutter Token 禁止手改) 以 json 为准
API 契约 server/api/openapi.yaml 以 yaml 为准
数据模型 / 表结构 dev-doc.html + drift 代码 + server/internal/repository/db/schema.sql + openapi schema,四者字段级一致 以交叉校验结果为准,文档回改
页面路由 / 组件 page-guide.html + 《多线开发约束》模块/路由/端点对齐表 —
多线对齐约束 .trae/documents/多线开发约束.md 三线冲突以该文档与 openapi.yaml 为准
工程规范 / 技术约束 开发约束与工程规范.html + readai.md —

多线工作流(Go / React / Flutter)

线 技术栈 角色 业务事实源
线1 Go Gin + sqlc + SQLite 后端 API 服务,业务逻辑权威实现 server/api/openapi.yaml(契约)+ schema.sql(数据)
线2 React Vite + React 19 + TS + Redux Toolkit 视觉事实源,交互先在此定稿 消费线1 API
线3 Flutter 多包工作区(melos + drift) 本 skill 主交付物,本地优先主本体 drift/SQLite 本地库 + 同一契约

数据流约定:React 只读业务数据一律经 Go API;Flutter 本地优先(drift 为本地事实源),云端同步走 sync_queue(本阶段不实现)。

三线变更同步顺序(改契约时强制执行):

  1. 改 server/api/openapi.yaml(契约单源)。
  2. 同步改 Go:schema.sql / queries.sql → sqlc generate;handler/service/repository 对齐,swaggo 注解更新。
  3. 生成 React 客户端(orval/openapi-generator),更新 web/ 页面与路由。
  4. 对齐 Flutter:drift 表(melos gen)、模型字段(camelCase ↔ snake_case 映射)、页面与路由。
  5. 跑校验:python scripts/check_schema_consistency.py(扩展后含 sqlc schema)+ go build ./...(server/)+ npm run typecheck(web/)+ melos analyze。
  6. 字段/枚举/术语变更需同步更新《多线开发约束》§2.2 术语表 / §2.3 字段映射 / §2.4 值枚举对齐表。

流程五步

  1. 定权威源:确认每类信息的单一事实源(含契约单源:tokens.json / openapi.yaml / mock.js 是否涉改),并给出「降级 / 去重建议」(识别旧版、重复文档,避免双源)。
  2. 产差异清单:交叉比对 PRD ↔ prototype-v2(mock.js)↔ drift 代码 ↔ schema.sql ↔ openapi schema ↔ seed_words.json,列出冲突与缺口,分五类:
    - 导航差异(桌面/移动入口项是否一致)
    - 数据模型差异(字段有无、字段形状、枚举码)
    - 设置项差异(PRD 有原型无、原型有 PRD 无、选项集不一致)
    - 页面/模块覆盖差异(PRD 有原型无、语义不一致)
    - 场景/选项覆盖差异
  3. 逐条定案:对阻塞开发的硬冲突逐条给出决策(参考《权威源与差异清单》§三拍板优先级),记录「定案结论 + 落地动作」。判断原则:
    - 多源一致者优先;不一致时以高优先级源为准并回改低优先级源。
    - 字段缺失 → 补字段;形状不一致 → 定映射规则;语义冲突 → 明确归属。
    - 能不改代码的(如已自洽)只确认规则,不空改。
    - 定案需三线同步:涉及契约/字段/枚举的结论必须落到 Go、React、Flutter 三侧。
  4. 落地代码:按定案改代码(表结构 / 映射 / seeder / 常量 / 契约)。生成物闭环:
    - 改 design/tokens.json → python scripts/gen_tokens.py(重新生成 tokens.css)
    - 改 sqlc schema/queries → sqlc generate(server/ 下)
    - 改 drift 表 → melos gen(build_runner --force-jit 已内置)
    - 改 openapi.yaml → 生成 React 客户端 + 对齐 Flutter 模型
    - 改动导航/路由常量后必须验证目标路由已注册,避免导航崩溃。
  5. 同步文档:把定案结果回写到《权威源与差异清单》标记「已定案」;同步更新《多线开发约束》对齐表 / 术语表 / 枚举表与相关实施计划文档。

落地注意

  • 改动数据库表结构后,必须重新生成代码(drift 的 melos gen / sqlc 的 sqlc generate)并确认生成成功。
  • 多包工作区(workspace / melos)的包目录不可随意移动;文档归入英文目录,规避构建工具对中文路径的兼容问题。
  • 契约校验脚本:check_schema_consistency.py(drift ↔ seed_words.json ↔ mock.js,扩展后纳入 sqlc schema)、check_token_consistency.py(待建,tokens.json ↔ tokens.css ↔ Flutter Token);两者接入 CI(melos lint:ui 同层级)。
  • 值枚举对齐(写死,禁止分叉):卡片状态 new/learning/review/relearning/mastered、评分 again/hard/good/easy、词形/关系 rel_type、口音 en-US/en-GB、TTS 引擎 system/edge/cloud 等,见《多线开发约束》§2.4。
  • 字段命名映射:API / DB / JSON 一律 snake_case(word_id、meaning_zh);Go 结构体 PascalCase + JSON tag snake_case;Dart camelCase(wordId),与 JSON 映射时按 snake_case 转换。三端同一字段禁止改名。
  • API 规范:统一响应 Result{code,message,data};查询接口一律分页 limit(默认 20)/ offset(默认 0);错误码段 0 成功 / 4xx 业务错误 / 500 服务错误;时间统一 ISO 8601。
  • 核心数据操作尽量用 try-catch 包裹;查询优先分页;优先构造器注入;组件按需注入(Riverpod Provider 懒加载)。
  • Flutter UI 样式一律走 skill flutter-ui-style(AppPalette / AppSpacing / AppRadius / AppMotion / AppShadow,禁魔法值),从原型 CSS 迁移视觉到 Flutter 时做布局语义映射(Row/Column/Wrap ↔ flex/grid),不照抄 CSS。

常见问题

5 问
答案由本站依据条目字段整理
原型落地Flutter独立应用怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_bdd9b996/prototype-to-flutter。安装方式为未标注。装完刷新技能列表或重开客户端。

原型落地Flutter独立应用支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

原型落地Flutter独立应用权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

原型落地Flutter独立应用收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

原型落地Flutter独立应用用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 2026-11-06。