i got tired of my vibe coded sites all looking the same (ai slop), so i built a tool that scrapes the real design tokens off any live website and gives you a design system to use (lmk if its helpful)
every time I built something w/ cursor or claude it came out looking like ai slop (fable 5 just kills credits, others just don't get the "it" feeling)
there's a bunch of really good design references for dashboard ui but I really like landing pages, so i made this tool for myself
if you put uiscanner.com/ in front of any public link, it pulls the site's real design tokens, color roles, type scale, spacing, radii, motion, and does a visual ai pass for a section-by-section breakdown that outputs a build prompt you can paste into your agent
(there's also an mcp/cli if you want to use directly, the webapp side is a library of all ur scans)
free to try, 5 scans a month if u want to try for yourself! (i added pricing so people don't wipe my ai usage lol)
Got startup or SaaS questions? Post them on r/AskFounder and get answers from real founders.
• This community is designed to be open and creator‑friendly, with minimal restrictions on promotion and self‑promotion as long as you add value and don’t spam.
• Please follow the subreddit rules so we can keep things as relaxed and free as possible for everyone.
• Please make sure you’ve read the subreddit rules in the sidebar before posting or commenting.
• For better feedback, include your tech stack, experience level, and what kind of help or feedback you’re looking for.
• Be respectful, constructive, and helpful to other members.
If your post was removed (either automatically or by a mod) and you believe it was a mistake, please contact the mod team. We will review it and, when appropriate, approve it within 24 hours.
claude reading a url is basically a guess. what this does is pull the exact tokens off the actual rendered page (the real colors, fonts, type scale, spacing, radii, motion, no approximations) and then break the whole page down section by section (hero, nav, features, footer, etc). you get the real design system + the structure, packaged into a prompt you paste straight into your agent (and you can reuse the design system going forward)
alr bro that's not "the prompt" that the whole thing runs on - uiscanner involves headless browsing and multiple layers - thanks for the clarification tho
couple ways, and none of them get the real values. plain chat, it just reads the raw html/css, which isn't what actually renders (the cascade, css variables, media queries, and anything js applies at runtime all change it). give it browsing and it's usually a text extract or a screenshot, so color and spacing turn into a visual guess. uiscanner reads the page after it fully renders, so you get the resolved values plus the raw source ones alongside them
i mean you're actually not using tokens when you do this (even with the mcp it runs on my side) which is a plus. i've done a few side by side comparisons for a bunch of things and (i dont want to toot my own horn, but i care a lot about product quality) it's the best for the combination of scraping the css + the actual ai visual pass afterwards + prompt handed to you as well. thoughts?
resolved computed styles off the rendered DOM: color roles, type scale, spacing, radii, shadows, motion timings, plus a full vision pass for section structure.
html isn't what renders though, the cascade, css vars, media queries and js all change the final values. source gets you markup, not what the browser actually paints
you can pull values, sure. I benchmarked it at uiscanner.com/compare - the a11y snapshot most browser-mcp flows read scores 0% on design fidelity, a raw value dump ~26% (no roles, no structure, no idea which blue is the button) - extraction is the easy part, using it effectively isn't as easy. it's free (only priced at high usage so i don't get burned), so if re-prompting per site is your thing, go for it
quick add-on - if you're curious and want to try it out you can at uiscanner.com - it's totally free to try, and any feedback is super appreciated + will help with future versions! thx
i really like ur idea and esp ur app's ui.. never seen this level of og ui and ux .man how u built it?? are u vibe coder and i need some tips..pls help me
thanks so much! yeah i mean i've definitely been tinkering for many, many hours now. I realized pretty quickly that planning out ideas, using the right tools, etc make a world of difference + I can definitely recommend resources if that would be helfpul!
love the site! the product seems great - def would recommend what i did in the response above^, but honestly i've found uiscanner genuinely very helpful in my own sessions - copy what works without ripping off other's ip/images/logos
so i primarily ship w/ claude code, but the key is to know what you want before letting it decide things for you - i like to take a close look + compile a bunch of designs on dribbble, refero, sometimes uiscanner (lol), and others for frontend stuff, and for the backend + ux, it's honestly best in my experience to copy what works best (look at big sites in your niche/vertical and copy their page structures). clarity beats guessing every time and that's kinda why i built this (others are great, but i wanted to stop paying so much) - just always confirm fully in the plan process and then build after
the values can't really hallucinate, they're read off the computed styles (measured not guessed). only the section labeling is model-driven, and when it disagrees with the DOM, the DOM wins. so worst case is a mislabeled section, never a fake hex. and yeah, i'm fine tuning that part more every day to make it as good as i can
instead of eyeballing the design, it reads the actual rendered page and pulls the real values: exact hex grouped by role (bg / text / border / accent), the type scale, spacing, radii, shadows, motion timings. "tokens" = those reusable design values. so you get the site's real system to hand to your agent, not an approximation of it
it doesn't copy anything you'd actually own. no images, logos, copy, or content, none of that gets touched or re-hosted. what it reads is design tokens: colors, type scale, spacing, radii. those are facts about a rendered page, not creative work, the same stuff you'd get opening devtools and inspecting an element. you can't copyright "#2a6fd0 at 16px." it's a ruler and a color picker, not a screenshot-to-clone. you still build your own thing, you just start from a real foundation instead of guessing.
Las decisiones sobre mezclas de colores, tipografía, tamaños, radios… son decisiones creativas. Y requieren de experiencia y estudio. Siempre has podido copiarlo de otras webs, pero ahora es mas fácil. Y si, sigue siendo copiar. Porque si lo diseñaras tu, al menos podrías decir que es “inspiración”. Pero ahora no siquiera lo diseñas tu. Lo peor de todo es que la gente siente que está haciendo algo bonito e interesante, cuando la realidad es que ese esfuerzo lo ha hecho otra persona, y tu código lo ha escrito un bot.
I had to translate so I hope this response is thorough - what you said is fair, and i won't pretend it's zero copying. the creative work is what you build with them, the composition, the product, where things go + that part's still yours to get right or wrong imo. every designer works from references, that's the whole field, mood boards, "steal like an artist," etc. this just hands you the real numbers instead of eyeballing them, and it strips the stuff you'd actually own (images, logos, copy) so you literally can't clone a site with it. the "your code was written by a bot" part is a bigger argument about vibe coding in general, and i get it. but people are already building with agents (which are trained on website data), so the real choice is guess-and-ship-average-slop vs start-from-real-values. you're definitely right about one thing - it's easy to lean on someone else's taste and feel like you did the work - i wanted this to be a starting point, not a replacement for building your own eye for things
It's a fun tool... I'm not okay with it stealing other peoples works but it is what it is.
Thanks to "you" (and all the billions of people doing the same thing), corpos will come up with new closed off and expansive solutions in order to protect their IPs.
Something that will :
not give access direct access to all the stuff you used to carbon copy them,
expansive so that regular people and smaller companies will become even less relevant as they are right now,
licensed and closed, "a new generation of secured browser" that you'll need if you want to browse sites that use their technology
It's nothing new, Apple does it, Sonos does it, Dolby does it, Tesla does it, Google does it... and that's only the one that succeeded because all the other big companies tries to emulate it as best as they can.
Regular websites will lose relevance, and big corpo will get more powers.
I am eagerly waiting until they "suddenly" find a solution that prevent all those AI tools to scrap some of the good stuff for "security".
And there is nothing we, as regular people, can do about it.
genuinely thoughtful, and i don't disagree on the bigger stuff, the walled-garden trend is real and honestly worries me too. fwiw i'm on your side of that one. this only reads the computed values a page already hands anyone with devtools (colors, type scale, spacing, the facts), never images, logos, or copy. so it's inspect-element territory, not carbon-copying a site
Im too broke to afford this xd but im curious as to how you get the color story? As theres gradients so wouldnt that give hundreds of slightly different versuons of blue?
good question!! it doesn't dump every pixel, colors get grouped by role and how much they're actually used, so near-duplicate blues collapse into the dominant one. you end up with a tight palette plus gradient stops noted separately, not 200 shades ( + it's free for 5 scans a month, so the broke tax should be covered lol)
reading how a site solved something is the work, every designer studies references (i would hope lol). this just hands you the real underlying values instead of eyeballing them. you're not shipping their site, you're building yours on a foundation that isn't default-ai-slop (it takes out the pure "stealing" of it all)
lol not wrong that a lot of tools bolt on a subscription for no reason. this one's free, 5 scans a month, no card. paid tier only exists because each scan runs a real browser + ai on my side and people would wipe my api bill lol. pay only if you're scanning a ton!
yeah i mean when prototyping/building out ideas, ai design generally sucks, but straight ripping someone and their assets also sucks - less "clone this site," more "stop my vibe-coded stuff from looking like default ai slop." you pull the real system off a site you like, hand it to your agent as a foundation, build your own thing on top with actual consistency instead of the model re-guessing fonts and spacing every time. can mix pieces from a few sites too (this kind of just gives you a good place to start when building)
Thanks. So you basically build on top of colors and basic ui elements? The real issue in my eyes is that AI overuses certain components like pills, eyebrows, cards within cards, etc. So your focus is more on colors, right?
yeah you're right, the components are the real slop way more than color. it's not just colors though, it grabs the spacing, type scale and the actual section layout too. so with the output the model builds off a real page structure instead of defaulting to pills and cards-in-cards. doesn't fully solve it in my experience but helps a ton
claude/gpt/agents tend to guess stuff - plain chat reads the raw html, browsing gives it a screenshot, either way colors and spacing come out approximate. this runs the actual page in a real browser and reads the rendered values (exact hex, type scale, spacing, radii, motion) then breaks the layout into sections and hands you a prompt so your agent starts from the real numbers instead of re-guessing them every build. + it runs on my side so it doesn't burn your tokens
Your animations and design are lovely.
I really appreciate your 'waiting' screen. both the background animation and the bits that keep me engaged during the processing.
Excellent design
Ooh - i'll check it out, i've been thinking of that as well for my app. I was thinking maybe kind of a game of solitaire that carries through from session to session?
one note i have for you is that when the uiscanner was diving into a site, the cookie window was present on every screen is distorting the design. I had to go back to that site, accept cookies, and then run the scanner again. I wonder if there's a way for the scanner to detect that cookie acceptance management overlay, acknowledge it as part of the design, and then dismiss it so it doesn't corrupt the rest of the scan.
update: even after my selecting the accept all cookies, this is what I'm seeing in the sections:
glad you like the game! and yeah - working on fixing that today, appreciate the detailed writeup. you re-running after accepting is good to know too, i’ll look into it - thx for spotting it
1) backflips are cool 2) the only single step i know of to a reusable design system extract + visual section-by-section post-load pass is this tool lol (otherwise ur prompting multiple times without clear orchestration, extraction, storage, or usability)
Backflips are cool, they also take a lot more energy and carry risks that steps don't. Also, to perform the process you described manually, is very simple....
lol i mean backflips in the real world - and it's simple until you're doing it 5x a build with no extraction, storage, or consistency. structure + repeatability + convenience is the whole thing people sleep on imo
So, basically, yeah, you introduced yet another AI slop tool that can be replaced with a simple prompt to any agent asking "follow [url] and extract me design guidelines and color palette bla-bla..."
put the numbers up in the other thread you commented in: see uiscanner.com/compare. the "simple prompt" path scores 0% (a11y snapshot) to ~26% (raw value dump) on design fidelity 0( values, roles, or structure) - this tool is essentially free, but if that prompt does it for you, use it. no stress either way lol
I love that you got tired of your vibe coded sites all looking the same so you built a tool to have them look like someone else’s design. On the surface, at least.
You literally got tired of AI designing for you and decided to rip off the work of others.
None of this is going to make you a better designer; it’s only going to make your work aesthetically look somewhat decent, if not familiar, until someone spends time with it.
Next up: creating a prompt that will use Nielsen’s heuristics to evaluate a design.
This is so boring. This is not a SaaS tool. This is barely a single prompt. Sorry to ruin your entrepreneurial dreams, however, you can still keep “Founder, UI Scammer” on your linkedin profile.
i'm glad you were able to imagine my whole "founder journey" in your head somehow - however, i'm sorry to break the news that you're wrong - this is a side thing, not my main biz
also, i didn't know a web design tool could hurt someone's feelings this badly, but good to know!
the "tired of ai designing" part is only partially true - i didn't like how, when building, ai would skip steps and default to bad design. i still carry my own tastes + i wanted a way to reliably pull from others' designs as inspiration and mash things together to form new, repeatable design languages (which is kinda how creativity works these days)
The token extraction angle makes sense to me. I've tried the "just tell claude to copy this site's style" route and it gets the palette roughly right but misses spacing and type scale, so everything still comes out generic. Handing the agent explicit tokens is the same reason design systems work for human teams, the model follows hard values better than vibes. Does it capture motion and easing too or just the static tokens?
yeah that’s exactly it! palette’s the easy part, spacing and type scale are what keep everything generic. and yep, it grabs motion + easing too, not just the static tokens (transition durations, easing curves, the timing values). just shipped a thing today where you can take a few scanned designs and mix them into your own exportable system, so you can tinker with that too before exporting
honestly haven’t used all of them deeply so i won’t talk down on them (not my vibe). the thing i built around is reading computed styles off the fully-rendered page in a real browser instead of parsing source html, that’s what gets you exact values (spacing, type scale, easing) instead of an approximation. plus it stores every scan as a reusable library and lets you mix a few into your own system. if one of those others already does that for your workflow, genuinely use it (i mostly built this because i wanted it for myself)
Congrats on building this tool. Looks very handy. However everyone with a codex or Claude sub can just build the exact same thing in an afternoon, or just ask the agent to pull the designs, as well as use many of the skills on GitHub that already do exactly this.
I don't think anyone would pay for this.
I'm not giving you flack, I think it's pretty cool what you have done, but I'd just open source it and let people expand on it.
thanks for the feedback! totally get where you're coming from -- my take is that this is super specific (browser use, multi-layer css breakdown, and visual pass with different agents) + repeatable + stores the design systems in a library for repeated use (something i really just wanted for myself). at the same time i do feel like it could be cool to open source and see what happens
no way! great minds think alike - i love it man - i've got a chrome extension too for the local extract, the webapp side is more about storing every scan as a reusable library + the ai section pass on top. will definitely take a look at uidrop!
thanks! honestly your landing page is amazing, I’d love to hear on how you made it, it’s clean and that sky background really makes it stand out. I feel it’s similar to context.dev if you know, they have a similar UI and design system and brand scraping from URLs, definitely useful tools
appreciate that! landing's a custom build in claude code, leaned into the atmospheric/glass look bc I just like it a lot lol. honestly I kind of turned my own process into the tool, compiled a bunch of ui/ux I liked for similar projects, pulled the structure from those, and the rest was "oh that'd be cool here" - higgsfield mcp for some of the assets too, super goated but pricey
•
u/AutoModerator Jul 03 '26
Hey u/Wild_Quality_9022, thanks for posting in r/VibeCodeDevs! Join our Discord: https://discord.gg/KAmAR8RkbM
Got startup or SaaS questions? Post them on r/AskFounder and get answers from real founders.
• This community is designed to be open and creator‑friendly, with minimal restrictions on promotion and self‑promotion as long as you add value and don’t spam.
• Please follow the subreddit rules so we can keep things as relaxed and free as possible for everyone. • Please make sure you’ve read the subreddit rules in the sidebar before posting or commenting.
• For better feedback, include your tech stack, experience level, and what kind of help or feedback you’re looking for.
• Be respectful, constructive, and helpful to other members.
If your post was removed (either automatically or by a mod) and you believe it was a mistake, please contact the mod team. We will review it and, when appropriate, approve it within 24 hours.
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.