# 从一针到一页：五套内容驱动的画面

这批由五个独立设计约定开始：百马的设备与创作世界、WILDING 的观察手记、SLICE 的厨房食谱、FABLET 的故事页、SILT 的器物观察。每套是一个八章以上的 Web 页面、一个同品牌登录页、四枚独立原创 UI 图形；品牌标识、颜色与导出尺寸分别计数。

## 先看真实参考，再决定画面

从 [Recent](https://recent.design/websites) 进入三个原站，实际查看首屏、中段、尾部与滚动结果。[Shopify Design](https://shopify.design/) 用巨字提出立场，随后让错落媒体提供证据，尾部聚焦单一行动。百马吸收的是文字、媒体与留白的主次，设备和内容来自自己的事实源。

[Bécane](https://www.becaneparis.com/) 当次可见首页是横向人物收藏索引，随后转为窄幅宣言；它并非我们预想的大图开场。SLICE 从物件间距得到食材清单与动作章节的节奏，SILT 把观察主体和说明的密度分开。[Gregor Collienne](https://gregorcollienne.com/) 保持固定姓名，让多尺度照片穿过同一视觉坐标。WILDING 把远景收进有限观察窗，FABLET 在稳定的夜林中让视线参与写作引导。没有复制原站照片、文案、付费代码、商标、客户或数据；部分参考视频不可播放，不能把画面观察写成全部动效验收。

三种简洁构图草案与选中整页、首屏、登录、手机、三帧动效分镜先于产品代码。去色后比较首屏轮廓、网格和章节组织，再比较字体、材质与动作；技术通过不能代替这个判断。

## 五个思想，五种阅读方式

|作品|核心思想与结构|实际内容操作|
|---|---|---|
|100HORSE|连续象牙布面、炭黑字、朱红针迹；四款设备章使用不同尺度与构图，接软件、支持及生态|浏览经核对的官方产品、图案、软件与服务入口|
|WILDING|全幅想象山谷、窄文字、有限观察窗、开放田野记录|记录看见与听见的细节，下载文字|
|SLICE|巨字刊头、明亮桌面、食材行与切/调味/上桌三个覆盖章节|选择薄荷或罗勒，下载对应食谱与厨房笔记|
|FABLET|夜林全景、居中衬线、角色索引和窄阅读列|读原创短篇，写自己的开头与转折并下载|
|SILT|宽字标、陶器静物、层层泥条与口沿/壁/底足观察|填写并下载自己的器物卡|

同批结构与历史近似作品分别比较。百马与 TACK、SELVAGE、MARROW 的区别来自完整设备叙事、连续材料、跨尺度转场、产品章节尺度和官方出口；WILDING 与 CANOPY、FATHOM、COURT 的区别是全幅地景、有限观察窗、非路线内容与开放记录；SLICE 与 FOLDBAY、STILL、SETLIST 的区别是刊头、食材行、操作章节与配方选择；FABLET 与 ODDMENT、NIM、softspot 的区别是完整夜林、窄阅读、原创新叙事与写作路径；SILT 与 LODE、VITRA、HELIO 的区别是完整静物、泥条生成、口沿索引、材质观察和器物卡。缩略图与近期实际页面首、中、尾分别保存，未编造相似度百分比。

## 百马：真实设备先于转场

事实源是 [100HORSE](https://100horse.com/) 与 [Institch](https://institch.com/pattern)。EOC06 对家庭创作者，MIRROR 对初创绣坊，VISION 对帽饰服装业务，VISION-2 对考虑双头设备的团队。设备章链接到对应官方页，不复制价格、产量、效率或服务承诺。Institch 只介绍已见的图案、制版师与软件入口，不表演未经验证的编辑、同步、文件发送或设备控制。

素材文件名不能证明身份：一个看似通用的图片是软件截图，另一个是机身铸件，两者都被排除。最终展示完整官方设备图，保留原机头、屏幕和支架；格式转换与缩放不改变产品结构。

首个转场小样失败在粗线和悬浮绣框。修正后针在布面平面处遮挡，只有经过的路径出现固定针迹，当前针位置和最大已完成进度分别计算。原路反向可以移动针和镜头，已经留下的线不拆除。绣框、针迹与官方 EOC06 共用坐标，拉远后保持对应位置。第二次画面审查发现折布背景重复拼接，改为连续的细棉织纹；针迹改为实际品牌字形的细线轮廓，避免普通波浪线冒充内容生成。

这是设计叙事与二维分层增强，不是机械工程模拟，也没有修改或部署两个公司官网。

## 动效与降级

每个 Web 与登录分别定义 motion_spec。有限针迹揭示、观察窗重排、章节覆盖、猫头鹰视线、泥条成形由内容决定；普通淡入不充数。登录保留短页输入任务，边缘微缩场景或有限视线不遮挡表单。窄屏取消固定章节，粗指针与系统减少动态效果保留静态内容。离屏不更新对象，后台停止调度，恢复读取当前位置；无输入时不设持续帧循环。

原生 details 的真实展开/收起使用既有 [Morphicons](https://github.com/guillermolg00/morphicons) DOM 1.7.1，同源固定版本、MIT 许可，显式 reducedMotion: "user"。二十个新增图形独立绘制，第三方状态插值不计入原创；无脚本和模块失败后仍有静态符号及原生操作。

## 文字放大后的修复

200%计算字号的实际截图暴露了WILDING标题落到深色山体、窄屏Welcome拆词与显隐按钮不足的问题。窄屏图文改为自然文档流，表单标题重新定标、按钮随字段长高；百马手机标题收紧响应式字号，保证加倍后单词完整。SLICE与SILT的装饰刊头用本套SVG字标，实际标题与正文仍是可选择的HTML。WILDING标注从景中三处汇成右侧有序列，内容重组与观察窗相互解释。

## 验证与服务边界

代码、实际视觉、浏览器状态、构建、CI 和正式域名分别留证。检查覆盖桌面、平板、手机、中间宽度、计算字号加倍、真实本地下载、密码显隐与清空、空值和格式错误、不可用反馈、触屏/键盘、减少动态效果、无脚本及资源失败。实体设备、Safari/Firefox、系统原生字号设置、真实业务联调与帧率测量未执行时明确记为 not-run，不给出性能分数。

登录没有真实认证接口，不发送或持久化输入、不生成 token、不伪造成功或服务判定的凭据错误。认证、支付、消息及设备均 unavailable。笔记仅在当前文档中，下载由用户发起。公开图片分别为本次生成场景与用户指定的官方品牌资产，系统字体文件不复制，许可和事实限制各自记录。

本篇来自项目创作与公开参考，没有重新扫描私人 Vault、导出个人 Skills 正文、凭据或本机绝对路径。内部设计稿、review、状态夹具及归档不进入公开构建。只有目标 SHA 的 CI 成功且真实域名内容、资源、安全头和核心操作验收通过，才记录 published。