Design Systems: Beyond Documentation

We’ve been exploring how AI is changing interface patterns and how design systems can work through MCP to generate components directly in code. And one thing is becoming very obvious. If you want a design system that can generate real, production-ready components, this is no longer just a Figma task. You need to understand: • how tokens map to actual component libraries • how props and states are structured • where architectural constraints live • what AI tends to hallucinate • what is technically valid vs. just “looks right” Even at the design system level, we’re already seeing that designers need technical literacy. Not to become engineers. But to design systems that can safely connect to code. The next logical step isn’t just generating components. It’s designers being able to generate meaningful PRs. And that only works if you understand the system you’re designing for. This is why the conversation in the article resonates. https://lnkd.in/ds4QvFkY

Recently found a great tool for all vibe coding/designing folks You can't ask AI for "better vertical rhythm" if you've never used those words. The default frontend-design skill in tools like Cursor or Claude Code does fine when you're starting from zero. But the moment you have context - a design system, existing patterns, a specific vibe - it falls short. impeccable.style by Paul Bakaus fills that gap. 17 design commands (/polish, /audit, /distill, /bolder) that speak designer language on your behalf. If your AI-generated UI keeps looking like AI-generated UI - give it a look. https://impeccable.style/

You can try the live application here: https://lnkd.in/gFuMKAi9 I just deployed my own custom-trained AI model to the internet. No external APIs. No hosted LLM services. Just a model I Instruction fine-tuned GPT-2 model and deployed myself, now running live on Hugging Face Spaces. Introducing SkillsGPT — an AI assistant trained specifically to understand UI design aesthetics and generate complex CSS implementations. The backstory: Recently I was exploring the concept of AI “skills” used in agentic development workflows. Platforms like Vercel provide skill libraries where agents can dynamically download capabilities (for example through npx commands) and execute them inside environments like Cursor, VS Code, or other agent frameworks. While experimenting with this approach, I noticed a friction point: every workflow required repeatedly downloading and invoking individual skills during execution. That led me to a different idea. Instead of dynamically loading frontend skills at runtime, what if those skills were directly encoded inside the model itself? So I built SkillsGPT, a specialized language model trained only on frontend design and CSS implementation tasks. The goal was to create a model whose weights already understand common UI aesthetics, styling patterns, and design principles. Model: Architecture: GPT-2 Size: 124M parameters Training: Instruction fine-tuning Objective: Causal language modeling specialized for frontend design and styling Dataset: I curated a custom dataset focused entirely on UI design and CSS development. • Format: JSONL instruction–output pairs • Size: 313 curated examples • Focus: Mapping design intent → precise CSS implementation Examples include prompts like: “Create a luxury glassmorphism card UI” “Design a brutalist developer dashboard aesthetic” “Implement a retro-futuristic terminal interface” The model learns to translate vague design ideas into structured CSS and frontend patterns. Tech Stack: Backend: FastAPI serving the model using PyTorch and Hugging Face Transformers Frontend: Vanilla HTML, CSS, and JavaScript with a custom glassmorphism chat interface and typewriter effects Optimization: Generation parameters tuned for responsive CPU inference Deployment: The entire application is containerized with Docker and deployed on Hugging Face Spaces running on a CPU instance. Building the model is only part of the challenge. Turning it into a usable product with a clean interface and accessible deployment is equally important.

My top 5 takeaways from Tom (CEO of Pencil) on how AI agents will change design: 1. Making the AI agents appear more human made all the difference Technically, swarm mode is just agents writing to a JSON file. But showing cursors move on screen made all the difference in helping Pencil reach 100K users 2 weeks after launch. 2. Agents and humans should be able to edit a design together Unlike vibe coding tools where you have to wait for AI, Pencil’s canvas lets you jump in and make changes mid-generation, which is a huge differentiator for me. 3. Make everything agent-readable by default The design canvas is powered by a simple JSON .pen file that any agent can edit. Tom built Pencil to be “agentic from the ground up” so .pen designs live in git just like your code. 4. Design is just code and vice versa You can add Pencil to Cursor, Claude Code, or Codex to edit a canvas inside your IDE/coding tool. This makes it easy for you to convert your designs to code without switching tools. 5. Delight and craft still matter very much Tom originally built visual agent cursors and names to help him find and fix bugs, but the experience was so delightful that it became the product's main differentiator. 📌 Watch now: https://lnkd.in/gVTWdHWd

Most of the AI + design systems conversation is still focused on read access: tokens, specs, snippets, component metadata. That’s useful. It’s also not enough. I wrote this piece to make the next layer more concrete: a design system as a semantic registry, validation surface, and governed execution layer for agents and teams.

Every documentation team eventually faces the same task: renaming things. A product name changes. A feature is repositioned. Two concepts start colliding in the same ecosystem. So the docs get updated. Pages are rewritten, references are changed, navigation is adjusted, sometimes URLs too, and the old terminology slowly disappears from the documentation corpus. Technical writers are used to this. (We may not love it, but it’s part of the job 🫣.) Until recently, the goal of these renames was mostly about human clarity. If a term confused users, you changed it. If two concepts sounded too similar, you separated them. But I’ve been wondering how this practice changes as documentation starts becoming part of AI-driven developer experiences. AI assistants increasingly learn about products by reading the same documentation that humans do. The documentation corpus effectively becomes part of the product’s knowledge base. And AI systems tend to reason about concepts through semantic proximity. So a rename that solves a human UX problem may not fully resolve the underlying conceptual relationship between those terms. To a human reader, the distinction might be obvious. To an AI system interpreting the documentation corpus, the concepts might still appear closely related. This raises the following question: When documentation becomes part of the knowledge source for AI assistants, are we just renaming things for humans? Or, are we also redefining the conceptual structure that machines use to understand the product? In other words, documentation may be evolving into something slightly different. Not just the place where users learn how a product works. But the place where the meaning structure of the product is defined for both humans and machines. And if that’s true, then decisions about terminology, concept boundaries, and feature descriptions may start carrying a different kind of weight. The rename is no longer just a documentation task. It’s a conceptual design decision — one that shapes how both humans and machines understand what the product is and how its parts relate to each other. Documentation teams may need to start thinking less like editors and more like ontologists.

My last post talked about Generative UI that builds from your design system. This is the first in a series going deeper on what that actually unlocks. Let's start with the most fundamental shift: Navigation to Intent. You will never anticipate every question a user might ask. When someone asks something you didn't anticipate, they get nothing. Or they get a generic search results page that makes them do the work themselves. Even when the answer does exist somewhere in your database, the user still has to find it. Nobody wants to learn your information architecture. They want to describe what they’re looking for and have it appear. Generative UI, aided by semantic search, flips this entirely. You build a vocabulary of components once and the AI composes those components into an answer at runtime — on the spot. You're not building answers. You're building the language for answers. And a language can express things its creators never specifically intended. Think about what this means in practice. A customer asks your support tool a question that spans three different data domains. Today, that's probably three different screens that nobody thought to connect. With Generative UI, the system pulls the data, contextualizes it, and presents it. You didn't build that view. You didn't anticipate that question. But you built the pieces, and the AI knew how to put them together. Not a better interface. An invisible one. More on what this means for your data model next time.

I’ve been vibe coding at a rapid pace lately, and one thing is obvious—many “self-built” projects today are heavily AI-assisted. That’s not the problem. The problem is when people don’t understand what they’ve built. Here’s what you should actually do if you’re using AI: • Don’t blindly copy. Always review and modify AI-generated code. If you can’t explain it, you don’t own it. • Frontend ≠ Design AI can generate UI fast, but design sense is still human. Fix the fonts, color palette, spacing, and hierarchy. Make it intentional, not generic. • Break the codebase Most AI projects dump everything into 7–8 messy files. Refactor it: – Split into components – Separate pages – Modularize functions – Isolate features Clean code = real skill. • Reverse engineer everything Treat AI output like a case study. Ask: – Why this structure? – Why this logic? – What can be optimized? If you’re not decoding, you’re just copy-pasting. • Add your own layer Anyone can generate a project. Very few can improve it. Add features, optimize performance, improve UX. At the end of the day: AI is your companion. You are the director. Don’t just serve the dish—know every ingredient in it.

𝗧𝗵𝗲 𝗠𝗶𝘀𝘀𝗶𝗻𝗴 𝗧𝗼𝗼𝗹 𝗜𝗻 𝗠𝘆 𝗔𝗼𝗱𝗶𝗻𝗴 𝗦𝘁𝗮𝗰𝗸 I use AI for frontend work. It helps me with design and UI ideas. I can get screens built fast. But I had a problem. The UI would look done, but the actual product would be broken. I saw this when building an application form. Some fields did not work. There was no big error, but the AI had not tested the flow. You can write code that looks correct, but it may not work. I used to check the code manually. A survey found that 84% of developers use AI tools, but more distrust the output than trust it. I found a solution: Playwright. I write tests for critical flows, like: - create a job with custom fields - apply to the job - check the application in the dashboard This helps me be more confident when I make changes. I write the test once, and it keeps protecting the product on every commit. Playwright works well in CI workflows. I run it in GitHub Actions on every pull request. Now AI helps me move fast, but Playwright tells me if the feature works. You can write Playwright tests in VS Code. AI is also good at writing these tests. You can write most tests quickly. If there are errors, you can fix them. Source: https://lnkd.in/gajbradC

You asked for a tap. It quoted you the plumbing. That's the first thing I learned about coding with AI. Ask it to build a simple feature and it comes back with an abstraction layer, a plugin architecture, a design system. Elegant. Generalized. Ready to scale to a thousand use cases you don't have yet. It's like calling a plumber about a dripping tap and getting a full re-pipe quote. Technically impressive. Completely premature. I call this Anti-Framework Fever. And it's not the AI's fault — generalization is what it's trained to do. But it maps perfectly onto the oldest mistake in building: laying utilities before you've drawn the floor plan. Speccing the drainage before you know where the bathrooms go. So I have a rule now. The Rule of Three. No abstractions until I have three concrete, similar examples working. Three. Not one, not a feeling that we'll probably need it later. By the time you have three working examples, you actually know what shape the abstraction should take. Before that, you're just speccing the manifold for one tap. The uncomfortable truth is that framework fever feels like seniority. It feels like thinking ahead, like doing serious architectural work. But most of the time it's just the unglamorous first fix being avoided in favour of designing the boiler room. First fix before second fix. Always. I built this rule into a prompt I run at the start of every project. The AI's job, when it sees me reaching for the manifold before I've sorted the stopcock, is to say so. Strange thing — using an AI to protect you from what AI makes too easy. Next week: nobody pours a foundation that looks like the CGI.