Developer tools and infrastructure
UI design extraction & AI design tools
Tools that capture or extract design systems, UI components, and styles from websites or references and feed them to AI coding agents or export them as code, plus related UI component libraries and designer utilities for frontend builders.
Built for: Frontend developers and UI designers using AI
Projects since May 04
307
Different builders
290
Last 4 weeks vs 8 before
-10%
AI is the core
8.5%
Projects per week
Mostly developer tool or library (36%), web app (31%), browser extension (26%) · from r/SideProject, r/chrome_extensions, r/vibecoding, r/SaaS
Latest
- Pigmo — Picks colors from any web page and extracts a site's full color palette in one click.“Pigmo - color picker for Chrome, free, with a one-time Pro instead of a subscription”
- TSD Creative Studio — Bundles browser-based design tools for extracting and exporting color palettes, checking contrast, browsing fonts, and converting or compressing images.“I built a free browser-based design toolkit — color extraction, palettes, fonts, contrast & image conversion. No accounts, nothing uploaded. Would love your feedback.”
- Design Lab — Teaches UX and UI design topics such as spacing, typography, color, and accessibility through interactive examples on a website.“VC: UX/UI Learning Playground”
- Prism — Extracts the main colors and fonts from a website and shows them in one place.“I got tired of opening many tools just to understand a website’s visual style”
- NOTH5 Free Lite V81 — Renders HTML slider and star-rating UI controls as strings for embedding in chatbot bubbles and web pages.“[Showcase] NOTH5 FREE LITE V81 – 2 controls FREE – Slider + Rating – Flask – Public Domain”
- framertonextjs — Converts Framer website designs into Next.js code without writing it by hand.“1.5 months later, my first ever saas crossed $100 in revenue. AMA”
- ZipIt — Captures images, fonts, colors, SVGs, links and text from web pages into a floating shelf while browsing.“🚀 I’m testing a new way to collect design inspiration while browsing .ZipIt just got a big upgrade.”
- Modern Frontend Inspector — Lets developers edit CSS on live page elements in a Chrome side panel and export the result as CSS, Tailwind, HTML, or an AI handoff summary.“I got tired of losing every CSS change I make in DevTools, so I built a Chrome extension that keeps them”
- Trace UI — Extracts UI components, design tokens and assets from any website and exports them as clean React, Tailwind or HTML code.“Building tool to turn any website into clean usable code and design. Looking for feedback 🩵”
- Picks colors from web pages and lets users save, organize, and export color palettes.“Published my first extension, I have a few questions”
- Font Intelligence — Recommends heading and body fonts, font pairings, and typography tokens for AI coding agents.“I got tired of AI coding agents choosing Inter for everything , so I built a typography skill”
- Design Inspo Board — Saves web page inspiration to a moodboard along with the colors and fonts extracted from the page.“[Extension] I built a Chrome extension to save web inspiration alongside its extracted colors and fonts”
- Teressa — Lets people hand-build UI components, publish them, get feedback, and pair-edit drafts live, usable as Figma kits or code.“Looking for opinions”
- midcode — Lets developers visually edit a website's React or Astro source code on a live canvas and writes changes back as minimal source diffs.“Edit your code visually with midcode”
- Mizu — Provides interface components and styling primitives for building React user interfaces.“Mizu -- Interface craft for React”
- PikSpec — Extracts colors, fonts, assets, and CSS values from a website and exports them as design token files for AI coding tools.“Made a chrome extension so cursor/claude stop guessing when I say "make it look like this site"”
- HorizonX — Provides a subscription platform of UI concepts, components and design experiments drawn from a designer's archive.“I vibe coded a product with almost no coding experience. 2 months later it changed my life”
- Free Transform — Lets designers warp or put Figma layers in perspective while keeping the result as a linked, editable source.“What building a Figma plugin taught me about listening to myself.”
- Togve — Compiles plain-language interface descriptions into structured UI specifications and exports them as builder prompts or Markdown specs.“I built a step between a UI idea and an AI builder—looking for honest feedback”
- Skrewww — Provides an open-source React and TypeScript design system paired with Figma components and machine-readable component contracts for AI coding agents.“I built a Figma + React design system that also gives AI coding agents structured component contracts”
Most discussed
- Wensity UI — Provides a library of ready-made UI components for developers to use in their interfaces.“Made this purely for fun. Didn’t expect it to actually go this far :)”
- .gui — Defines an open, human-readable file format for describing user interfaces that can be previewed, edited, and converted to code.“I built an open file format for user interfaces, like SVG or PDF.”
- Phone Simulator — Previews a website on popular phone and device screen sizes to catch layout bugs before production.“My extension crossed 30K weekly users today - 5 lessons from 11 months of building”
- HorizonX — Provides a subscription platform of UI concepts, components and design experiments drawn from a designer's archive.“I vibe coded a product with almost no coding experience. 2 months later it changed my life”
- awesome-components — Provides a free open-source repository of over 6,000 UI components for developers to copy into their projects.“Open Source: Free awesome-components library 6000+ UI components”
- Picks colors from the screen and copies them in a browser.“How I got 100k users in 6 month”
- BezierMotion — Visualizes cubic bezier easing curves and their animations in real time, with saveable presets.“An App for front-end developers and designers”
- framertonextjs — Converts Framer website designs into Next.js code without writing it by hand.“1.5 months later, my first ever saas crossed $100 in revenue. AMA”
- Shows a vibe-coded app's interface for critique so the author can get UI design feedback.“I have vibecoded an app but I need help with the UI.”
- TypeUI — Provides design guidelines that AI coding assistants follow to generate website and app UI.“I built a tool that you can use with Codex, Claude or Cursor to build better UI”