---
sensitivity: public
---
# 参考要落实到构图：五套页面的重做与验证边界

五套概念品牌各有八个职责不同的主体章节、一个同品牌登录页和四枚独立原创 UI 图标。四十个平面风格导出对应二十个图形；五个品牌标识及其尺寸导出单独计算。作品提供真实的本地文件操作，认证服务暂未接入。

## 先拒绝一份不够好的初版

初版虽然用了五种主题和动效，仍反复出现扁平拼图式插画、横线分段和相近的标题节奏。更换主题颜色并不能改变这种同质化。技术检查可证明资源或按钮可用，无法证明参考复刻或视觉品质合格。

参考观察必须覆盖稳定首屏、中段、末段和手机。开场动画、空白滚动帧与访问验证页要分别记录，不能把它们当作完整设计。这个批次中，普通无头浏览器访问 Aeye 出现验证页；现有可访问浏览器实际读到了公开页面，补全了稳定截图。没有操作验证控件或绕过限制。

## 两套参考，一套语言贯穿到底

[Aeye 的公开预览](https://preview.yuanpu.cc/aeye-website-template/)采用上方黑色网格、下方大标题与侧边行动区，随后以开放的宽容器、细线和技术排版连接章节。[源铺详情](https://yuanpu.cc/templates/aeye-website-template)用于记录来源。LATCH 采用这一整体关系：约四百像素的暗色上段、七十六像素级标题、右侧简短操作区、双列工具查询、开放条目和反色收尾。工具箱、机械眼和图标均重新绘制，不使用原站商标、客户、数据、代码或素材。

[Agentflow 的公开预览](https://preview.yuanpu.cc/agentflow-website-template/)把居中标题和大型有纵深的对象放在一个完整首屏里，后续用宽留白与独立内容区调整密度。[源铺详情](https://yuanpu.cc/templates/agentflow-website-template)记录模板身份。CANOPY 借鉴这个构图和节奏，以原创地图纸、织物包、铅笔和便笺代替原站终端截图。渐变只用于表现纸面、织物、金属和光照，接触阴影跟随同一个方向，避免五个主题都使用一张普通卡片倾斜。

公开预览不等于获得付费源码或素材许可。本轮只观察排版和构图，没有购买模板或复制许可不明素材，也没有新增外部运行时依赖。

## 其余三套从材料重建结构

|品牌|首屏与章节差异|真实操作|主要动效|
|---|---|---|---|
|BLOC|橙色印刷页、大字与倾斜七片构图；黑色形状索引、浅纸固定舞台、错位负形和选择区|选择方形或菱形构图，图像及 SVG 下载同步|有限滚动区内拆开七片，再回到完整方形|
|CANOPY|整块圆角首屏、纸与包的纵深；深绿口袋区、浅底勾选清单、靠右剖面和开放备忘|按当前勾选下载个人物件清单|地图、包和随身物件的三层视差|
|LATCH|黑网格上段与白底大标题；双列查询、抽屉剖面、开放重置行和反色收尾|分类与名称搜索组合过滤，下载绘画或纸模清单|工具箱瞳孔有限跟随，登录密码聚焦时避开|
|SETLIST|深色剧场、巨幅斜体标题、带折线的节目纸；三段章节覆盖，浅纸编辑区|填写开场、中场和终场备注，下载真实运行顺序|章节按阅读顺序覆盖；登录页为纸张分层视差|
|HELIO|薄大字、象牙圆盘、铜色折件；深棕环绕舞台、影子对照、靠右折纸说明|选择圆盘或半盘，下载对应 SVG|太阳绕明确中心走有限圆弧，中心折件保持静止|

页面各自使用同一套字体角色、色彩、图标笔画、材料和控件间距。BLOC 使用项目已有的 Anton 字体及其 OFL 许可；其余使用合适的系统字体栈，没有复制系统字体文件。HELIO 的纸形用于绘图观察，未校准为计时工具；CANOPY 是个人物件备忘，未冒充专业户外安全清单。

## 真实界面状态比状态按钮更重要

工具目录最初有一个“无选中”选项，只承担强制空态的作用，审查后删除。最终空结果由真实工具名称查询产生。勾选、筛选、选择和编辑只影响当前页面；下载读取当前状态，没有外部消息、上传或持久化操作。

登录在提交拦截器就绪前保持字段禁用。空值、邮箱格式、密码长度、显隐、Escape 清空和自然不可用提示在本地处理。合格输入不会被发送，不生成 token，不伪造登录成功；后台隐藏或离开页面也清空字段。

## 静态资源与动效都要有可检查的终点

浏览器内联 HTML 可容忍裸 data 属性，独立 SVG 文件却要求有效 XML。审查发现部分封面和纸形无法解码后，全部独立 SVG 改用显式属性值，并同时检查 XML 与浏览器图像解码。仅仅 HTTP 200 不能证明图像可用。

七片方形也需要实际拼合正确。最终两枚大三角、一枚中三角、两枚小三角、一枚方形和一枚平行四边形无重叠覆盖完整方形；登录页为不同层设置不同深度，避免所有物件同速移动而假称视差。

指定动效默认随自然输入就绪，没有播放入口或参数面板。滚动仅在有限舞台内重组和环绕，反向从当前位置复原；窄屏、系统减少动态效果、无精细指针或资源失败保持完整静态画面和自然文档流。后台停止更新，页面返回重新安装自身监听，空闲期间没有持续帧循环。

[Morphicons 官方仓库](https://github.com/guillermolg00/morphicons)的既有 1.7.1 MIT DOM 模块继续同源使用，显式指定 reducedMotion 为 user。加减号由真实 details 展开状态决定，快速反向、离屏和后台会落到当前端点；无脚本或模块失败时静态端点仍然正确。这组状态符号不占二十枚原创 UI 图标名额。

## 验证与公开边界

每套在内部统一评审中分别记录代码检查、三视口全页截图、实际操作、原创图标小尺寸、历史结构比较和降级。浏览器触屏模拟不代表实体设备；Safari、Firefox、真实认证联调和性能评分未执行时记为 not-run。

本篇只使用本项目实现和上述公开参考，没有扫描私人知识库、导出个人技能正文或凭据。内部评审、测试与状态夹具不进入公开构建。只有目标提交 CI 成功且正式域名内容、安全头和核心操作核验通过，才记录 published。

## 当前交付边界

本批仍未通过全部视觉门槛，尚未提交或发布。正式域名仍为已发布作品，本批预览以内部归档记录为准。不能把候选构建里的入口或实际本地下载当作线上交付。

## 10 月 11 日恢复检查：从实际 DOM 修正设计

上轮保留了视觉失败，未提交或发布。恢复先针对真实 CSS 级联和 DOM 修复：五套手机登录在品牌作用域内改为完整单列，避免通用规则被品牌声明覆盖；LATCH 把工具查询移回结果区，删除重复的外层双列网格；CANOPY 定位真正的 pockets 元素，改为高对比的深底开放内容；SETLIST 为浅纸编辑区定义独立占位前景；BLOC 的普通文本和登录按钮使用各自可读的颜色角色。

参考构图也要贯穿中段。CANOPY 把第一段从少量并列文字改为说明与收纳纸的宽幅对照，保留地图纸、包和便笺的品牌语言。LATCH 的工作空间图与说明采用相同宽容器的左右关系，保持工具列表扫描路径。这些是原创内容适配，不声称复制付费模板代码、素材或所有原站流程。

同一来源的首屏和中段需要分别看实际画面。进入动画尚未结束时的空白截图不能作为参考质量证据；先观察页面稳定内容，再比较标题、物件比例、留白与相邻章节。当前服务边界仍是本地交互：认证未接入，格式校验不代表登录成功。公开状态必须由本轮目标提交的 CI 和正式域名验收另外确认。


恢复共执行三轮集中修复，另外为中间宽度扩大了单列阅读范围，避免放大文字后标题和表单挤在窄栏。实际计算字号放大至 200% 的检查不等于操作系统原生缩放或实体设备测试。十页的图像资源失败、静态动效降级、真实后台与 BFCache 返回也分别保留了证据。

最后仍有两类问题：参考适配的后半页没有保持原参考的多层布局节奏，CANOPY 的 Remember 标签在放大文字时发生不良断行。这些限制保留为 needs_fix，不以技术检查通过覆盖视觉失败。下一次恢复应对照稳定的中段和收尾画面，明确哪些是主题必需的适配，哪些仍欠缺布局与物件细节。


## 10 月 12 日：后半页也要有完整对象

恢复继续围绕两个具体问题，而不是更换主题或追加动效。CANOPY 用不等高的口袋区、宽幅包内平面图、回程笔记与三项提示建立连续的内容层级；空白口袋也是收纳结构的一部分。LATCH 将三个标签矩形改为纸张、工作面、零件和卡扣组成的原创抽屉平面图，并补上可读的重置步骤、真实清单文件对应的纸样区和分组收尾。图形是明确坐标下的原创几何示意，不代表设备规格或安全操作说明。

Remember 的问题来自标签被塞进过窄的网格轨道。恢复后标签与问题上下排列，保持完整词形，在中间宽度主动合并为单列。章节间距规则原先用否定 ID 选择器，优先级意外高于品牌章节，导致新面板的内边距失效。改为否定对应首屏类名后，局部章节规则能正常生效。不能只看新规则写在哪里，必须读取实际计算结果和截图。

本轮仍分别记录浏览器模拟、实际原生生命周期与服务边界；没有扫描私人来源，没有修改 CSP、凭据或外部服务权限。只有完成最终视觉与技术确认、目标提交的 CI 和正式域名验收后，才能更新发布状态。

纸样选择须同时更新下载目标、可见内容与状态提示；通用选择逻辑以初始下载地址为资产基准，使独立归档的根页面与原有子目录拥有一致的文件解析。