DesignFlow · 手机设计师辅助 App

1. 问题与目标

起点来自项目提出者的创作困难：没有灵感；有一点小灵感，却不知道怎样加入现有作品、让它变得好看。这是问题线索，尚未通过用户研究确认其普遍性。
产品目标：帮助设计师把喜欢的参考试到当前作品上，看清具体变化，作出选择，再保存可以继续迭代的版本。
首版聚焦四个问题：借鉴什么？改哪里？保留什么？怎样判断结果？“更好看”需要结合设计意图由用户判断，不能仅由生成成功来定义。
核心路径：发现 → 项目收藏 → 参考详情 → 导入作品 → 应用参考 → 方案对比 → 局部调整 → 保存版本。没有方向时从发现开始；已有参考时直接进入参考详情。

2. 用户故事

目标用户先限定为已有设计任务、能判断基本视觉结果的设计学习者或初级设计师。这是首轮招募假设，不代表已验证的用户画像。
两条路径共用一套原型与状态。工作台负责提供任务入口，不另建一套与案例脱节的演示。

3. 页面与需求对应

DF-01～DF-08 均为 P0 核心流程；优先级表示必要性，不表示真实 AI 能力已经开发。八页分别承担一个决定，避免重复展示同一张结果。

当前演示能力

• 发现与收藏：本地少量示例；完整应用流程采用圆形构图与撞色参考，不提供真实推荐、图像检索或网络素材库。
• 参考与应用：三种借鉴方式对应人工编排的预设结果；范围为固定选项，预览等待为本地模拟。
• 导入与编辑：支持 ≤5 MB 的 PNG、JPEG、WebP。上传的是平面图片，不能识别或独立编辑其中的文字、人物与图层。
• 对比与调整：查看原作品、切换方案、调整示例图形；不等同于通用图像编辑器。
• 保存与导出：最近 10 个版本使用浏览器本地存储，支持 SVG 示意作品导出；无账户、云同步或跨设备恢复。

P1 后续：图像/局部搜索与语义匹配；可编辑图层导入与可靠的文字保护。需先验证检索数据、模型能力和编辑链路，再承诺这些功能。

4. 核心规则

4.1 参考与借鉴方式

• 每张参考应保留标题、来源与可借鉴内容。预置素材标为“原创示意”，用户导入素材标为“用户导入”；不将参考作者的作品、经历或成果归给当前用户。
• 用配色：改变主要颜色，尽量保留原构图；需要让用户看懂颜色从哪里来、应用到哪里。
• 用构图：借鉴形状布局、层次与留白；不复制参考文字和标识。
• 取元素：把选中的视觉元素加入当前作品，提供位置和尺寸调整。
• 当前三种方式用于表达不同意图；预设结果不能证明模型已能完成提取或迁移。

4.2 原作品、修改范围与保护

• 默认仅修改主视觉，示例作品默认保留标题、日期和标识。选择整张作品仍遵守保护设置。
• 示例中文字与图形独立；解锁相应内容后，才允许整图预设调整其位置。
• 导入平面图片后，明确说明只能演示图形叠加，不能承诺图片内的文字识别或区域保护；无效的保护控件应禁用并说明原因。
• 原作品始终保留。预览、切换方案、局部调整和保存不得覆盖它。
• 导入图片按原比例完整显示；格式、大小或读取失败时保留此前作品，允许重新选择。

4.3 预览与等待

• 一次正式任务应绑定项目、原作品版本、参考、借鉴方式、范围及保护设置；结果需对应这一次输入。
• 等待时可取消，也可离开页面。取消不写入版本、不覆盖现有结果；离开后完成不强制跳转。
• 正式产品失败时应保留参数，说明原因并允许重试；不得把上一次结果误标为本次成功。
• 原型仅模拟等待与取消，没有真实后台任务、生成故障重试或完成推送系统。

4.4 对比与局部调整

• 原图与方案共用画布尺寸及观察位置，避免缩放差异误导判断。
• 按住看原图，松开、取消触控、移出按钮或失去焦点后恢复所选方案。
• 原图作为比较基线；进入调整前必须选定 A 或 B，不能把原图当成生成方案编辑。
• 局部调整应实际改变当前方式支持的内容。配色方式保留构图，应明确不支持位置和大小调整。
• 每个方案的调整分别保留，切换不会互相覆盖。撤销恢复当前方案上一次可见调整，不影响原作品。
• 比较区域显示借鉴方式、修改范围和保留内容，帮助用户解释选择，而非只看结果是否“好看”。

4.5 保存、载入与导出

• 版本记录包含项目、参考与来源、借鉴方式、范围、保护设置、所选方案和调整值。
• 保存产生独立快照；载入旧版再调整，不改变已保存记录，需再次保存形成新版。
• 最近 10 个版本保留在当前浏览器、同一页面来源下；超出后移除最早记录，不提供云同步。
• 浏览器存储失败时不能显示持久保存成功，应说明仅当前页面可用，并提供导出。
• SVG 导出为原型状态绘制的示意作品，不保证与页面预览逐像素一致。上传图片在导出中仍是平面图，不会变成独立的文字与图层。

5. 异常与空状态

6. 验收与验证

逐页验收条件

下表是可复现的验收要求，不表示这些场景已全部在真实浏览器中通过。

已有检查与交付状态

2026-10-06 本轮 Node 最小 DOM 模拟共通过 16 项、失败 0 项，实际执行页面原型常量、interaction.js、外围分组脚本及 art / renderArt。覆盖初始化、A/B 编辑与撤销及 SVG 参数、独立项目和版本、搜索与收藏、平面图保护、原作导出、8 页直达和弹层节点恢复、迟到预览、冻结基线与响应式宽度算术。该模拟只核对脚本状态和节点行为，不证明浏览器的排版、真实焦点圈或屏幕阅读器体验。
本地可编辑 Figma 后备包已准备并通过插件 API 模拟（8 个 Frame、24 条反应、148 个文字节点、130 个其他原生视觉节点、0 个图片节点/图片填充、0 个待完成反应）；尚未在真实 Figma 文件导入或运行，也未做真实设备字体和视觉验收。网页视觉与真实 Figma 仍待人工验收；本地模拟不能证明真实 AI 能力。

后续用户验证计划（尚未执行）

计划邀请 5 位设计相关用户进行探索性测试。每位先在不解释流程的情况下完成两项任务：为当前海报找到一个方向；把指定参考的一部分应用到作品并保留一个满意版本。

• 记录每一步是否独立完成、卡住的位置、误操作、需要的帮助及选择理由。
• 让用户解释“用配色 / 用构图 / 取元素”、保护范围，以及结果具体改动了什么。
• 让用户在 A/B 中选择、撤销一次调整、重新载入旧版；观察是否理解版本与原作品的关系。
• 若用户误把预设当成 AI 成效，先修正表达；若不能判断方案差异，优先修正对比与变更说明；若主要困难在流程理解，先改入口与按钮文案。
• 用任务记录与原话决定下一轮修改，再进行复测。不从这一小样本推断业务效果。

尚无用户访谈或测试结论、转化率、节省时间、设计质量提升数据。

7. 差异化与取舍

差异化假设：把“喜欢参考的什么”与“当前作品改哪里”放进同一条路径，再用同位置对比和可恢复版本支持判断。这是产品焦点，尚未证明为竞品独有能力。
参考方向：Cosmos 的发现与收藏、Shuffles 的元素创作、Photoshop 手机版的画布与局部工具、Firefly 的参考意图区分。具体界面沿用已认可的简约方向，不为增加功能数而重复页面。
首版保留发现、应用、比较、调整和版本记录。暂不加入关注与社区、购物、动态特效、全功能图像编辑、多模型切换；先检验一次个人海报创作任务能否顺利完成。
参考出处：

• Cosmos 官方商店与截图
• Shuffles 官方帮助
• Photoshop 手机版工作区
• Firefly 手机参考功能

8. 待解决的产品与技术问题

• 海报是否是最值得先解决的场景？需从首轮用户任务与痛点强度确认，暂不扩展到所有设计领域。
• 结构化图层导入与平面图片识别各自能支持什么保护和编辑能力？先用样例验证，再确定首版技术路径。
• 如何展示素材来源、获得使用许可，并让用户管理上传、保留和删除？真实素材接入前需明确。
• 真实生成怎样保留可编辑结构，并让局部调整与版本记录保持一致？
• 个人创作闭环成立后，再评估云同步、多人协作和成本控制的必要性。