Been quietly building Aaru's new design system and porting it into code over the past week. Components built on Base UI, one at a time, all living in our own custom "storybook". Started with the Figma tokens, ended up fine-tuning everything in code, as colours and type just render... differently in the browser. Now testing patterns and moving into layouts. Honestly the biggest unlock for design handover I've had in years. Next up: documenting each component's usage for agent use. Recommendations welcome.show more

Shoutouts: @Nomandsign using as an easter egg. @cursor_ai keep me going even when the bill is due.

@svlleyy @aaruHQ @base_ui love seeing personal “storybooks” :D working on one of my own rn

@svlleyy @aaruHQ @base_ui we need video of if flo!

@svlleyy @aaruHQ @base_ui i'm very inspired by you 🙆‍♀️ keep killing it mo!

@aaruHQ @base_ui Similar to

@aaruHQ @base_ui The best there is

@aaruHQ @base_ui 🫡

@aaruHQ @base_ui Nice. If you haven't already, check out @paper. Much better handoff in both directions.

@aaruHQ @base_ui @paper Yes, I talked to @hugosaintemarie early on. I might move to it when they introduce code-to-design sync.

This is so cool. I built a "/design" route very similar to this where I can workshop new components and "patterns" but you've really taken this to the next level! You're inspiring me to level up :) I love working with Claude Design, but a problem I began having was design drift between the two. So I figured I should just be iterating directly in my app code. Did you face a similar issue?

@aaruHQ @base_ui Better to move out of Claude Design, in my opinion. It’s good for prototypes, but not for the whole system.

@aaruHQ @base_ui Beautiful.

@aaruHQ @base_ui How do you guys add an render new components, is this dynamic in any way?

@aaruHQ @base_ui Well done! 💫

@aaruHQ @base_ui what does that company actually do btw

@aaruHQ @base_ui Very nice - thanks for sharing! 🤜🤛

@aaruHQ @base_ui Looks so clean! I've been experimenting exposing the DS docs through a custom MCP server, with a few tools for listing components, their documentation (the when's and why's), their API, and their variants/stories. Working pretty good so far, surprisingly intuitive for AI.

@aaruHQ @base_ui for agent readable docs, agents need the when a component applies, not just the what. You could write more about the product logic and UX for agents use

@aaruHQ @base_ui Wow. Seriously this is something game changer.

@aaruHQ @base_ui this is where a design system gets real, when the code gets to argue back with figma

@aaruHQ @base_ui components built on base ui aren't just about design, they're about the language of components that can be used across teams and projects

@aaruHQ @base_ui Looks sick! Curious what the setup is of your custom storybook? Is it part of the production frontend? Or a separate packed with a separate UI for rendering it?

@aaruHQ @base_ui How did you get the tokens into html from figma, as a browsable file? Are these interactable!?

@aaruHQ @base_ui Great job!

@aaruHQ @base_ui 👌

I tried creating something like this on a 48-hour sprint. I was really disappointed when the AI was still drifting and hallucinating after creating a whole system. How are you fixing that? Like, I really want to make this part work, but I'm guessing the reason Figma and these guys have not been able to crack it is because somehow building interfaces through prompts running on an agentic system is still not properly doable yet. Really want someone to crack it 🥲

@aaruHQ @base_ui 能跨设备保持一致

@aaruHQ @base_ui Nice one. What are you using as storybook alternative.

@aaruHQ @base_ui I would love to hear what your process was/is from the very beginning as a non-engineer; it looks dope!

@dimitrijknight @aaruHQ @base_ui Let me know how far you get having agents understand components and How/when to use them

@dimitrijknight @aaruHQ @base_ui It’s not easy, definitely need human in loop

@aaruHQ @base_ui Documenting components for agent use is the new design handoff. If usage rules live only in a human head, agents ship the wrong pattern at scale. Design systems are becoming runtime constraints, not just Figma pages.

@aaruHQ @base_ui Fine tuning colors and type by hand really shows in the result

@aaruHQ @base_ui Great stuff. Working on doing the same right now.