Design context

The fastest way to get variants that look right is to show Rivet what you mean instead of describing it. Words like “premium” or “editorial” mean different things to different people; a moodboard doesn’t. Rivet can pull references from several places and put them in front of every variant worker.

​

Pinterest and Are.na boards

Connect your Pinterest or Are.na account from the Rivet UI, then drop a board or channel URL into your prompt:

“Create 3 hero variants inspired by this board: https://pinterest.com/…”

Rivet pulls the board’s pins (or channel’s blocks) through your connected account and feeds the images, with their metadata, into the run. Pinterest (pinterest.com / pin.it) and are.na links are supported.

​

Any website

For any other URL, Rivet opens the page in a headless browser and captures how it actually looks: a screenshot plus the real CSS variables, computed styles, and fonts in use. That’s much more faithful than guessing a site’s palette from its source code.

“Make the settings page feel like https://linear.app — capture their design language first.”

​

Images and videos

Fresh (zero-to-one) runs also take local files directly:

• Images — up to 6 reference images (png/jpg/webp/gif/avif). Workers look at the actual files, which always beats describing them in words.
• Reference pages — up to 3 URLs, each captured as a screenshot plus style data.
• Videos — up to 2 video files (mp4/mov/webm/m4v). Rivet pulls keyframes from each, so a motion reference becomes a sequence of stills workers can study.

“Create 3 landing pages, fresh. Use ~/refs/moodboard.png and match the motion feel of ~/refs/scroll-demo.mp4.”

​

How references reach the workers

Everything you provide — screenshots, images, keyframes, extracted styles — goes into each direction’s briefing alongside its title and subtitle. Workers view the media itself, not a text summary of it. That’s what keeps the output close to the reference.

​

Next