You find a site you love. Press Alt+Shift+S, write one line about what caught your eye, and keep browsing.
While you're away, Artspo opens the page, scrolls it, and records what it's made of. Your agent does the rest.
No server, no account. Everything is plain files in a folder on your computer, readable by any agent:
Claude Code, Codex, Cursor, Gemini CLI, Copilot, or a chat app you upload files to.
Screens in this README show demo sites built for it, not real companies.
Clip
Every clip becomes a folder with a clip.md: the palette by share of the page, the type scale, radii, shadows,
buttons, and every animation with its duration, easing, delay and stagger. The catalogue rebuilds each one from
those measurements, so you can see a site's design system at a glance.
It also keeps the page's visual material in assets/: illustration, textures and imagery, short videos, and Lottie
or Rive animations, each described by how the page shows it (an icon set as "line icons on a 24×24 grid, stroke
1.5px, round caps"; a hero as "object-fit cover, radius 24px"). A Lottie file is read for its exact keyframes and
easing curves. Logos, icons, photos of people and product screenshots aren't saved, just summarized; ask your agent
to "curate my clips" and it looks through what's left and sets aside anything that slipped through, or for "a canvas
of my assets" to see them all on one page. The files are reference for you and your agent; books never include them.
Motion, not just pixels
Screenshots can't show how a page moves, and motion is half of what makes a site feel expensive. Artspo records
the opening choreography and every scroll reveal, then replays them on one clock.
Distill
Ask your agent to analyze the library. It finds the design languages (coherent looks) and techniques
(single moves, like a highlighter mark or a staggered rise) your clips share, names them generically, and writes
each as a pattern with a recipe, the evidence behind it, and a live specimen you can play.
Make, and keep track
Ask for a brand direction, a motion spec or a landing page. Each piece lands in works/ listing the patterns and
clips it came from, and your verdict on it steers the next one. The catalogue puts clips, patterns and works on one
page; click anything to trace it back to the sites behind it.
Collections are projects
Give a collection a brief ("launch page for a calm writing tool: warm, one quiet accent") and paste in links you
want clipped, without visiting each one. They're inspected while you're idle like any other clip. Your agent reads
the brief before it makes anything for that collection, and works made for it are filed under it.
Share a book
Publish your library, or one collection, as a book: a page anyone can browse, where every pattern and work has a
Copy prompt that works in any AI. The same book is one artbook.md file, so someone can tell their agent "use
this book as your design reference" with just the link, and an agent catalogue (llms.txt and agents/menu.json)
that lets an agent shop it item by item: pick a language, a technique or a measured site, and fetch just that. Other Artspo users can import it and build with your
patterns, credited to you.
Books go on GitHub Pages (or any static host) with a preview card for when the link is posted. They leave out
logged-in pages, your notes, page text, the sites' saved media, and by default the screenshots of the sites you clipped.
docs/SHARING.md has the steps.
Install
Artspo is made for macOS and Chrome 118 or newer, with Claude Code, Codex or another coding agent. (Linux works
too; Windows isn't supported.) Python 3 is optional; agents use it to build the catalogue and books.
git clone https://github.com/bryfeng/artspo ~/code/artspo
cd ~/code/artspo && sh install.sh # gives your coding agents the artspo skill
Then open chrome://extensions, turn on Developer mode, click Load unpacked, and choose the extension
folder. Pin Artspo to the toolbar. A setup page opens:
Pick where clips go (default Downloads/artspo), name a few collections, and you're ready. Reopen it any time
from Setup in the popup.
- Updating:
git pull, click ↻ on Artspo in chrome://extensions, and run sh install.sh again. The skill
alone can be installed or updated without a clone: curl -fsSL https://raw.githubusercontent.com/bryfeng/artspo/main/install.sh | sh
- Skill only, through your agent's installer: in Claude Code,
/plugin install artspo --marketplace bryfeng/artspo;
for any agent, npx skills add bryfeng/artspo. The extension still comes from the clone or release.
- One copy at a time. Two installed copies of Artspo both answer Alt+Shift+S and write to the same library.
Remove one in
chrome://extensions.
- Library outside Downloads? Chrome only lets extensions save inside Downloads, so setup gives you a one-line
command that links a folder there to wherever you want it (Dropbox, iCloud, a projects folder).
- Moving or reinstalling the extension? Its memory is tied to its folder, so it starts empty. Your clips are
safe on disk: in setup, choose Reconnect a library and it relearns them.
- No git? Download
artspo-<version>.zip from the latest release and unzip it
somewhere permanent (not inside your library).
This is the beginning of the README. Read the rest at the original. Read the full README ↗
