Designer https://xitter.cf/t.co/7DXje0Cojb | Building Capsule UI
🚀
Joined September 2009
- Tweets785
- Following163
- Followers68
- Likes154
Pinned Tweet
Taking on 2 founders this quarter, the kind who want a designer who can drive the work without hand-holding.
Healthcare, SaaS, EdTech, B2B tools. 0-to-1. Messy products that need rescuing.
Still don't get why so many design systems name colors/buttons "primary, secondary, tertiary"
Here's why I don't recommend it:
- It doesn't scale. what comes after tertiary? quaternary? Nobody's typing that.
- It's a ranking, not a meaning. "primary" tells you nothing about when to use it, just that it's "the important one". It doesn't say what the color actually is or why it exists.
- Teams could end up with two "primary" buttons on one screen because stakeholders said both matter.
- It breaks the second you theme, since you're managing rank instead of purpose.
My suggestion👇
Split it into two separate decisions:
1. Intent = brand (your primary color), neutral, destructive. that's it
2. Type = filled, outlined, or ghost
Now you're not stacking hierarchy on top of style. You combine intent + type and get exactly what you need, without inventing a new "tertiary" every time a designer wants one more button.
Little Claude habit:
Always expand the thinking output before reading the response.
Understanding WHY it makes certain decisions teaches you more than the answer itself.
Updates on journey building Capsule UI into code:
Dropped a full dashboard screen (Dittowords) on Claude as a test. It used the right semantic tokens throughout, no hardcoded hex, no invented values.
The first pass is tedious: getting the rules tight, wiring the token pipeline. But once it clicks, the logic of preparing a Figma kit for LLMs starts to feel surprisingly natural.
Deep in the rabbit hole trying to make Capsule UI AI-readable so an LLM can open the project and generate correct component code on the first try.
Finally found a clean way to keep tokens in sync: Tokens Studio > JSON > a Node script that converts to DTCG format (Style Dictionary v5). Change a color in Figma, push the JSON, run the script: primitives.css and semantic.css rebuild automatically.
Wild how building with Claude unlocked in me a whole new DS level.
xitter.cf/steipete/status/206369…
My feed has been completely drowned in 'agentic loops' content for days now. Let's take it easy for a minute. Is this just another hype train?
Let me just finish learning to prompt properly before I start designing loops that prompt my prompts that prompt my agents.
Capsule UI updated with semantic typography tokens.
Before: a type scale. A list of sizes.
Now: a two-layer system that knows what each size is for.
This prepares the ground for responsive type, multi-brand theming and should make the system (more) readable by AI tools.
Building more tools no one needs: Pixel icon creator
Runs in a single HTML file, with: true 1:1 canvas, SVG export, HIG-inspired guidelines and savable templates.
This is bugging me for a while. Found inside the web app of one of Romania's biggest banks.
Two toggles in a payment form. Both do nothing until you hit submit.
Toggles mean "on right now." If it waits for a save button, it's a checkbox.
Banks have huge budgets and still miss this. Wild.
Made this little tool (well, it was actually Claude) to quickly test typography.
Scrubby sliders for size, weight, line height and letter spacing, live preview, google fonts dropdown, copies the css when you're done.
UI exploration. Tiny app for stitching screens into reels.
Because Premiere is overkill for 25 seconds of footage.
