# Intake workflow — capturing real-world elements into the library

When Julian sees something on the web he wants to remember — a carousel, a hero, a transition, anything — he sends it to Claude and it lands in the right place in the library.

## Trigger phrases

Claude recognises any of these and runs the intake flow:

- *"add this to the visual library: <URL>"*
- *"capture this carousel: <URL>"*
- *"clone this section into the library"* (with pasted HTML)
- *"add a reference: <URL>"* (forces REFERENCE mode — screenshot only)
- *"save this for inspiration"* (with URL or screenshot)

If Julian just pastes a URL or HTML chunk without one of those phrases, Claude asks: *"capture this for the library, or just discuss?"*

## What Claude does, by input type

### Input: a URL pointing to a specific section

1. Open the page with `mcp__Claude_in_Chrome__navigate` and take a screenshot.
2. Ask Julian *"which section?"* with a screenshot + brief description of the visible sections (hero, carousel, footer, etc.) so he can pick.
3. For the picked section, two paths:
   - **Cloneable** (clean HTML/CSS, mostly static) → use `mcp__Claude_in_Chrome__get_page_text` + `read_page` to extract the section's HTML, isolate just the section's nodes + the CSS rules they reference, paste into a new local detail page at `captured/<category>/<slug>.html`. Add `<!-- Source: <URL> · Captured YYYY-MM-DD -->` at the top.
   - **Too JS-heavy / interactive / proprietary** → save as REFERENCE: screenshot to `references/<category>/<slug>.png`, write a `references/<category>/<slug>.md` with the URL + what's interesting about it + which patterns it could inspire.
4. Add a tile to `index.html` with the right type badge (CAPTURED or REFERENCE).

### Input: raw HTML pasted in chat

1. Identify what kind of element it is (carousel? hero? card grid?). Ask if unclear.
2. Pick the right category folder.
3. Clean up: strip site-specific framework noise (e.g. Webflow runtime classes, analytics scripts, weird inline styles unrelated to the visual), keep what makes the look work.
4. Save as `captured/<category>/<slug>.html` with the source URL if Julian provided one. If no URL, just `<!-- Pasted by Julian YYYY-MM-DD -->`.
5. Add a tile to `index.html`.

### Input: a screenshot or image, no URL

1. Save the image to `references/<category>/<slug>.png` (or whatever format Julian sent).
2. Write a 4-6 line `.md` next to it with what's notable, which pattern category, and any guess at the implementation approach.
3. Add a REFERENCE tile.

## Category routing

When Claude has to decide which category an element belongs to, use this map (the first matching tag wins):

- **Carousels** — anything that rotates, scrolls horizontally, or stacks images for one-at-a-time viewing (sliders, galleries, swipe stacks, lightbox grids, before/after, thumbnail strips)
- **Heroes** — top-of-page big-impact section with H1
- **Navigation** — headers, menus, mobile hamburgers, sticky bars
- **CTAs** — buttons, pill forms, conversion elements
- **Trust bands** — guarantee sections, testimonial blocks, badge rows
- **Pricing** — tier comparisons, value-stack breakdowns
- **Animations** — pulse dots, hover effects, scroll-triggered reveals
- **Layouts** — section-level layout patterns (cinema reel, accordion, chooser, cream-dark rhythm)
- **Forms** — contact forms, lead-magnet inputs, lead capture
- **Typography** — type systems, section heads, editorial moments
- **Multilingual** — language switchers, RTL handling

If something doesn't fit any of these, ask Julian whether to add a new category or shoehorn into the closest existing one.

## Attribution + licensing

For CAPTURED elements, always put `<!-- Source: <URL> · Captured YYYY-MM-DD -->` at the top of the HTML file. The library is for personal reference; if Julian uses a captured pattern in a client site, he should redraw the implementation in his own way and pick up only the visual idea, not the copyrighted code. Claude flags this on any captured tile by adding *"Personal reference — re-implement before reuse"* to its tile metadata.

## Last updated

2026-05-18.