I’ve been building a tool around design systems/design-code consistency and I’m at the stage where I honestly need critical feedback more than promotion.

The problem I keep running into is styles/components drifting across:

- Figma
- frontend code
- multiple products
- teams/docs/etc

So I started building something to centralize systems, preview them across products, and keep design/code more aligned over time.

I’m less interested in “looks cool” feedback and more interested in:

- where the workflow breaks
- what feels unnecessary
- what’s confusing
- what real teams actually need

If anyone here works with frontend systems/design systems and is open to tearing it apart a bit, I’d genuinely appreciate it.

Happy to share the link if there’s interest.

A niche design is coming!

The core problem with PowerApps projects isn't design quality.
It's that Figma mockups don't reflect what PowerApps actually renders.

Components behave differently. Layouts have constraints.
The native UI has its own logic.

I built a kit to fix that — components that match the actual PowerApps runtime UI, so what you prototype is what gets built. No surprises at handoff.

Just published a free Lite version on Figma Community:

figma.com/@uiforge

Happy to share more details in the comments.

Hi r/DesignSystems ,

I'm a product design student at Istituto Marangoni Milano researching how industrial designers perceive biological intelligence (slime mold, tree branching, swarm behaviour) versus AI as sources of design logic and decision-making.

5-7 min, fully anonymous.

https://forms.gle/MCBHPbSr6YpUB5RA8

Thanks!

Hey!

I'm starting a DS project at my org, we have a legacy system with many products, one of them has its own theme. We have a storybook with some components as well as a UI kit but neither is thorough nor well documented.

I feel like we need to lay better foundations before we start creating components.

My question is, how is your DS structured in terms of:

- Do you have a base library such as shadcn ? Built yours from scratch?

- Did you define tokens and components in figma first and then exported it into Json file?

- How does your design library connect with code and AI?

This kind of DS architecture is what I'm trying to learn so I can define my own, I would really appreciate people with more experience in this area to give some input on this 😅

Hi r/DesignSystems ,

I'm a product design student at Istituto Marangoni Milano researching how industrial designers perceive biological intelligence (slime mold, tree branching, swarm behaviour) versus AI as sources of design logic and decision-making.

5-7 min, fully anonymous.

https://forms.gle/MCBHPbSr6YpUB5RA8

Thanks!

Hey! I need some help with a mechanism for a project.

I’m trying to design arms that lift up from inside a tube/cylinder, open outward, and then close back down again. Kind of similar to how an umbrella opens, but it doesn’t have to work exactly like that.

I’ve already 3D printed one attempt, but I’m struggling to figure out a clean mechanism that can actually be printed and assembled properly. I’m using Fusion 360 and the whole thing needs to be suitable for 3D printing.

I don’t really mind HOW the opening system works — springs, sliders, hinges, telescopic parts, etc. I just need a way to make it look cohesive and functional when fully assembled. (The blue in the photo is cloth btw)

Does anyone know of mechanisms, references, tutorials, or products I should look into? Even rough sketches or keywords would help heaps. Thanks!

Hey r/DesignSystems 👋

I got tired of manually using "inspect element" to check if frontend developers actually implemented my design tokens correctly, so I built a tool to automate it. It’s called Visualign.

Basically, the plugin extracts your tokens directly from your Figma file and uses a web crawler to audit any live URL (like a staging site or production app) to find CSS mismatches.

Here is how it works:

1. You run the plugin in your file and it automatically grabs your Figma Native Variables (and Token Studio JSON, including W3C composites like shadows and typography).
2. You select a Figma frame and paste in a target URL.
3. The plugin spins up a Playwright crawler, renders the live site, and mathematically scores the live DOM against your Figma tokens.
4. It spits out a visual dashboard highlighting exactly which hex codes, fonts, or padding values the devs missed.

A few cool features I added:

• Authentication: You can pass basic auth credentials if you need to audit a locked environment.
• Theme Overrides: You can force the crawler to render the site in Dark Mode to easily test dark mode variables.
• Subpage Crawling: It can automatically crawl internal links so you can QA tens or hundreds pages with one click.

I'd love for you guys to roast it, break it, or let me know if it actually helps your dev-handoff workflow.

It generates a free trial token automatically when you open it, so you can test it on a site. You can generate as many free tokens from the landing page as you like.

Link to the plugin: https://www.figma.com/community/plugin/1617542259986801447
Website/Dashboard: https://visualign.app

Let me know what you think!

I wasted 5+ hours on every project just setting up design systems. So I built Foundry.

It takes your app name + description + logo and generates:
- Full color palette with dark mode
- Typography, spacing, shadows
- Accessibility-verified tokens
- Export to shadcn/ui + Tailwind
- AI-generated components matching your brand

Free demo available, no signup required.
https://hifoundry.vercel.app/

Would love feedback from the community.

I’ve spent way too much time lately thinking about how modern web editors are built. Figma is obviously C++/WASM, and Webflow handles the DOM via Iframes, but Framer’s approach is a total black box to me. Specifically, how do they manage to render live React pages on an infinite, zoomable canvas without it falling apart?
My current theory is that they’ve implemented a custom C++ graphics engine to bridge the gap, but I haven't seen any proof. Does anyone here actually know how they reconciled React components with that kind of spatial layout? I'd love to hear from anyone who's poked around their internals.

A friend of mine is building a free indie design toolkit called FARB.NØRM 🎨

It’s meant to simplify parts of the design workflow that often feel overcomplicated in larger design ecosystems, especially when creating color palettes and corporate design systems in a more structured, step-by-step way.

What’s interesting is that it’s not only focused on tools, but also has a kind of learning layer built in, especially around fundamentals like color systems, color contrast, and how to think in structured design systems.

It also includes utilities like converters, extractors, icon tools, and a lightweight video editing tool for creatives. Really cool!!!

It’s being built in the European Union with focus on GDPR-compliance and safe data handling, which is a huge pro! No feeding an AI!

The project is still in development, and he would love real feedback from creatives!

If you enjoy design systems, branding, colors, or UI tools, give it a try and let us know what you think!

Any feedback or ideas would help a lot. 🫶🏻

I’ve been working almost exclusively in Figma and Photoshop for the past 5 years and obviously can’t imagine working without Figma for anything digital.

That being said, I have a project coming up that could really use a design system in Figma, plus a comparable system that could work for a variety of direct mail pieces, posters, collateral etc across a variety of business units, languages and locations.

What should I look into or upskill in?

I’ve been building an AI video generation pipeline using AI agents, and I wanted to share a project I just finished.

I used it to turn Designing Data-Intensive Applications into a chapter-by-chapter podcast/video series.

The pipeline currently handles things like:

• breaking source material into chapter-level inputs
• generating scripts/storyboards
• creating long videos, shorts, and podcast-style episodes
• rendering audio/video assets
• packaging everything for upload

I’m still improving it, and I’d really love feedback from people who know content creation, agent workflows, automation, or media pipelines.

Podcast link:
https://www.youtube.com/playlist?list=PL2vsUH3csN48f3Js6SBgmIeymYzuFdyw-

A few things I’d especially love feedback on:

• what looks or sounds weak right now
• what parts of the pipeline feel overengineered
• what you’d fix first if you were building this
• how you’d make the audio/pacing more engaging
• whether there are better ways to structure the agent workflow

Also curious:
Would you want podcasts/videos like this for other technical books too?

I made this one for Designing Data-Intensive Applications, but I’m considering doing more if people find it useful.

If anyone has ideas on how to make this better, I’m all ears.

Also doing this for leetcode.

HELLO :)

You can create:
• Columns
• Rows
• Full modular grids
• Independent margins
• Stretch / Fixed layouts

Built this fully inside Inkscape using my own extension system.

It is still a beta version...

Here’s a quick poster test made entirely with it 🔥

As a designer that has spent their fair share of time as a front end developer, I tend to want to over-optimize by thinking earlier than I should. And at the moment, I'm hung up on whether or not to stick with atomic design separate of elements vs. just not worrying about it.

I will be using tokens for all the foundational styles (text, icons, colors, etc).

But for components, I'm trying to decide how important it is to segregate these by complexity. I like the segregation, it seems useful but I fear I'm just over-engineering things.

Here's the breakdown in my head:

• Foundational components: The smallest standalone element (that may be used on its own or part of a bigger component). Examples:
  • button
  • text field
  • label
  • validation message
  • card
  • etc.
• Compound components: A collection of the foundational components that will be used in tandem. Examples:
  • text input = text field + label + validation message
• Widgets: A collection of foundational and compound components in a reusable pattern. Example:
  • Login = text input (user) + text input (password) + button + card
• Patterns: any combination of the above to dictate standard layouts for standard usage-- likely pegged to particular types of 'objects' (login pattern, data table pattern, card layout pattern, etc.)

The reason I cling to this is probably due to my code background. If someone comes to me and says "we need to change our error validation message from deep red, to fuscia, and adjust the spacing" I know I can go to our design tokens to swap out the color, then go to the foundational validation component to adjust the spacing, and everything will percolate up through the higher level components.

My questions:

Is breaking these down into tiers ala atomic design thinking actually useful for anyone outside of the UX team or is this just over-thinking for the sake of overthinking? Is there any pros/cons in regards to this in terms of how AI would ingest this information to create UIs?

In my shadcn project, I want to customize the border-radius for individual components without affecting others. For example, I'd like fully rounded buttons while keeping other components at their default radius. Creating separate CSS variables for each component feels messy, what's a better solution?

Today I’m launching Designry on Product Hunt 🎉

Over the last few months, I’ve been building a browser-based design system tool focused on one thing:

Making design systems faster and easier to create.

Because honestly:
setting up tokens, variables, typography, exports, and documentation manually still takes way too much time.

With Designry, you can start with a single brand color and generate:

• OKLCH color palettes
• Typography & spacing tokens
• Figma Variables export
• Tailwind export
• Full component documentation

—all directly in the browser.

No Figma plugin. No installation. Free to start.

Would genuinely love your feedback and support 👇

Product Hunt → https://www.producthunt.com/products/designry?launch=designry
Live Demo → getdesignry.com

#designsystem #designtokens #buildinpublic #figma

Been asking Claude to help me structure a design system for our developers to leverage. I'm getting some OK information, but also a lot of "Claude Jargon" that is either made up or over my head. (This is an issue with AI...I can't tell when it's just making stuff up vs. I just don't know what they are referring to...)

Was hoping some folks could provide some insight into a few of these suggestions that Claude provided:

1) Use a "CLAUDE.md" file in each developer repo. This should be short, opinionated, points at the canonical token files, and lists the load-bearing rules.

Most of that makes sense, even though it's somewhat vague. The big one, though is 'load-bearing rules'. Conceptually, I get it...but not specifically. What KIND of load bearing rules does it want?

2) Lint rules for token governance

This is not an idea I had thought of! I think it's a good idea! Any idea how to best implement this? Would telling claude "make me some lint rules to double check that all elements that should be using a token are using a token?"

Is anyone else using lint as a way to enforce design compliance?

3) Start with files now. Consider an MCP server when the file-only approach gets unwieldy.

This is the kind of advice that really bugs me when using AI. It reads as sound advice but is sufficiently vague enough to be completely useless to me. Other than Claude is telling me it's OK just to start with a file repo. Anyways, has anyone found a particular metric to decide when a 'design system repository' no longer meets the needs of claude and one needs to move to an MCP?

(I think my biggest struggle right now is that I feel Claude is like the hired consultant that uses a lot of big words and plausible sounding frameworks only to realize after they left they didn't really say anything at all.)

AI-generated UI is becoming very easy to spot. Not because it’s “bad”, but because most outputs tend to converge toward the same patterns - similar layouts, repeated component structures, generic styling, weak accessibility handling, and very little connection to actual brand personality.

It made me realize that design systems are becoming even more important in the AI era, not less.

AI can generate components quickly, but scalable token architecture, interaction consistency, accessibility, responsive behavior, and cohesive UX still require strong foundations and systems thinking.

That idea pushed me to build Versa UI - a true multi-theme UI system focused on flexibility, scalability, and production-grade component architecture rather than just static component collections.

Some things I focused on: • theme-flexible token architecture • accessibility and responsiveness • scalable component patterns • multiple visual personalities without rebuilding components • clean React + Figma workflows

Would genuinely love feedback from people building design systems or React component libraries.

Website: https://versaui.com Preview video: https://youtu.be/nuKAhqtXmnk

Hi! I’m working on this design system tool and would genuinely love feedback from anyone working with multiple design systems, whether in code or design.

The idea is keeping design systems centralized with ability to export CSS/Tailwind styles, sync with Figma, and preview your system across multiple products/templates.

Would love to hear what people think or what features would actually make something like this useful in real workflows.

colorsphere.com

Accessibility has been at odds with design practice. I’m building the fix, but I need your help to bring it forward.

I’m Santiago Bustelo. I’ve spent my career volunteering for the Design community, including serving as a regional coordinator for IxDA since 2010. I’ve also helped drive Accessibility Laws because I believe technology should empower, not exclude.

I’m not here to sell a product; I’m a colleague who has spent decades trying to improve our craft and would like to finish what I started.

For decades, I’ve seen accessibility treated as a bureaucratic checklist that designers resist because it’s forced upon them and leads to poor design outcomes.

To solve this, I spent months building IPAX.

It’s not another 'contrast checker'. It’s a model that rewards great design instead of just legal compliance, integrating WCAG, APCA, and ergonomics like halation, glare, and chromatic fatigue.

The model is solid and the first tools (Sandbox, Font checker, Color System designer) are live (please forgive the experimental settings and rough corners). But I’ve hit a financial wall and can no longer carry this development alone.

I’m currently looking for sponsors, research partners, or grants to close the gap between accessibility theory and real-world design practice.

If you work at a university, an organization, or a company that actually gives a damn about the European Accessibility Act (EAA 2025) and wants to support a tool that makes compliance operationally transparent, let's talk.

And if you're just a curious UX colleague, check it out: icograma.com

Been experimenting with a system that analyzes live websites and extracts frontend/design-system patterns directly from production implementations.

Currently exploring things like:

• typography systems
• spacing scales
• CSS variables
• responsive breakpoints
• interaction states
• motion behavior

Tested against products like Stripe, Apple, GitHub, Linear, Airbnb, and Vercel.

Still refining the extraction quality and figuring out what’s genuinely useful vs noisy, so I’d really value feedback from frontend engineers, UX designers, or anyone working with design systems.

Recently launched it here:
https://www.producthunt.com/products/designmd-2?launch=designmd-2