GoodVibe
登录
AI 创意工程师

读懂网站的设计语言 · 02.4 / 04

研究资料的归档与索引

从截图和视频收藏转向可运行参考，用 Reference Card、项目关系与 Retain Review 留下真正可复用的研究。

  • GoodVibe 编写
  • Reference Card
  • 产出 DESIGN.md v1

设计师过去保存网页，常用的是截图、录屏和链接。它们适合记住画面，却很难保存一个互动对象如何启动、由什么输入驱动、哪些状态值得比较，以及当时为什么要留下它。参考开始包含代码之后，收藏方式也需要改变。

这一节不要求你迁移到新的素材管理工具。你仍然可以使用 Eagle、Notion、Figma、Raindrop、云盘或普通文件夹，只需要让一条重要参考同时保留来源、关键片段、运行方法、研究判断和项目关系。

真正可用的参考，应该让几周后的你知道为什么保存、怎样重新运行，以及它曾经支持过什么判断。

归档不是把文件放好

保存对象

从图片收藏转向可运行参考

一张完整网页不是最小的研究单位。你可能真正想保留的是一段标题排版、一个 Menu 打开的状态、一条滚动时间线，或 Canvas 中鼠标输入与材质变化的关系。先指出有用的片段，再保留它所在的完整来源。

01

Source Item

原始网页、仓库、文章或文件。保留作者、原始 URL、时间和可访问状态。

02

Fragment

真正值得返回的局部，包括 DOM 区域、代码段、互动状态、时间片段或视觉区域。

03

Capture

这一次为什么保存、关注什么、在什么环境观察，以及留下了哪些截图、录屏和笔记。

04

Runnable Reference

可以重新启动的镜像、实验或复刻，附启动命令、依赖版本、默认参数和已知缺口。

关系图占位

一个来源怎样进入不同项目

Visual pending

以同一个网站为中心，展示多个 Fragment 和 Capture 如何连接到可运行复刻，再由两个不同 Project Working Set 引用。长期资源保持一个稳定来源，项目只记录相关性、决定和采用状态。

  1. 01Source Item 只出现一次
  2. 02Fragment 与 Capture 保留各自的 Focus 和时间
  3. 03Runnable Reference 标出启动命令与已知缺口
  4. 04Working Set 使用引用关系，不复制长期记录
正式素材加入后直接替换此占位块/course/chapter-02/reference-relationship.svg

最小记录

写一张 Reference Card

Reference Card 是代码参考的入口，不是对整个项目的重复说明。它把人会记得的理由和 Agent 需要读取的运行信息放在同一个位置。未知项可以保持 unknown，不能为了填满模板而猜作者、License 或技术栈。

可移植的参考记录

reference-card.md
# Reference Card
## Source- title: Example Site- url: https://example.com- author: unknown- captured_at: 2026-08-17- rights: study-only / licensed / unknown
## Why and Focus- why: 标题进入后，内容密度仍然保持安静- focus: hero-type-transition- fragment: Hero 标题从 loading 进入 settled 的过程
## Runtime- local_path: projects/example-clone- command: npm run dev- route: /- viewport: 1440 / 768 / 390- input: load / scroll / pointer- default_preset: original
## Evidence- source_level: SOURCE / PARTIAL / GUESS- screenshots: docs/media/desktop.png- inspect_notes: docs/inspect-map.md- known_gaps: 字体 License 未确认，移动端指针效果关闭
## Project use- status: candidate / adopted / rejected / experiment- decision_supported: 首页标题的进入时序- intended_adaptation: 只迁移时间关系，不迁移品牌资产- related_output: project-alpha / landing-hero
项目截图占位

Reference Card、文件和运行结果对得上

Visual pending

并排展示 reference-card.md、项目文件树和浏览器里的运行结果。用连线指出 local_path、command、route、default_preset 与真实文件或界面的对应位置。

  1. 01Reference Card 与文件树来自同一项目
  2. 02运行命令、路由和默认 Preset 可以实际验证
  3. 03只保留三张支撑理解的局部截图
  4. 04隐藏本机用户名、密钥和无关绝对路径
正式素材加入后直接替换此占位块/course/chapter-02/reference-card-runtime.webp

项目索引

让参考回到具体问题里

归档的价值要在下一次制作时兑现：你能找回最有用的那一小组参考。不要只按宽泛的风格标签索引。未来真正能帮你找回参考的，通常是保存理由、关注片段、交互状态、实现材料和它支持过的项目决定。

索引入口记录的问题检索示例
Why为什么值得保存安静但不显得空的首页
Focus真正有用的局部标题进入与导航延迟
State什么时候观察它menu-open、loading、scroll-40%
Technique实现需要什么材料variable-font、clip-path、WebGL
Project relation它支持过什么决定Project Alpha 的 Hero 时序
  1. 01

    建立 Working Set

    为当前项目只引用少量候选，记录相关性、要支持的决定和准备如何改造。

    留下 working-set.md
  2. 02

    记录使用状态

    把候选标成 candidate、adopted、rejected 或 experiment，并写下采用和拒绝的原因。

    留下 decision-log.md
  3. 03

    连接 Past Work

    把复刻、可复用实验和最终项目产物连回原始来源，避免以后只剩一份来历不明的代码。

    留下 project-links.md
  4. 04

    保留反馈

    记录没搜到的词、运行失败的依赖和真正有效的检索入口，下一次调整自己的索引方式。

    留下 retain-notes.md

Personal Skill

把自己的归档习惯写给 Agent

当 Reference Card 和检索入口经过几次真实使用，你可以把自己的工具、字段和目录写成一份资源管理流程，让 Agent 按照你的习惯保存和查找内容。

这类 Skill 很难直接复用别人的成品。Eagle、Notion、Figma、云盘和本地文件夹的能力不同，每个人愿意交给 Agent 的内容也不同。先写清自己的保存动作、查询方式和隐私边界，再让 Agent 接手重复步骤。

  1. 01

    描述现有系统

    列出正在使用的工具、目录、字段与命名方式，不为安装 Skill 重新搭一套资源库。

    留下 resource-map.md
  2. 02

    定义最小动作

    先选择 save、search、review 中最常发生的一个动作，写清必填信息与失败处理。

    留下 SKILL.md v0
  3. 03

    划清隐私边界

    指出哪些私人素材、账号信息和本机路径不能出现在公开结果或浏览器代码中。

    留下 privacy-boundary.md
  4. 04

    用旧问题复验

    拿一次真实检索重新测试，确认 Skill 能找到正确片段，也能解释为什么返回它。

    留下 retrieval-test.md

本章回看

用复刻结果修正 Design DNA

第一节的 Design DNA 只是初稿。现在把它与 Inspect 证据和 Clone 结果并排查看：哪些规则被真实参数和多个页面状态支持，哪些只在一张截图里成立，哪些其实来自摄影、视频或 Shader 资产，无法被普通 UI 规则替代。

  1. 01

    对照 DNA v0

    逐条标出 confirmed、revised、rejected 和 unknown，不直接覆盖最初判断。

    留下 dna-diff.md
  2. 02

    引用 Inspect 证据

    为字体、空间、状态、时间和渲染结论补上对应的来源或运行记录。

    留下 evidence-links.md
  3. 03

    引用 Clone 结果

    记录哪些规则在真实内容、三档屏幕和关键交互里仍然成立，哪些出现了差异。

    留下 clone-review.md
  4. 04

    生成 DNA v1

    只保留可以执行的原则、适用边界、反模式和仍待验证的问题，交给下一章继续使用。

    留下 DESIGN.md v1

只保存仓库路径

补上原始来源、Why、Focus、运行命令和它支持过的项目决定。

为每条参考添加大量宽泛标签

优先记录可检索的具体片段、状态、技术和项目关系，允许标签为空。

把临时下载全部放进长期资源库

临时材料留在 Project Working Set，只提升跨项目仍然有价值的实验、方法和 Past Work。

归档后从不重新运行

在 Retain Review 中启动关键参考，确认命令、依赖、路由和默认参数仍然有效。

Retain Review

只留下以后还会使用的部分

项目结束时，把一次性的抓取、中间构建和重复截图留在项目里或清理掉；只把跨项目仍有价值的设计规则、可运行实验、方法和已完成作品提升到长期资源库。保留来源和权利边界，也保留以后重新发布或迁移所需的可编辑文件。

第二章收束记录

retain-review.md
# Chapter 02 Retain Review
## Promote to Long-term Library- resource_or_fragment:- why_it_has_cross_project_value:- stable_source_id_or_url:- rights:- runnable_path:
## Keep with This Project- one_off_capture:- temporary_working_set:- project_specific_asset:
## Remove or Rebuild Later- duplicate_or_stale_item:- reason:- recovery_path:
## DNA Diff- confirmed:- revised:- rejected:- still_unknown:
## Retrieval Test- query_used:- expected_fragment:- found_by: Why / Focus / State / Technique / Project- run_command_verified: yes / no
## Personal Judgment- TASTES.md candidate:- evidence_across_projects:- keep_as_project_note_if_unproven:
## Chapter 03 Handoff- DESIGN.md v1:- reusable_assets:- interaction_rules:- explicit_rejections:- unresolved_constraints:

学习进度

正在读取你的学习记录…