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
A bookmarklet that draws a 1px red outline on every element on any page—spot layout and alignment issues instantly while you build.
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
I joined the Config Makeathon and built BriefOS — a client brief operating system for designers, studios, and freelancers.
The problem I wanted to solve is something almost every designer deals with:
Client projects rarely start clean.
They usually start with scattered notes, vague goals, random references, unclear positioning, mixed opinions, and no approved direction. That chaos creates slow starts, endless revisions, weak strategy, and confusion between the designer and the client.
So I built BriefOS to turn that mess into a clear, structured website blueprint.
The idea:
Client chaos → AI signal extraction → website blueprint → visual direction → wireframe → client approval
Inside BriefOS, a designer can collect messy client input, organize it into useful categories, extract important signals, build a sitemap, generate copy directions, choose visual routes, adjust wireframes, and send decisions into a client approval room.
I wanted the product to feel less like a generic AI tool and more like a real project command center.
What I built:
Command Center to track the full project workflow
Intake Wall for messy client notes, links, screenshots, and references
Signal Extractor to identify offer, audience, CTA, tone, gaps, and contradictions
Blueprint Builder for sitemap, homepage structure, copy, and conversion path
Visual Lab for mood, palette, typography, layout direction, and style routes
Wireframe Studio for reviewing and refining the homepage structure
Approval Room for client decisions, comments, approvals, and revision requests
I also focused on making the experience interactive instead of just “AI magically does everything.”
The user can tag notes, approve or reject signals, choose direction, reorder sections, compare options, adjust wireframes, and approve final decisions.
Built using Figma Make as part of the Config Makeathon.
The goal was simple:
Help designers move from confusion to clarity faster — while keeping strategy, copy, design, and client approval connected in one workflow.
Still more I’d love to improve:
deeper real data inputs
stronger drag-and-drop behavior
better client presentation mode
more polished animations
live export options
more visual direction templates
But for this version, I’m happy with the core concept: a useful AI workflow product built around a real design problem.
preview link:https://www.figma.com/make/LhthPqSGpwgLBKVoJdQLHG/Begin-Project?fullscreen=1&t=aPQZNZHYQiD53qn0-1&code-node-id=0-9
#ConfigMakeathon @figma #FigmaMake #ProductDesign #UIDesign #AIDesign #WebDesign #DesignTools #Contra
This is actually a really useful idea. Turning messy client briefs into a clear workflow solves a real problem.
Hey Contra — new here but figured I’d share what I’ve been building.
I’ve been posting progress on Twitter, but quick look at where Desk Doodles is at.
It’s basically a canvas that takes any drawing, SVG, or image and pushes it through different hand-drawn treatments — rough sketch, bold ink, stipple, charcoal, etc.
The fun part is that every mark-making modifier is controllable. Wobble, multi-stroke, shading, pen tips, texture, all that stuff.
The fun part is its going to become a live canvas people around the world can put thier own object. Think of it like a desk as a public space!
The bigger goal is an intelligent design system that can look at the source and pick the right treatment per region automatically. So it’s not just “slap a filter on it.” It’s more like the system understanding what kind of marks should go where.
Where it’s at right now:
/audit — 197 reference shapes rendering through every style in real time. This is mostly the engine testbed.
/playground — pick items, place them, tweak modifiers live.
SVG upload is working too.
Still need to ship drawing → 3D, complex SVG → 3D, public canvas, and mode switching.
But yeah, that’s where I’m at right now.
I'm excited to see the final project!
Designed a modern healthcare website focused on simplicity, trust, and accessibility.
Key highlights:
-> Clean and professional UI
-> Easy navigation
-> Mobile-responsive design
-> User-focused experience
-> Fast and intuitive interactions
Always striving to create digital experiences that are both functional and visually engaging.
Challenges
View all
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?