# 从观察到动手：五种小型视觉工作台

五套页面分别以板形、点阵、诗行、静物间隙与几何缺口为内容。它们不只让人看：每套都有一个能在当前页面实际完成的小任务。导出的文件与拼图结果由真实输入决定，登录服务仍保持不可用。

## 两个参考，五种转译

本轮从 [Recent](https://recent.design/websites) 进入 [Displace](https://displace.agency/) 与 [Augen Pro](https://augen.pro/?ref=godly)，于2026年10月18日实际观察首屏、中段与尾部。Displace以低位标题锚定全幅影像，再转入白底项目编排与深色尾部；Augen把宽阔浅色主视觉转成窄列宣言，页尾重新回到开放分组。研究截屏只用于内部比较，没有把原站的素材、商标、代码、字体或业务事实带入作品。

借鉴原理需要有舍弃项。这里没有采用启动层、持续循环、自定义平滑滚动、低对比长文、视频或外部联络入口。另两处候选分别停在启动画面和地区/Cookie弹窗，截图虽存在，不能算完整参考。最终以实际可读的页面为依据。

## 一套作品，一种阅读路径

|作品|结构差异|实际任务|主要内容动效|
|---|---|---|---|
|CURB|斜向街面与低位大字，接横向轮廓带、单列部位索引、铺面和选择器|选择Round、Square或Tapered，下载不同的SVG轮廓|同一板形内逐段生成表面，已经出现的部分稳定保留|
|HALFTONE|拆行刊头、两条源图轨道、深色点阵段、方形工作区与文件信息条|读取本地PNG/JPEG/WebP，导出真正生成的1200方形PNG|同一影像的明暗被转为规则点阵，沿正常滚动逐段留下圆点|
|LINEBREAK|纯文字的宽句、单行呼吸、换行舞台、窄词条与双页编辑|输入六行以内的短诗，下载含可编辑文字的SVG页|句子内容不变，三个词组从横向句流重新排成诗行|
|PLACEMENT|低位横刊头、分散小静物、错密度空隙、前后遮挡与全幅台面|用拖动、键盘或触屏移动物体，导出1400×900的PNG构图|同一光照的前中后三个独立物体形成有限指针视差|
|LACUNA|窄侧题目、三片索引、负形宽屏与实际棋盘|逐片顺时针转动，真实记录步数并判断匹配|同一组形状以四分转改变方向，有限重排后与槽位相合|

相较最近30套的三个近邻，本轮分别比较信息路径、首屏轮廓、网格、材料、板块顺序、交互、图标和色彩。公开文章不把人工比较包装成相似度百分比，也不宣称全球唯一。配对登录页保留同一套字体、色彩、线条与素材，字段先于装饰：CURB表单上置、板列在底；HALFTONE用上缘印版与低位白表单；LINEBREAK诗行在左、表单在右；PLACEMENT让静物落在下边缘；LACUNA把语句、片段与字段分别布置。

## 先让画面成立

编码前每套先画三个构图候选，再补整页、首屏、手机、登录及三段动效分镜。第一轮中下段过于等距，三张登录稿也倾向相同居中构图，因此没有直接编码。修稿让每章承担不同职责，并把登录的场景位置重新分开；CURB再做局部文字避让。初稿、失败原因和修稿保留在内部证据中。

图片方向先准备素材：街面板形、金属带和三件具有透明轮廓的静物为本项目生成的概念资产，不是器材产品规格。LINEBREAK和LACUNA的核心就是文字与精确几何，因此直接使用原生排版和矢量，没有用无关照片填空。没有体积拆解或连续镜头需求，未引入3D或视频引擎。

HALFTONE先做一段可运行小样。初版把采样网格放大作源图，导致照片模糊；修正为原分辨率图像负责源画面，独立小网格只负责明暗采样。前、中、终和逆向状态实际查看后才实现工作区。圆点半径随暗度的平方根变化，以面积表达明暗，而不是把一张滤镜图简单淡入。

## 让输出与操作保持一致

CURB的三项选择对应三条真正不同的轮廓路径，静态下载在脚本失败时仍存在。它们没有制造尺寸和承重信息，不被称作制造或维修指导。

HALFTONE用FileReader读取用户主动选择的本地图片，不创建远端上传请求。图像按原比例放进方形纸面，无法读取的文件会留下清楚反馈，前一个可读结果保留。导出尺寸是真实画布尺寸，不以CSS显示大小充当文件分辨率。

LINEBREAK用文本节点预览，导出时转义XML特殊字符。空内容、超过六行或单行超过42字符都给出具体反馈；较宽文字按实际字体度量放入页边界。下载仍是可编辑文字，换一台缺少Georgia的电脑可能使用后备字体，因此没有把系统字体文件分发出去。

PLACEMENT让视觉视差与用户编辑处于两个不同场景，避免同一坐标被两个控制者争抢。移动位置限制在台面边界内；键盘和触屏直接操作物体，导出使用同一组归一化位置与原始透明素材。重置只恢复本页构图。

LACUNA以三个不同形状的旋转余数判断槽位匹配。每次动作增加真实步数；复位恢复同一起点。完成是本地拼图结果，不涉及账户、积分或远端服务。

导出验证也要看文件本身。轮廓SVG曾残留只适用于HTML的布尔属性，链接可下载但XML解析失败；移除属性后用标准解析器、真实下载字节与三种不同轮廓共同验证。最终封面复查还发现通用换行规则把HALFTONE字标拆成三行，因此只缩小其桌面字标字号，保持六种宽度的两行构图与文字放大可读性。

## 原创图形与状态

二十枚UI图形各自独立绘制，24网格、currentColor与可继承描边；描边和双色只是同一造型的两种样式。品牌标识及其导出尺寸单独计数。十六、二十四、三十二像素与浅深背景的内部图谱用于光学检查。原生页面使用真实SVG，PNG从浏览器渲染，不把像素嵌进SVG冒充矢量。

沿用现有同源 [Morphicons](https://github.com/guillermolg00/morphicons) DOM 1.7.1及MIT许可，只为真实details开合插值；显式reducedMotion:user。图形端点不是原创新数量，模块失败仍保留原生展开、静态端点及可用下载。

## 验证与服务边界

每个Web有八章，每张登录页有空值、格式、密码显隐、清空与不可用反馈。格式合格后不会发送凭据、产生token或跳成已登录；真实认证、支付、消息、设备和云端保存都未接入。本轮只支持en-US。

实现按需调度动画，离屏、后台和页面离开时停止自身资源；减少动态效果、窄屏、无细指针和长文本回到完整静态内容。验证同时看实际截图、真实文件、正反滚动、锚点、键盘和触屏，不把构建成功等同于画面合格，也不把本地通过等同于线上发布。

实体设备、Safari、Firefox、操作系统原生字号设置、真实性能测量与真实业务联调不在本轮证据范围。字号加倍是浏览器计算字号测试，不是操作系统原生字号验收。本轮没有重新扫描私人资料库，没有公开个人Skills正文、凭据、本机路径或受限材料。发布以目标提交的CI成功和正式域名资源、内容及核心交互共同确认。