The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Refine — Consume less, analyze more
Today, there are countless tools for saving website inspiration, but I never found one that truly matched the way I work.
I wanted to organize my references into collections and groups, find them easily using tags, but most importantly, preserve the thinking behind each inspiration. Why was this section interesting? What idea was it trying to communicate? Which element was worth keeping?
As a result, the inspirations were still there, but the analysis and reasoning that made them useful had disappeared. I would then have to dig through scattered notes or start the analysis all over again.
So I needed something simple. A place to store my inspirations, organize them, and preserve the context that makes them relevant over time.
Refine is primarily designed for websites, but also supports images and videos.
The Project
Refine is an inspiration library designed to preserve not only references, but also the reasoning that makes them useful. The goal is not simply to collect content, but to preserve the observations, ideas, and context that give value to each reference.
For this submission, I designed and developed:
- An inspiration library for websites, images, and videos
- A collections and groups system to organize references
- A tagging and quick search system
- Inspiration boards with context, observations, and notes
- An analysis framework based on Intent, Direction, and Extract
- Local browser storage for inspirations
- The complete product interface and design system
Links
Live project link : refine.figma.site
Additional Notes : Website previews are generated through a third-party screenshot service. The free service is limited to 50 screenshots per day. Once the limit is reached, Refine automatically falls back to favicons and restores previews as screenshots become available again.
Community project link : https://www.figma.com/community/file/1648622015058356350
X post link : https://x.com/anthrsx/status/2067234939314012392
Workflow
Figma Make → building Refine
Figma Weave → logo
Claude → thinking, testing, and iteration
What’s Next
Refine was born from a personal need. I wanted to stop accumulating inspiration without preserving what made it interesting. As the project evolved, the idea grew into something more ambitious. Not just saving references, but building a space capable of preserving the context, observations, and reflections that give them value.
This first version remains intentionally simple, but it already reflects how I would like to manage my inspirations on a daily basis. I’m excited to continue evolving Refine.
For those who would like to take ownership of the project and push it further, Refine can be run locally to integrate Playwright and save inspirations directly on your computer.
Consumerism properly tsckled 😍
Very well done
adore this idea!
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Skip the Story, Find the Step (Recipe scrubber)
Recipe videos bury the recipe. So I rebuilt the scrubber: drag, and the frames magnify like piano keys and snap to each cooking step. Built entirely in Figma. Frames in Weave, designed in Figma Design, made real in Figma Make.
https://staff-dish-43356149.figma.site
this just made me hungry
I’m building the lab I wish my students had. 🧪✨
For years, I taught brilliant minds in empty labs. We described reactions instead of seeing them. This "STEM Interaction Gap" drove my submission for the #ConfigMakeathon.
🚀 Introducing: LabCraft AI
Turn static lesson plans into interactive web simulations in seconds. No code—just curriculum.
⚡ The Workflow (via @Figma Make):
AI Design: Generated responsive "Teacher Dashboard" & "Simulation Canvas" layouts instantly.
Logic Mapping: Used Figma Variables to link sliders to real-time flask visual states.
It’s personal. It’s EdTech. It’s the future of STEM.
👇 Explore the Lab:
🚀 Live Prototype: thus-clad-63683861.figma.site
X Post Link: https://x.com/i/status/2064876112128127280
📂 Remix the Prompt: (See the section below!)
📂 The "Secret Sauce" (Remix Prompt)
SYSTEM ROLE: Principal Product Architect. GOAL: Generate a 3-screen STEM web app "LabCraft AI" (1440px) using Clean Neobrutalism (2px borders, 8px corners, 4px hard shadows). SCREENS: 1. Prompt Input Dashboard: Sidebar navigation + center AI input bar (48px height) with hover/focus states. 2. Interactive Lab Canvas: Split view. Left: 2 Sliders (8px track, 24px thumb) in Chemical Green (#01C38D). Right: Simulation viewport with an Erlenmeyer Flask showing dynamic fluid levels. 3. Performance Analytics: Grid of 3 metric cards + line chart with interactive nodes in Science Blue (#2A697). CONSTRAINTS: Use Auto Layout for everything. Semantic layer naming. Accessible palette (#2A6F97, #01C38D, #FF6B6B).
🛠️ Quick Setup for Remixers 😊
If you're trying this prompt in Figma Make, follow these two steps for the best results:
StepAction1. Variable BindBind the generated colors to Local Variables to keep the Neobrutalist palette consistent.2. Prototype SyncLink the "Generate" button to the Lab Canvas using Smart Animate to show off the STEM interaction.
Amazing!
Hey everyone!
I made Meadow🙌 — a small, shared corner to step out of the world for a minute.
Some days the world is just a lot. Meadow is a small, shared corner to step out of it for a minute.
It's a living garden grown by strangers — every flower in it was built, petal by petal, by a real person somewhere, and the field keeps growing with each one. Make your own bloom from scratch: shape the petals, choose the colors, set its height, give the stem its own curve and leaves. Plant it, and it joins the meadow for the next person to find.
Flowers growing close together slowly cross-pollinate, blending traits with their neighbors — so the garden quietly evolves on its own, untended. Go still, and tiny creatures wander out to rest on the petals. Hover, and the others lean aside to let one shine. When it looks beautiful, snap a picture to keep or share.
Built entirely in Figma Make with a Supabase backend: a procedural flower engine generates every bloom from its own set of traits, so no two are ever alike — and because the meadow is a shared, persistent garden, every flower you and strangers plant stays in the field as it grows, without limit.
A calm place, made by many hands.
Come along plant a flower
Enter Meadow
Community
https://www.figma.com/community/file/1646430748930612604/meadow
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?