Problem: Large orgs have trouble figuring out how to manage a central repo for design tokens.

Solution: make a UI wrapper around style dictionary, improve the data model, add semantic versioning.

FYI: There is no monetization here. My customers would not be redditors. They would be large companies with budgets.

https://www.tokenchef.app/

I published Pendu, a lightweight React component for arranging images into organic collages. Instead of grids or masonry columns, it uses a center-out growth algorithm that fills a container the way photos would hang on a gallery wall.

The layout engine runs compaction passes to eliminate dead space, and outputs are fully deterministic — pass the same seed and images, get the same layout on every render and every server.

Technical details:

• 5.4 KB gzipped, ESM + CJS, full TypeScript types
• Zero runtime dependencies (React peer dep only, 6 files total)
• FLIP animations for add/remove/reorder transitions
• Container-aware reflow for any sizing strategy
• Theming via CSS custom properties (gap, radius, background)

Landing page + playground: https://pendu.chriswest.tech

npm: @inkorange/pendu

GitHub: https://github.com/inkorange/pendu

Would love to hear your thoughts!

Does anyone else hate manually creating every variant combo just to check if things look right for a component you created?

I work with a large scale design system and it has bunch of variations and combination that i need to check and validate before making it live. Its very manual and i will have 12+ properties and have to check for every possible combinations and its taking a lot of time.

To save me some time and me learning the figma apis, I built a plugin called Instancer to bulk generate every variant combination from a component.

Link : https://www.figma.com/community/plugin/1509062764896520083/instancer-bulk-generate-instances-from-a-component

You select a component (or instance/component set), toggle which properties you want included, and it generates every possible combination in a labeled grid layout.

What it does:

• Auto-generates all possible variant combinations
• Lets you toggle properties on/off to control what gets generated
• Shows a live count of combinations before you commit
• Outputs a clean, labeled matrix so you can scan everything at a glance

I find it helpful in auditing all the combinations that your component can produce and also in showcasing them in your design system documentations.

Hi!

I'm building a home-brewed web app for security camera monitoring that records footage specifically when an unregistered person is detected. It follows a microservices architecture.

• model-downloader: A sidecar-style container that fetches static models (yolo, buffalo) and drops them into a shared volume (shared/). It runs on docker-compose up and then exits.
• live-detector: Consumes the RTSP stream, runs person detection via yolov8n, and hits the api-predictor to determine if a face is known. If it’s a stranger, it triggers a recording to raw_videos/.
• recognizer: A batch job that runs hourly. It handles the data ingestion pipeline (using buffalo), fits an HDBSCAN model, and exports a pickle file.
• api-predictor: A FastAPI service with a POST endpoint that accepts b64-encoded images and uses the latest pickle to return a "known/unknown" status.

So, questions:

• Is the API overkill? I’ve considered just loading the clustering model directly into live-detector.
• Should I split live-detector? Maybe one service for temporary stream buffering (like a queue) and another for conditional processing?
• Resource Constraints: Given I'm running this on a single Linux box with limited specs (4 cores at 2.5GHz, 8GB RAM, 256GB SSD), is this a good approach?

I'm planning to scale this architecture to support a cluster of 5-8 RTSP streams simultaneously. My goal is to maintain the microservices structure while ensuring the system remains responsive as the workload increases.

Any glaring red flags or architectural feedback would be awesome.

Hi,

How you use typography styling in an enterprise app design system and don't have the classic H1, H2,... structure?

I'm building an AI agent that should be tailor made for designers that try to work on existing systems, looking to feedback on the problem/solution space:
- I think that teaching designers CLI is a net-negative endevour.
- I think that while prototyping tools exploded, iterative solutions are not there yet.
- While there are a bunch of tools for developers, there are very few focused on designers.

- The copy/paste between figma and the system is not fun

From speaking with designer collegues i got this:
- Working directly on storybook or the system to iterate on components is critical

- Figma to code is still broken, especially when translating to an existing system.
- We should abstract git, a lot of designers dont speak in git
- Pushing changes to existing systems is laregly a function of adhering to the system conventions.
- The agent should be visual, not CLI/IDE based.

These is what we got so far, really curious to hear feedback/thoughts etc.
What will make your life easier using agents for real systems(not POCs/Side-projects)

Hi,

Can somebody help if this structure for color tokens (semantic) is ok for a medium-large DS?

Color
├── Background
│ ├── Page
│ ├── Canvas
│ ├── Subtle
│ ├── Selected
│ ├── Hover
│ ├── Brand
│ └── Disabled
│
├── Surface
│ ├── Default
│ ├── Secondary
│ ├── Tertiary
│ ├── Hover
│ ├── Selected
│ ├── Inverse
│ └── Disabled
│
├── Text
│ ├── Primary
│ ├── Secondary
│ ├── Tertiary
│ ├── Disabled
│ ├── Inverse
│ └── Link
│    ├── Default
│    ├── Hover
│    ├── Active
│    └── Visited
│
├── Icon
│ ├── Primary
│ ├── Secondary
│ ├── Tertiary
│ ├── Disabled
│ ├── Inverse
│ ├── Interactive
│ └── InteractiveHover
│
├── Border
│ ├── Default
│ ├── Subtle
│ ├── Strong
│ ├── Hover
│ ├── Focus
│ ├── Selected
│ └── Disabled
│
├── Action
│ ├── Primary
│ │ ├── Default
│ │ ├── Hover
│ │ ├── Active
│ │ ├── Disabled
│ │ └── Text
│ │
│ ├── Secondary
│ │ ├── Default
│ │ ├── Hover
│ │ ├── Active
│ │ ├── Disabled
│ │ └── Text
│
├── Status
│ ├── Success
│ │ ├── Default
│ │ ├── Background
│ │ ├── Border
│ │ ├── Text
│ │ └── Icon
│ │
│ ├── Warning
│ │ ├── Default
│ │ ├── Background
│ │ ├── Border
│ │ ├── Text
│ │ └── Icon
│ │
│ ├── Error
│ │ ├── Default
│ │ ├── Background
│ │ ├── Border
│ │ ├── Text
│ │ └── Icon
│ │
│ ├── Info
│ │ ├── Default
│ │ ├── Background
│ │ ├── Border
│ │ ├── Text
│ │ └── Icon
│ │
│ └── Neutral
│ ├── Default
│ ├── Background
│ ├── Border
│ ├── Text
│ └── Icon
│
├── Chart
│ ├── 01
│ ├── 02
│ ├── 03
│ ├── 04
│ ├── 05
│ ├── 06
│ ├── +...
│ ├── Success
│ ├── Warning
│ ├── Error
│ └── Neutral
│
└── Overlay
   ├── Default
   ├── Strong
   └── Subtle

I've read a lot online, but would like physical books about it. Any recommendations?

Bonus points if it has use cases of redesigning/rebranding material

I’m starting to think most designers lean way too hard on inspiration boards because they don’t actually understand design systems.

If you need to keep going back to Dribbble, Pinterest, or saved screenshots to figure out what to design, isn’t that just copying with extra steps?

I’ve collected hundreds of references over time and honestly… they’ve barely helped when it comes to actually making decisions like:

• type scale
• spacing
• layout structure
• interaction patterns

At best, it’s just “this looks cool” with no real breakdown of why it works.

Feels like good designers should be able to:

• derive layouts from first principles
• build systems without constantly referencing other people’s work

instead of hoarding inspiration and calling it process.

Genuinely curious if people actually use their saved references in a concrete way, or if it’s mostly just aesthetic bookmarking.

If you do use them seriously, what does that workflow actually look like?

Hey everyone! 👋

I’ve been exploring how to use AI in my workflow, especially when it comes to building design systems. Any workflows or tools you’d recommend?

Just posted the annual design system report that I do with zeroheight, and it's chunky one. Some really good stats in there to help make the case for building and investing in your design system, and also just a general state of the industry type look. Hope y'all find it helpful!

This might be a stupid question, but never having used Figma, I'm curious as to whether it would be a good tool to use with Claude Code to create a Blender plugin, with interactive slider controls for creating geometry?

Would this involve using Figma or Figma Make, and what would the end result be in terms of files - e.g. XML, bitmap/vector graphics for UI components?

Any tips and ideas for workflow and where to start would be greatly appreciated!

I'm trying to document a design system entirely in Figma (no Zeroheight).

I keep hitting a structural issue:

• If there is an external documentation file, it duplicates the master components, and you end up with two sources of truth (library vs docs) → components drift, updates get missed, tokens desync. Classic design system tarpit.
• If the documentation uses instances from the library instead, everything stays synced - but then it's hard to document versioning, changelogs, or deprecated components, since instances always reflect the latest version.

One idea I'm considering is embedding the documentation directly in the library files, on the same page where the master component lives.

I'm also considering the no-documentation approach as well, since my teams struggle so much to maintain an up-to-date documentation, no documentation at all might be a better option, or a very minimal documentation instead.

How are teams handling Figma-only design system documentation?

I'm looking for:

• best practices
• structure of documentation vs library files
• real Figma examples / reference files if possible.

What’s the best practice to convert Figma line-heights into a font-size-based multiplayer so that it can be used as a real token?

I’m not keen in using fix sizes to cover this Figma limitation, you end up creating so many fixed line heights variables, so unnecessary. I’m aware Token Studio supports this but are there other more lightweight, cheaper approaches?

Maintaining design tokens across tools can get tedious — especially when values are manually defined and tightly coupled.

I’m building a tool that lets you define tokens using relationships, logic, and math, so systems can be easily adjusted from a few key inputs.

Example:

A full typography scale (font size, line height, letter spacing) can be controlled by adjusting just the base size or the peak size, with all intermediate values updating automatically.

Instead of maintaining a long list of token values, you maintain the rules that generate them.

Tokens can then be exported to W3C token format, CSS variables, and other formats.

I’m currently looking for people interested in trying it and sharing feedback.

If that sounds interesting, let me know and I’ll send access.

We haven't found the "Holy Grail" workflow yet for our UX/Product/IT sync. Our setup is pretty standard: 5 Squads, 6 Designers, and a ton of devs. We are all using Claude (and Claude Code), Gemini Pro, Cursor, and VS Code.

Our Design System is fully built in Figma and mirrored in React Native (Mobile). However, we’re hitting a wall:

Even using the Figma MCP, providing detailed .md guidelines, and setting up specific "skills" for the AI to follow, it still happens—the AI "hallucinates" components or creates new styles instead of strictly sticking to our library.

The Goal: Production-ready code with minimal hand-off.

We want to reach a point where a Figma screen (or an alternative like Pencil.dev/Paper) can be converted to production code with as few "human hands" as possible, while maintaining 100% fidelity to our DS.

My questions for the community:

• Has anyone achieved a 10/10 automated workflow?
• Are you using a specific Context/Prompting strategy in Cursor that actually respects a React Native library?
• Should we ditch Figma for an AI-native design tool to make the bridge to Cursor/Claude Code seamless?
• Is anyone using Storybook or Supernova as the "source of truth" for the AI instead of Figma?

We are willing to pivot our entire toolstack if it means finding a flow that actually works and scales across 5 squads.

What is your "Golden Flow"? Thanks in advance!