Reference Library11 Figma pages · 3,998 references
Docs · Process

Reference library: how a page gets catalogued

One Figma page at a time, in this order. Steps 0 and 5 involve Vick; the rest is run by an agent. Steps marked "planned" were not part of the pilot and get built before the next page.

0. Map the sections first (planned)

Sections are how Vick groups the boards, and the grouping carries meaning, so the page is mapped before any image is exported.

Reference eligibility

Apply the external-only scope in Reference scope and purposes before selecting image nodes. Keep authored layouts, personal swatches, hidden assets and component internals out of the catalogue. Preserve the page/section origin and record exclusion reasons. Purpose is separate from the fixed visual vocabulary; original human corrections remain authoritative.

1. Read every image's identity (planned)

A read-only script in the Figma file records, per image layer:

This catches duplicates across pages exactly, even at different sizes or crops.

2. Export

3. Mockups

4. Tag

5. Review (planned)

6. Build and publish

Keeping progress

progress.json in the library folder is the record of where every page has got. The Progress page is built from it, so Vick can see how far a run went even if it stops halfway (a session ends, or credits run out).

Example:

"run": { "page": "1834:5533", "who": "Claude", "stage": "exported", "done": 340, "total": 826,
         "started": "2026-10-23T10:00:00+05:30", "updated": "2026-10-23T10:48:00+05:30",
         "resume": "Sections 1-9 cropped; next section 10 (Ideas: B)" }

When something is wrong

ProblemFix
A tag is wrongCorrect it in review mode; it is saved as a person's correction and survives re-runs
The same mistake across many imagesFix the rule or the space's anchor examples, then re-tag only those images
An image exported black, blank or coveredRe-render that node alone, automatically or on request
An image is a duplicateLink it to the first copy, keeping every location
The Figma page changedRe-run the page: new images get tagged, removed ones are marked removed, unchanged ones and corrections stay
A word is missing from the vocabularyAsk Vick; never add it silently

For web captures and case studies, inspect the header, project introduction, product labels and footer at readable size. A contact sheet alone is insufficient for a long capture. Local OCR can help locate text, but check the image before accepting a name. Keep only a few useful headings and names, not an OCR transcript.

The brand belongs in source; the project title, host/retailer and credited creator belong in project, platform and creator. A multi-brand studio index is not automatically the adjacent project’s brand, and a collection title does not prove the parent brand. Canvas proximity is context, not label evidence. Leave the source Unknown when the name cannot be established.

Readable-text reviews are stored in the repository’s annotations.json, keyed by node ID, with a short source_evidence explanation. manifest.py and pack.py both apply them. They cannot alter the fixed visual tags. keywords are free text, separate from vocab.json. Human edits in the local library root’s or page folder’s corrections.json take priority; personal keywords or user_keywords there are retained as user_keywords through rebuilds. These files are never rewritten by the pipeline. This preserves later additions; there is not yet an in-browser keyword editor.

In the viewer, Copy library link copies a stable ?ref=NODE_ID#library link that opens that exact image, including a duplicate. Open in Figma and Copy Figma link remain separate. View page opens the parent library page using ?page=PAGE_ID#library. Links retain the current host and path, including the portal’s /reference-library/ path. Local links require the local server; sharing them between computers requires an accessible hosted copy of the library.

Webpage capture planning

For a board of website references, scripts/plan_web.py META.xml WORKDIR prepares logical capture units before the standard render planner. A frame assembling slices of one screenshot stays one reference, with the frame's stable Figma node ID. Complete editable website imports are retained as layout references; their component libraries, vector fragments and annotation shapes are excluded. Ordinary boards of separate images are not collapsed. The closest nested section is preserved.

Imported Body content can extend beyond a viewport-height frame. Use its full height when planning the render. Check actual rendered dimensions against the expected bounds: off-canvas menus and decorative overflow can shrink a capture dramatically. Repair low-resolution captures individually, or crop the intended webpage viewport from the saved native render after visual verification. Keep the raw PNG and move the earlier JPEG into images-superseded/; record the crop and reason in the page's quality notes.

Rotated deck layers

For imported presentation slides, obtain each selected node’s absoluteBoundingBox and its parent’s absoluteBoundingBox in a read-only Figma inspection. Save them as work/absolute-bounds.json (objects with id, box and parentBox). plan_renders.py uses those rendered corners instead of the layer’s transform origin. A rotated slide can otherwise shift a crop by one column or produce a blank final slide. Always inspect the first and last slide and the whole contact sheet before accepting a batched deck export. Retain original PNGs for future inspection.

Paper specimens and mixed colour studies

Follow Paper and material references when supplier specimens, branded applications and authored colour studies share a board. Extract independent source images rather than the constructed palette. Keep specification evidence qualified, inspect pale/flat flags for real texture, and preserve the exact pending node queue if access stops.