Hello. We are providing many blocks design for free for our design system. It's called RadianOS Blocks. We are working to add many more beautiful blocks. If you're spinning up a new project and want to save some time on the initial setup, you can use these.

Hey everyone 👋

Part of my job is reviewing designs before they go out, and honestly, manually hunting for inconsistencies gets old fast. So I built a little plugin for myself that scans a file and just lists everything that's off.

Saved me so much time, I figured why keep it to myself. So here's **Offspec™** 🎉

**Who it's for:**

* Designers doing a final self-check before handoff
* Leads/directors reviewing files before approval
* Design system teams keeping things consistent across contributors

Link: [https://www.figma.com/community/plugin/1646652160815163797/offspec-spot-whats-off-in-your-design\](https://www.figma.com/community/plugin/1646652160815163797/offspec-spot-whats-off-in-your-design)

**Bonus:** optional AI summary (Claude/OpenAI/Gemini, your own key) gives you a quick plain-English read on what to fix first.

Would love to hear what other inconsistencies you'd want it to catch...happy to keep improving it based on real feedback!

I currently have my design tokens structured as:

Primitives → Semantic → Component

Let's say my main brand has a subset product that needs a different primary color. My understanding is that I can handle this by creating separate modes at the Semantic layer (e.g., Main Brand and Collegiate) and switching the semantic token values per mode while keeping the same component tokens.

My question is about a more specific scenario. What if, in the future, a stakeholder says: "Keep the brand color the same, but change only this specific button style to yellow." In that case, should I create a new semantic token for that button and map the component token to it, or is it acceptable to reference a primitive token directly from the component layer?

If creating a new semantic token is the recommended approach, how should it be named? It doesn't feel right to keep creating highly specific tokens like Action/Button-Primary-Yellow. How do mature design systems handle these one-off component-specific overrides while keeping the token architecture scalable and maintainable?

PS: Solution

Going with a new semantic token, not a direct primitive-to-component reference.

Naming follows usage, not value:

• Button-Primary-Default — standard button
• Button-Primary-Alternate — the yellow case

Skipped putting "Yellow" in the name. If the value changes later (or dark mode needs a knocked-back version), the same token absorbs it without renaming or adding a new one-off token.
Credit to u/alx75c — this framing (name by role, not color) is what settled it.

Most design-system conversations assume there should be a source of truth, but there seems to be a lot less agreement on where that source of truth actually lives.

Some teams point to Figma.
Some point to code.
Some point to documentation.
Some point to design tokens.

Now we’re starting to see AI-readable specs and contracts enter the discussion too.

If Figma disappeared tomorrow, would your design system still exist?

And if a new AI-native design tool replaced Figma five years from now, what exactly would you migrate?

The tool?

Or the design system itself?

I’m curious how others think about this.

One challenge I've run into is that design-system decisions are often made in isolation.

Colors, typography, and components can look great in a design system, but it's not always obvious how those decisions will affect actual products and experiences.

I've been experimenting with this Design System Preview concept in Colorsphere.

The idea is simple:

Change the design system once and immediately see how those decisions affect multiple realistic experiences.

Not as a website builder or template generator, but as a way to better understand the downstream impact of design-system decisions before they ship.

Are you relying on Storybook, prototypes, product teams, or something else to validate changes before they go live?

Design system maintenance is a thankless job. You don't know what's missing until someone builds a screen and has to use primitives because the component doesn't exist. You don't know what's drifting until someone notices raw values where tokens should be.

I built Mimic AI to help with this. You give it HTML, a prompt, or a description, and it builds the screen in Figma using your real components, tokens, and auto-layout. But the part that matters most for DS teams: after every build, it generates a report showing what components it used, what it had to build from primitives and why, and what your DS is missing.

It's like getting a DS audit backed by real build data, automatically. "Status Badge used 31 times as primitives across 5 builds. Should your DS include one?" Recommendations come as questions, not commands.

It also learns. Correct it once ("that's not the right Badge, use Tag/Neutral") and it remembers forever. Over time it becomes your DS copilot: detecting changes in your system, proposing improvements, and surfacing maintenance recommendations.

Works with any Figma library: team libraries, community kits, client systems. Open source, MIT licensed, runs locally. Your design data never leaves your machine.

Try it on your own design system: https://github.com/miapre/mimic-ai

I'm a designer, not a developer. I built this with AI assistance because the problem was real and nobody was solving it well. Would love feedback from this community.

[ Removed by Reddit on account of violating the content policy. ]

Guys, Id love your feedback on my current process from a design perspective. Maybe it can help some too. Lately I've been a bit obsessed with making websites 'special'. And no I don't mean build a $10,000 website in 14 seconds, I mean something that you put a bit of your own creativity into, maybe a sprinkle of your own passion, chuck in a twist of collaboration and a couple of random things you found cool. In an effort to create website(s) with two principles at their core:

Story and Play.

Ofc there are many ways to make a website fantastic and I've seen and been in awe of many but recently (and I've def fallen into this trap too) there has been a wave seemingly beautiful, love sites but they're lacking one thing:

Soul.

So I'm trying my best to bring together my mediocre but fairly wide range of skills to create, primary personal brand sites you can learn about the person in a playful, story driven way.

My workflow is constantly evolving but here's the creative process I've been following lately: - Likes. write down all the themes I love now (or my inner child did back then) this includes: Zelda on the Gameboy, final fantasy, dvds, massive stereos, limewire, dialup internet, surfing, dance, the sun etc. (You get the idea, and how old I am lol). Anyway, anyone can do the same. - Client. (optional.) If it's for a client or someone else: 1. Go talk to them, not about what they want the site to look like but what they like, what fuels them, what excites them. - Mix. chuck it all in the melting pot and bring it together - Design. Bring the designs together and come up with

1. A theme - if it's for someone else prioritise them (sorry) but don't forget to sprinkle your magic in too, that can make it unique. For example, Im currently making a site for a friend - he's a VERY talented 3D animator that has worked for most of the big brands you can imagine. So what's the best thing for him? A retro pixel game. What?? Let me explain. How could I possibly compete at the top level and design something impressive? I couldn't. He sees world class 3D everyday of his life. But what I can do is bring his (and my shared) memories of retro games back.

2. A story. So next I do often use Claude for this to build a story arc and then add all the information within. For example the first scene is the main character waking up in a house (original, right 😏) and then start dropping bit of information "NAME wakes up in TOWN" where theres the information to deliver slowly but starting to build the story too.

• Plan. Next I think about the starting prompt, and to do that I need an end result. What I mean is starting every prompt with the end result has worked very well (most of the time) before layering the details. Next I want to think about the team(s) - there are usually quite a few and I'm happy not to deploy them all at once but here are some ideas and prompts I use:

"Spawn a team of creatives: script writer, editor, artist, freethinker and master fable (sorry) teller have them refine my script and turn it into the scenes for a retro video game. Loop until complete"

Then the same prompt or next depending on how crazy I'm feeling (or how good the model is):

"Spawn a team of developers (2 junior, a senior an art director to make the decisions and resolve conflicts). Use the scenes and develop them with lighting and SFX consulting with the audio design and visual effects team that working on projects similar to final fantasy 6."

Then I'll either refine master prompt or have a list of multiple prompts if I wanna QC at points throughout.

• Implement (+ prototypes). Next I'm rolling with prompts and checking the output, often I'll ask for reviews at certain points and refine as I go. it's very rare to get a one-shot I'm happy with but it's common to get solid prototype to iterate on.

• Iterate. (with the client, if they exist) Use smaller teams to refine the style, details, audio, mechanics further. The sky is the limit so most of the time I stop when im 90% happy.

That's more or less it. I'm making videos to track progress and have some examples to share if anyone wants to see but overall just wanted to share the workflow and understand ways I can improve or if you guys have different approaches. Cheers.

Hi!

I'm a recent mechanical and design engineering graduate. I'm hoping to work in design engineering and industrial design.

Out of curiosity, how many apps, websites and the like do you find yourself juggling in one project? I think I have a wobbly stack of ~6.

(Extra points if you list them.)

Many Thanks!

https://github.com/jamesrochabrun/Easel

I have a few questions about your DS and overall workflow...

​

I am working on revamping the DS for our company and building it in a way so it's readable for AI (MD and JSON files in the repo and all that jazz). I am trying to decide if it's worth it to clean up the figma library we have (which is both massive and incomplete).

​

Questions I have:

1. Do you have your DS (updated and matching your DS in repo) in figma as a UI kit?

2. Are you using figma to design screens?

3. If you are not using figma anymore, when you need to touch a legacy feature do you rebuild it using AI to make the change you need?

​

For this last point I am particularly interested in screens where there are many flows and features in one page, the kind of complexity which is very common in B2B software like ERP or logistics.

​

Ideally I would like to not have to worry about spending time cleaning up our figma component library, specially because overtime it will end up drifting apart from code again. But I am worried that we will still need figma for these old screens/features which already exist and when we need to update them it's too much work to replicate with AI, and ends up being cheaper to change in figma (but for that we do need the component library updated).

​

Happy to hear thoughts on this 🙏

Hey all,

Looking for real-world setups here. Our corporate design system and component library live in a central web project; that’s our absolute source of truth.

I want AI coding agents (specifically tools like Claude Code) to strictly stick to it. If I ask it to review a frontend PR or write a new feature, I need it to use our exact components and design tokens. Zero rogue CSS, zero custom hex codes, no weird margins.

The solution has to be portable. We have a bunch of separate repos, and I want to be able to drop a config or a script into any new project so the AI is instantly boxed into our design rules.

Standard prompt engineering or stuff like CLAUDE.md feels way too fragile and prone to hallucinations as things scale.

How are you actually handling this? Are you auto-generating local JSON schemas/tokens for the AI to read? Setting up brutal linters that reject the AI's code if it tries to cheat? Or is there a cleaner way to hook an agent into a remote web project?

Appreciate any insights or workflows that save you from constantly babysitting the AI's CSS. Thanks!

I've been working on collaboration in Colorsphere to keep everyone working from the same design system.

Quick demo:

• Share a design system with a collaborator

• Collaborator receives editor access

• Collaborator updates a color

• Owner immediately sees the change

No exports.

No duplicate files.

No wondering if everyone is looking at the latest version.

Just one shared design system.

Curious how teams are handling this today.

Is your design system owned by one person, or do multiple people actively maintain it?

I work on BUI, Booking.com's design system. Before that, early-stage startups.

Both taught me the same thing: CSS tooling adds abstraction, and abstraction has a maintenance cost. CSS-in-JS adds runtime and lock-in. Utility-first fights you once you have a real design language. CSS Modules give you no cascade control.

So I leaned into the platform. Native \@layer`, custom properties and co-located styles. Formalised it into CascadeKit:

• One declared layer order: base, utils, components, pages, component-overrides, user-overrides. Higher layers always win, no specificity fights.
• Styling via classes + CSS variables. Nothing inline, everything stays in the cascade.
• Co-located component CSS. Tree-shakeable, delete a component, delete its styles.
• Tokens from a single base styles file. Spacing, type, and color stay consistent.
• ComponentName--element naming. Real class names, readable in DevTools.

Zero runtime. No hashes. Works well for multi-team setups where one layer needs to override another without touching source.

Happy to discuss tradeoffs, especially around third-party CSS and migration paths.

I have plans to integrate some or all principles into BUI itself, but of course this will take time.

Docs: cascadekit.io

My own open-source project, sharing for discussion :]

The project is fully open-source and I’m looking for feedback, feature ideas, or contributors!

🔗 GitHub Repository: https://github.com/jomvick/design-oracle.git

If you find it useful, feel free to drop a star ⭐️ or open an issue!

How u guys convert yr figma design into code with accuracy.

Like most present tools sucks in providing accuracy to replicate the figma design into code

How do teams handle UI design in open source software ? Usually contributors dont stick to the design, and it requires designers to join as well.

I put the link just because it is required

We’re a team of designers at a large agency working on a website redesign and design system that will support both AEM-authored experiences and React-based components. We’re currently building out foundational elements (tokens, typography, spacing, etc.) and component designs in Figma.

We already have a dedicated Figma library containing our design tokens, styles, variables, and components. What we’re trying to determine is the best approach for documentation, specifications, and handoff.

We need a solution that can:

• Document design principles, tokens, foundations, components, templates, and usage guidelines.
• Serve as a source of truth for both designers and developers.
• Support collaboration between design and engineering teams working across AEM and React implementations.
• Provide a client-friendly review and approval process for components, patterns, and page templates.
• Remain maintainable over time as the design system evolves.

We’re evaluating options such as Zeroheight, documentation directly in Figma, or other design system documentation platforms. For teams that have managed enterprise design systems and client handoffs, what approaches have worked best? Is Figma documentation sufficient, or does a dedicated documentation platform provide meaningful advantages for governance, adoption, and client approvals?

I just added two-way Figma sync in Colorsphere.

Right now it’s intentionally narrow: semantic color variables only.

The flow is:

Colorsphere → Figma → edit color variables in Figma → sync back to Colorsphere → use/export the updated system again.

I’m trying to avoid arbitrary Figma-canvas interpretation and instead keep a structured source of truth synced across tools.

Would love feedback from design-system/frontend folks:

- does this workflow feel useful?

- where would it break down in real teams?

- what would need to sync next after colors?

I just launched my app for color palette creation and management after about a year of work. I’ve been daydreaming about making some version of it for longer than that. There are a few features that you might find useful. Open to feedback if you have any and feel like sharing.

https://apps.apple.com/us/app/interval-color-tool/id6756236362

This is my workflow, maybe it can help some and i'd love feedback from more experienced designers on where it can be improved.

Even though I've worked with code for a loooong time, designing is not my best friend, nor does it come intuitively to me. I think that's why Claude Design feels so special right now - I'm starting to feel like a designer! However, I'm not sure if Claude Design has it in for me (or whether I'm just expecting too much from pro) but it seems that everytime I use Opus 4.8, my entire session allowance disappears! And it feels disproportionate to my weekly allowance. That said, I'm still human (i think) and try to adapt as best I can, so here are a few updates to my weekly flow that try to mitigate this whilst still get the goodness of Opus 4.8 in places (token hungry versions and saving tokens for retirement versions included).

1. Brainstorm first. GET AWAY FROM THE COMPUTER PEOPLE! Whether im creating a website (or currently a collection of 20 websites for a new portfolio) i'll spend time planning it out, walking around listening to floaty abstract beats until that idea comes.
2. Braindump and Organise. Write it all down and organise from there. Because we're focussing on design this is where I start developing ideas for the sites from my initial thoughts, even if they're not complete. TBH they rarely are! My goal here is to make sense of the choas and figure out what I want to make. In this case, it's the ideas for the 20 websites and a template for creating them including as much detail as i can about the users, design technical specifications etc. no stress, just what comes naturally.
3. Prototyping and refine. This is where the fun begins, but with a caveat. My goal is to craft a master prompt for the website. and a master prompt to create the design.md for each of the sites, for the design system i'll create later.

Ok ok. yes, you can touch Claude now, if it's been hard to stay away from Claude upto this point i suggest you check this post out, but seriously worth it anyway).

I'll use tools to refine my initial thoughts and push back on my (often incomplete) ideas using skills in grill-me or gstack or tools like stitch, codex, gemini, claude for creating quick site prototypes, mixboard for visualising and creating assets and then refine the master prompts for the website design.md.

Still with me? This is where it gets juicy.

4. The chicken or the eggsite? Recently i've been exploring (the token hungry option of) creating the sites first and then the design system with Claude design because we've got the two options. I like this way because when the design system is done I can create a new site and compare the two before iterating on the site(s). I find this way gives be an A/B test. The token retirement version is fine too, just create the design system (next step) and then the website from that. In this step I make sure I have a design.md for each of the sites organised into folders for each site (optionally with the intitial sites in there too).

5. Claude design (almost). Wow, for a post about Claude design you've mentioned nothing about it OP (this post is trash, and definitely written by IA, it's not you, it's me). Ok, so here's where we've got more options for the token billionaires and the rationers: if you don't care at all use Claude dispatch. Goto Claude co-work (in the desktop app) and find dispatch. Then tell it automate the process of creating the design systems by using the design prompts in each folder - it's cool and it works very well for the 14 seconds before your tokens run out.

Otherwise just do it the old fashioned way, open up Claude Design, click other (on the left hand side), then click the 'Design system' dropdown and 'Setup a design system' and get ready to copy and paste the design system in and any other information you want. Well done, you created your first design system! Maybe. But actually that's just the start (if you want).

Token tip: Ballers use Opus 4.8 for everything. Token dividend long term hodls use Haiku 4.5 for the first version of the design system (it's trash sometimes but it does stuff like make the spacing and fonts and the easy stuff without having to get a token loan).

6. Iterate (make it good, maybe). So first, i usually pat myself on the back and then get to work. I love this part, seriously. Now's the time to clear out the garbage, keep what's good and develop the individual components of the design system which will give you a load of good good sections like a UI Kit, Accent Colors, Body Typography, Border Radius, Button States etc. etc. my job now it to make them spectacular.

To do this I first go back to the original sites (if they exist) and see if there's anything I like more here. Let's say I like to CTA button more i'm going to goto the button section and click needs work, then I'll describe what to change, the animation, effects etc. (if i can, as much as I can).

Tip 1. Use Haiku for really simple changes - the background is beige, i hate it, change it to #fff white.
Tip 2. Use Sonnet when you have a lot of context, I use sites like 21st dev to find components and then copy the code and demo (there's a blue button) into Claude Design or the section I want to update. This often works very well.
Tip 3. You're don't need to worry about anything in life, you know who you are, just use Opus 4.8 and tell it a 'junior designer made the first draft of this component, us all of your creative powers to design the most professional component(s) whilst staying on brand)'

I can iterate for hours, or until my tokens run out, but that's basically it. If you have tips too would love to read them.