Install the clipper
Save what you find while you browse — straight into the reference library, with the link back attached.
The clipper is enabled on this server.
What it does
Save this site
Reads the page and files the logotype, palette and typefaces as one identity in your library.
Save an image
Right-click any image. Clips from the same site are grouped under that site rather than scattered.
Save a screenshot
Captures the tab as you see it. A favicon is 16px and says nothing about a design — this is the design. And because the capture happens in your browser, it works on sites that block servers.
Setting it up
- 01
Turn it on
The clipper needs a shared key so no other site can write to your library. Generate one and put it in .env.local as PLAYBOOK_CLIPPER_TOKEN, then restart the server.
openssl rand -hex 24 | pbcopy - 02
Load the extension
Open chrome://extensions, turn on Developer mode, choose Load unpacked, and pick the clipper folder inside your Playbook project.
~/playbook/clipper - 03
Paste the key
Click the extension, open Settings, and paste the same key. It is stored in the extension only and is never sent anywhere except your own Playbook.
- 04
Clip what you want
Four ways, all keeping the link back to the page they came from: the whole site read for colours, type and marks; a screenshot of the page as it looks; one element — hover a logotype or a card and click it; or a section you drag a box around. Alt+Shift+P opens the clip mode anywhere.
Alt+Shift+P
What arrives, and what it may be used for
Everything the clipper saves is marked rights unknown and carries the link back to where it came from. It can sit beside your own work, be studied and compared — but it cannot go into a client's brand book until someone marks it as owned, licensed or generated. Saving other people's work is how every studio works. Publishing it is not.