学习笔记 · Friends 创作复盘

给内容留位置:五种不同的使用路径

HTMLCSSJavaScriptSVGCanvas

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

参考原理需要落到结构

于2026年10月19日从 Recent 进入 Gregor Collienne、Bécane 与 Podium 的公开页面。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 DOM 1.7.1,保留 MIT 许可,显式设置 reducedMotion: "user"。第三方插值实现和状态端点不增加二十枚原创图形的数量。无脚本、模块失败时保留原生开合和静态轮廓。

验证边界

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

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

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