SuperAPI AI 工具集

design-polish

设计与创作

查看项目

更新于 10-15 17:34

技能介绍

用途:打磨 Flutter 移动应用的界面,改善视觉层级、可读性与分区清晰度,让用户一眼看懂如何使用应用。工作方式有明确立场、以证据为依据且有边界,每轮以独立评估者的结论收尾,而非自我评价。

前置条件:需明确要打磨的屏幕(路由名如 /settings、/profile,或 lib/ 下的组件文件路径);应用需运行在 Android 模拟器上,所有截图、点击、滑动与无障碍树导出均通过 android-emulator 技能完成,相关命令包括 scripts/emu.sh health、boot、run、wait-run。

建立设计基调:在改动任何屏幕前先做一次。优先使用用户指定的已打磨屏幕,否则依次寻找首页(MaterialApp.home、initialRoute 或底部导航首个标签)、home_page.dart 等文件。阅读其源码及 lib/theme/、lib/widgets/ 的导入与自定义 ThemeExtension,记录 ColorScheme、TextTheme、间距常量、圆角值;在模拟器上截图各状态。用 3–5 条具体要点写出设计基调(情绪、字体、色彩、表面、层级手段、动效)。若无法自信建立基调,应停下询问开发者,不得在无基调情况下继续。

品牌与设计系统:沿用既有字体,不新增字体;使用现有 ColorScheme 令牌,最多可通过 ThemeExtension 新增 2 个语义令牌并在本次所有屏幕统一应用;复用 lib/widgets/ 或 lib/components/ 中的既有组件;沿用既有间距刻度与圆角值,不做改动。

每屏工作流:观察(用 ui-list、tap-label、screenshot 交互并阅读源码)→ 诊断(写出 3–7 个指名具体组件的问题)→ 修复(针对性修改 Dart 源码,一次处理一个关注点,改后重新运行并截图验证)→ 评估(用最新 Opus 模型启动独立评估子代理,按设计质量、原创性、工艺、功能性各 1–10 分打分并给出结论 PASS/ITERATE/FAIL)→ 按结论处理,每屏最多 3 轮评估,超限保留最高分版本。

层级工具箱:分区边框/分隔线、区域背景对比、字重字号、间距、颜色语义、卡片左边框强调、标签指示器等,按布局需要选用。

反模式:偏离已建立基调的视觉元素(渐变、动画、装饰模糊、粒子等)属常见问题;通用红旗包括闪光图标、AI 品牌装饰、无意义装饰图表、内部矛盾、无真实异步的骨架屏、日常页面上的欢迎横幅等,任一出现原创性得 2 分。功能变更(路由重构、功能删除、组件 API 改动)超出打磨范围,应提示而非擅自执行。

注意事项:ThemeData 与热重载可能不同步,主题改动不生效时先执行 kill-run/run 循环;google_fonts 在无网络或冷缓存时会静默回退系统字体;状态栏元素会干扰前后对比;内联 TextStyle、硬编码颜色与 EdgeInsets 常是“不一致”的根源。

流程规则:一次只处理一屏;新增令牌须应用于本次所有屏幕;共享组件与 ThemeExtension 修一次后需重新截图验证影响面;每屏改动后运行 dart format . 与 flutter analyze,评估前修复 lint;宣布完成前运行 flutter test。