---
sensitivity: public
---
# 给内容留位置：五种不同的使用路径

这批从五个具体任务出发：选择建筑画幅、记录跑道圈程、安排餐桌座位、写六面折页、整理三个小任务。每套有八个职责不同的 Web 章节、同品牌登录页和四枚独立原创 UI 图形。品牌标识与格式、颜色、尺寸变体分别计数。

## 参考原理需要落到结构

于2026年10月19日从 [Recent](https://recent.design/websites) 进入 [Gregor Collienne](https://gregorcollienne.com/)、[Bécane](https://www.becaneparis.com/) 与 [Podium](https://podium.global/) 的公开页面。Gregor 的固定姓名与多尺度影像让同一坐标承载不同内容；实际查看首屏、中段及更深处，档案继续延伸，没有把它当作普通页尾。Bécane 的横向人物队列留出宽阔空白，再收成窄幅宣言。Podium 从运动形态、作品影像转入宽词距宣言，最后集中到单一行动。

这些观察有稳定画面和滚动证据。部分刚滚到的区域仍是过渡空帧，因此没有把它们计作完整内容。没有复制原站图像、商标、客户、价格、代码、字体或付费提示词，也没有继承自定义光标、无限循环和联络发送流程。

|作品|核心思想与结构|实际任务|主效果|
|---|---|---|---|
|VOID / SPACE|同一个空间能读成不同画幅；全幅门洞、窄引言、深色视野重组、开口索引与画幅工作区|选择 Opening、Floor、Depth，下载对应真实裁切的 PNG|同一照片与三个阅读词在有限滚动区间重组|
|LAP / LINE|每一圈返回原处，留下不同的一行；斜向跑道、环绕段、横向记录行与标线尾声|填写距离和圈程笔记，下载真实合计与文字|单一跑者沿跑道有限环绕，方向随路径变化|
|GATHER|先给每个人留个位置；暖色全幅桌面、用物横排、俯视座次与开放问题行|切换六或八个位置，填写名字并下载座次表|餐桌、椅子与桌面器物分层视差|
|FOLIO / PRESS|一张连着的纸承载六个瞬间；折页横带、顺序索引、阅读对照与整宽编辑器|写六面文字，下载可编辑 SVG|六片共边材料从折起到展开，内容保持同一顺序|
|BUDDY / BLOCK|给小任务一个位置；角色散布、窄长角色行、三项清单与真实进展|输入任务、标记自己完成的项、下载当前清单|角色视线有界跟随，密码聚焦避开输入|

配套登录分别使用低位横向字段、跑道上缘、餐桌边缘、上缘折页和底边角色，不把五张表单包进同一种大物体加表单构图。网站与登录保留同一品牌的字体层级、色彩角色、材料、图标端点和运动幅度。

## 历史比较改变了方案

初稿的中下段仍在循环四种等高容器，白字也落在建筑光斑上。实际查看同批去色图后，先重画全页高度、表区和结尾，再进入实现。手机长标题的裁切也在编码前修正。

VOID 最初仍是建筑观察手记，与近期 FIRN 接近。比较实际整页后，它改成三个明确画幅的选择与导出路径，并用开口形态索引组织内容。相似题材需要改变信息职责和操作，不能只换房间照片。其他四套也各自与最近三十套中的三个近邻比较，分别核对首屏轮廓、网格、章节组织、材料、任务和图标，不使用虚构相似度百分比。

## 先验证同一个对象

五个关键小样在产品代码之前完成。建筑始终使用同一张照片；跑者来自同一组向量，原小样中多出的静态跑者被移除；座位图的层次在有限指针范围变化；折页每片共享相邻边，展开后仍是原来的六片；眼球限制在眼白范围，离开后回正。静态关键帧只说明构图，实际滚动和指针操作另留浏览器记录。

两张原创生成图片承担建筑空间和餐桌氛围，不代表真实场地、家具或可购买商品。跑道、座位图、折页及角色使用原生几何；没有把照片换成粗糙的透视模型，也没有用生图制造产品规格。图片、代码、字体与模型分别核对来源。系统字体只被调用，未分发；LAP 使用仓库已有 Anton 及其 OFL 许可。没有新增采购、全局配置、外部服务权限、三维模型或视频依赖。

## 真实输出与状态

画幅工具从原图按三个固定矩形裁切，预览与导出共用画布。它提供不同像素尺寸的真实 PNG，不把 CSS 缩放当作文件分辨率。源图失败时保留自然反馈和原始文件入口。

圈程工具只相加用户输入的距离，不推测位置、速度或运动成绩。距离必须是范围内的非负数；空表不会生成看似已有内容的文件。座次表保留当前人数范围内的名字；从八位回到六位时，第七、八位不进入文件，再切回时只在当前页面内恢复。

折页导出时转义 XML 特殊字符，并按实际文字宽度换行。正文仍是可编辑文本，设备缺少同名字体时可能使用后备字体。任务清单只统计非空行，勾选意味着使用者实际标记；修改文字会清除该行的旧勾选，避免把另一件事视作已完成。

原生 details 的加减端点继续使用同源 [Morphicons](https://github.com/guillermolg00/morphicons) DOM 1.7.1，保留 MIT 许可，显式设置 `reducedMotion: "user"`。第三方插值实现和状态端点不增加二十枚原创图形的数量。无脚本、模块失败时保留原生开合和静态轮廓。

## 验证边界

语言为 en-US。登录只做瞬时本地字段校验、密码显隐和清空；格式合格后说明服务当前不可用，不发送凭据，不生成 token，不持久化输入。认证、支付、消息与设备服务均未接入。

验收分别记录语法与构建、实际页面、响应与文字放大、键盘和触屏、正常动效与降级、文件内容、请求与存储。浏览器计算字号加倍不等于操作系统原生字号测试；模拟触屏也不等于实体设备。没有真实性能数据、Safari、Firefox、屏幕阅读器或真实业务联调的结论。

构建成功、静态扫描和截图都不能单独证明发布。最终状态以目标提交的 CI、部署与正式域名资源、内容及核心交互共同确认。本次只更新项目公开来源与显式 manifest，没有扫描私人资料库或输出个人 Skills 正文、凭据、本机路径及受限资料。