UI Guideline Update #11: Component Spec Packs are here
We turned 5 years of design system research into AI-ready spec packs.
Hi, friend 👋
It’s been a while. I’m going to be honest with you — the last few months I’ve been asking myself a hard question: is UI Guideline still worth it?
Five years of research. 20 design systems analyzed. 39 components documented. Thousands of hours. And yet, I’ve never cracked the sustainability part. The site gets ~30K visits a month, people find it useful, but “useful” doesn’t keep a project alive.
So here’s the deal: this is one of our last experiments. If it works, UI Guideline keeps going and gets even better. If it doesn’t — well, at least we tried everything before letting it rest in peace. 🫡
Why now?
Here’s what I keep seeing in 2026: AI tools are everywhere. Cursor, Copilot, v0, Claude Code. Everyone’s generating UI components in seconds. And most of it is slop. Generic, inconsistent, doesn’t follow any real standard.
Why? Because AI is only as good as the context you give it. And most people give it zero context. They just say “make me a date picker” and hope for the best.
That’s exactly where UI Guideline comes in. We’ve spent 5 years manually researching what the best design systems actually do — naming, props, anatomy, accessibility, keyboard interactions. That’s the context AI is missing.
So we packaged it.
Introducing: Component Spec Packs
A Spec Pack is everything you need to define, build, and validate a UI component — backed by real data from 20 design systems, curated through years of experience and a lot of trial and error.
Each pack includes 4 files:
📄 PDF — The spec your team actually reads. Your designer needs to build a Date Picker in Figma? The PDF has a step-by-step build checklist based on what 16 design systems actually ship. Your dev asks “should this Modal close on Escape?” — the answer is in the keyboard interactions section, with adoption rates across 20 systems. It’s the single document you share in a Slack thread that ends the “how should we build this?” debate.
📝 Markdown — This is the one that changes everything. Paste it into Claude, Cursor, or Copilot before generating a component, and the AI stops guessing. Instead of a generic Button with random props, you get one with the exact props that 19 out of 20 design systems agree on. Real example: without context, AI gives you type=”primary”. With the spec, it knows that variant is the standard name used by 85% of systems. Multiply that across every prop of every component.
📋 YAML — Structured data you can plug into your workflow. Feed it to your design system documentation tooling, use it to auto-generate prop tables, or validate your existing components against the industry standard. If you have custom scripts or linters, this is your input file. Pro tip: Use it with the markdown above to give more context to the LLMs.
🔧 JSON — The raw, machine-readable spec with all data embedded. Build dashboards, run comparisons against your own component library, or feed it to an LLM with structured output. Same data as the other files, optimized for code.
Pricing tiers
We wanted to make this accessible, so here’s what we came up with:
Single Spec Pack
One component, fully specified. Perfect if you’re working on a specific component right now and need the data.
Full Library
Every spec pack in one purchase. If you’re building a design system from scratch or auditing an existing one, this gives you the complete reference — 38 components, fully specified, ready to use across your team.
Library + Quarterly Updates
Everything in the Full Library, plus 12 months of updates delivered to your inbox every quarter. Here’s what that means in practice:
- Every quarter you receive new component spec packs as we add them to the library.
- Existing specs get revised and updated when major design systems (Material, Spectrum, Polaris, etc.) release new versions — adoption rates shift, new props emerge, best practices change.
- You don’t have to re-purchase or check back — it just lands in your inbox, ready to use.
If you’re leading a design system that’s actively evolving, this is the tier that keeps your specs from going stale. The Full Library is a snapshot; this is a living reference.
Design System Audit
This is for teams who want a professional diagnostic of their component library. Here’s exactly what you get:
- 🎯 Slop Score™ — A 0-to-100 quality rating that tells you where your library stands against the industry. We score naming alignment, prop completeness, internal consistency, and variant coverage.
- 🏷️ Naming Alignment Report — A component-by-component comparison of your names vs. what 20 systems use. You’ll know exactly which names to keep and which ones are confusing your team.
- 🔍 Gap Analysis — Which components are you missing? We rank them by how commonly they appear across 20 systems, so you know what to build next.
- 🔄 Consistency Review — Duplicated patterns, inconsistent prop names across components, redundant variants — we flag everything.
- 📋 3-Phase Fix-it Plan — Not just “here’s what’s wrong” but a prioritized roadmap: what to fix now, what to fix next quarter, and what can wait.
- 🎥 20-minute personalized video walkthrough — We record a Loom walking through your results, explaining every finding and recommendation.
- 📦 All Component Spec Packs included — Full library access, so you have the reference data to implement every recommendation.
- 🔄 12 months of quarterly updates — Same as the Library + Quarterly Updates tier.
No calls. No meetings. You send us your component list in a simple format, and within 7 business days you get the full report. It’s the kind of audit that would take your team weeks to do internally — distilled into an actionable deliverable.
A honest request
I’ll be real: We need your feedback. Without it, it’s nearly impossible to know if UI Guideline solves a real problem or if it’s just another guide on the internet.
- Did you ever use UI Guideline to make a decision about a component?
- Would these spec packs actually save you time?
- Is there a component you wish we had that we don’t?
- Is the pricing fair?
Hit reply and tell me what you think. Even a one-liner helps. Or reach me directly at serudda.oficial@gmail.com — I read and reply to every single message. Your feedback will genuinely shape what happens next with this project.
What’s next
If this experiment works, we have big plans: a Slop Score™ tool to rate your component library’s quality (for free), an MCP server, and a Figma plugin. But first — we need to know this is worth building.
Thanks for being here, for real. Some of you have been following UI Guideline since the very beginning, and that means more than you know. 🫰
Let’s see where this goes.
— Serudda
P.S. If you know someone building a design system right now, forward this email. It might save them weeks of research.