jiapuapp/docs/superpowers/plans/2026-07-15-a01-asset-first-design.md

A01 资产优先设计落地计划

本计划由 superpowers:writing-plans 生成并在当前会话内直接执行。遵守用户最新约束：不使用子代理、不使用 worktree、不执行 git add/commit/push/reset/checkout，资产与设计验收通过前不修改 A01 页面代码。

目标： 以冻结的密码／验证码视觉真源为依据，制作一套可投入 uni-app Android 的 A01 最终资产，并使用同一批资产组装可编辑 Figma 设计。

架构： 密码与验证码状态共用唯一的背景、宗祠、卷轴、纹理、按钮和排版组件，仅切换标签、第二输入行和辅助操作。复杂装饰使用最终 PNG，文字、输入框布局、点击区域和状态切换保持可编辑；Figma 和应用后续必须引用相同资产文件与尺寸规则。

技术栈： Figma Design、Figma Plugin API、ImageGen 位图资产、uni-app/Vue、Android WebView/HBuilderX。

全局约束

• 唯一 Logo：static/assets/foundation/transparent/brand-seal.png；后续 Android 桌面图标也以它为源。
• 密码状态：左侧使用 static/assets/modules/auth/transparent/a01-icon-lock-v1.png，右侧是眼睛按钮，“忘记密码”在输入横线下方右对齐。
• 验证码状态：使用“消息气泡＋三点”图标和“获取验证码”，不显示眼睛或忘记密码。
• 除 brand-seal 与 a01-icon-lock-v1 外，A01 可见装饰资产全部制作新版本；旧文件保留但最终不引用。
• 不使用原生 UniApp 提示组件作为最终视觉；本阶段不做接口对接。
• 基础版本只覆盖当前浅色国风主题，以及 320×568、360×640、360×800、412×915；深色与跟随系统延期到下一版本。
• 设计审核必须基于真实截图；H5 仅为候选证据，最终需要 Android/HBuilderX 复核。

---

任务 1：冻结视觉真源

文件：

• 密码：docs/design/screens/handoff/2026-07-15/A01-visual-source-password-selected-v2-841x1870.png
• 验证码：docs/design/screens/handoff/2026-07-15/A01-visual-source-sms-selected-v1-841x1870.png

验收：

• 密码稿 SHA256：A93F201349C1BB1F2DFAB50BA0B5372A6FC1C4762661326ADE17AA29F31960EF
• 验证码稿 SHA256：31D023A523DA8CA25DF00736793FAF40086B5B46F32664B724E570F432BF9D9E
• 两张均为 841×1870，后续按 412×915 等比参考，不从聊天缩略图反推。

任务 2：建立 Figma 视觉真源与资产板

目标文件： A01 登录页重设计（可编辑）

页面结构：

• 00 视觉真源：密码与验证码全尺寸参考图并排放置，标注文件名和 SHA256。
• 01 资产板：Logo、宗祠、卷轴分片、纹理、标题纹样、按钮分片、输入图标、Android 图标安全区。
• 02 页面状态：密码隐藏、密码显示、验证码默认、验证码倒计时。
• 03 响应式验收：当前浅色国风主题的四档尺寸状态。

验收： 每个 Figma 写入步骤返回节点 ID，并对新增 Frame 生成截图检查裁切、比例、文字和图标。

任务 3：制作新资产

候选目录： docs/design/assets/a01-vnext/candidates/

最终目录：

• static/assets/modules/auth/opaque/
• static/assets/modules/auth/transparent/
• static/assets/foundation/opaque/

资产边界：

• 宗祠头图：独立不透明宽图，包含 brand-seal 安全槽，但 Logo 本体仍单独引用。
• 卷轴：顶部卷轴、中央纸纹理、左右边框、底部卷轴分离，禁止整张卷轴跨尺寸压缩。
• 按钮：左端、中部可延展纹理、右端分离，避免边角被拉伸。
• 图标：手机、开眼、闭眼保留瞳孔、消息气泡三点制作新版本；锁继续使用 a01-icon-lock-v1.png。
• Android 图标：以 brand-seal.png 生成自适应图标前景、安全区预览与纯色背景方案，不改变 Logo 本体。

验收： 检查像素尺寸、ARGB/Alpha、透明边角、主体覆盖率、边缘杂色和小尺寸可读性；不合格资产不进入 static。

任务 4：用最终资产组装可编辑状态

Figma Frame：

• A01 / Password / Hidden / 412×915
• A01 / Password / Visible / 412×915
• A01 / SMS / Default / 412×915
• A01 / SMS / Countdown / 412×915

状态差异：

• 密码隐藏：掩码文本、闭眼保留瞳孔。
• 密码显示：明文文本、开眼图标。
• 验证码默认：气泡三点图标、“获取验证码”。
• 验证码倒计时：气泡三点图标、不可点击倒计时文案。

验收： 背景和共用资产必须为同一组件实例；切换状态时公共区域位置不得漂移。

任务 5：设计验收后进入代码实现

后续才允许修改：

• pages/auth/a01-entry.vue
• A01 最终资产引用
• manifest.json 或 HBuilderX Android 图标配置
• tests/a01-a02-ui-contract.ps1

验证命令：

powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1

完成标准： 合同测试通过，四档 H5 截图通过视觉比较，并取得 Android/HBuilderX 真机或模拟器截图；在此之前不得声明 A01 完成或验收通过。