Created
March 26, 2026 16:25
-
-
Save steven-pribilinskiy/21fd4673d9efef26a6ff601d3f443f6a to your computer and use it in GitHub Desktop.
Turning a Design System into a Claude Skill — Ryan Rumsey — Article Summary
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Turning a Design System into a Claude Skill — Summary</title> | |
| <style> | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| body{font-family:'Segoe UI',system-ui,sans-serif;background:#f5f5f5;color:#2c3e50;line-height:1.7;font-size:15px} | |
| .container{max-width:860px;margin:0 auto;padding:2rem 1.5rem} | |
| header{text-align:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid #8e44ad} | |
| h1{font-size:1.6rem;margin-bottom:.4rem;color:#8e44ad} | |
| .sub{color:#7f8c8d;font-size:.9rem;margin-top:.3rem} | |
| .sub a{color:#2980b9;text-decoration:none} | |
| .sub a:hover{text-decoration:underline} | |
| .tldr{background:#f0e6f6;border-left:4px solid #8e44ad;border-radius:0 8px 8px 0;padding:1rem 1.2rem;margin-bottom:1.5rem} | |
| .tldr h2{font-size:.95rem;color:#8e44ad;margin-bottom:.5rem} | |
| .tldr p{font-size:.9rem;margin:.3rem 0} | |
| .tldr ul{padding-left:1.2rem;font-size:.88rem;margin:.4rem 0} | |
| .tldr li{margin:.2rem 0} | |
| .links{background:#fff;border-radius:8px;padding:1rem 1.2rem;margin-bottom:1.5rem;box-shadow:0 1px 4px rgba(0,0,0,.08)} | |
| .links h2{font-size:.95rem;color:#8e44ad;margin-bottom:.5rem} | |
| .links ul{list-style:none;padding:0;font-size:.88rem} | |
| .links li{margin:.3rem 0} | |
| .links a{color:#2980b9;text-decoration:none} | |
| .links a:hover{text-decoration:underline} | |
| .toc{background:#fff;border-radius:8px;padding:1rem 1.2rem;margin-bottom:1.5rem;box-shadow:0 1px 4px rgba(0,0,0,.08)} | |
| .toc h2{font-size:.95rem;color:#8e44ad;margin-bottom:.5rem} | |
| .toc ol{padding-left:1.3rem;font-size:.88rem} | |
| .toc li{margin:.2rem 0} | |
| .toc a{color:#2980b9;text-decoration:none} | |
| .section{background:#fff;border-radius:8px;padding:1.5rem;margin-bottom:1rem;box-shadow:0 1px 4px rgba(0,0,0,.08)} | |
| .section h3{color:#8e44ad;font-size:1.1rem;margin-bottom:.8rem} | |
| .section p{margin:.6rem 0;font-size:.93rem;text-align:justify} | |
| footer{text-align:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e0e0e0;color:#7f8c8d;font-size:.78rem} | |
| footer a{color:#2980b9;text-decoration:none} | |
| @media(max-width:600px){.container{padding:1rem}h1{font-size:1.2rem}.section{padding:1rem}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Turning a Design System into a Claude Skill</h1> | |
| <p class="sub">Ryan Rumsey — <a href="https://www.youtube.com/watch?v=rE_H4-AybMc" target="_blank">Watch on YouTube</a></p> | |
| <p class="sub">Article summary • 19 min video</p> | |
| </header> | |
| <div class="tldr"> | |
| <h2>TL;DR</h2> | |
| <p>Ryan Rumsey demonstrates how to convert an existing design system (a SAS-based UI framework + Microsoft Fluent design principles) into a Claude Skill made of markdown files, then use it to consistently vibe code both HTML prototypes and matching Figma designs from the same source of truth.</p> | |
| <ul> | |
| <li>A design system is more than a UI framework — it includes principles, governance, and usage guidance (when to use what)</li> | |
| <li>Claude Skills (markdown files) are better suited for design system governance than MCPs for day-to-day use</li> | |
| <li>A shared JSON output feeds both a Figma plugin and HTML rendering, ensuring pixel-consistent results</li> | |
| <li>Live demo: built a Slack-like internal comms app that rendered identically in both Figma (1440/768/375px) and responsive HTML</li> | |
| <li>Recommended workflow: extract production code → convert to markdown → use as Claude Skill for both Figma and vibe coding</li> | |
| </ul> | |
| </div> | |
| <div class="links"> | |
| <h2>Links</h2> | |
| <ul> | |
| <li><a href="https://www.youtube.com/watch?v=rE_H4-AybMc" target="_blank">Original video — YouTube</a></li> | |
| <li><a href="https://learn.microsoft.com/en-us/fluent-ui/web-components/" target="_blank">Microsoft Fluent Design System</a></li> | |
| <li><a href="https://docs.anthropic.com/en/docs/build-with-claude/projects" target="_blank">Claude Skills documentation</a></li> | |
| <li><a href="https://www.figma.com/" target="_blank">Figma</a></li> | |
| </ul> | |
| </div> | |
| <nav class="toc"> | |
| <h2>Contents</h2> | |
| <ol><li><a href="#s-0">A Designer-Developer Returns to Building</a></li> | |
| <li><a href="#s-1">The Difference Between a UI Framework and a Design System</a></li> | |
| <li><a href="#s-2">Building the Claude Skill from Sass and Fluent Principles</a></li> | |
| <li><a href="#s-3">The Hypothesis: Consistent Output Without Hallucination</a></li> | |
| <li><a href="#s-4">Live Demo: An Internal Communications App</a></li> | |
| <li><a href="#s-5">Matching HTML Output and Responsive Behavior</a></li> | |
| <li><a href="#s-6">A Practical Path Forward for Design Systems and AI</a></li></ol> | |
| </nav> | |
| <div class="section" id="s-0"> | |
| <h3>A Designer-Developer Returns to Building</h3> | |
| <p>Ryan Rumsey opens by acknowledging that this video marks a departure from his usual territory. Over the past seven or eight years, he has focused on business strategy, communications, and leading teams. But before all of that, he was a working designer and developer who could code. A question kept surfacing in his feeds, posed repeatedly by a colleague named Hang: Is there evidence of teams taking an existing design system and transforming it into something that enables consistent vibe coding? In other words, how do you take what already exists and make it AI-ready? When Hang raised the question again three weeks prior, Rumsey decided to roll up his sleeves and find out for himself.</p> | |
| </div> | |
| <div class="section" id="s-1"> | |
| <h3>The Difference Between a UI Framework and a Design System</h3> | |
| <p>Before diving into the experiment, Rumsey draws an important distinction. Much of the conversation around design systems, he argues, is actually about UI frameworks, not true design systems. He pulls up an existing UI framework his team built eleven years ago, entirely in Sass, based on Gina Bolton's token work. A UI framework defines the structure of a box or a base element and specifies how it should appear at different sizes. A design system goes further. It includes principles, governing standards around motion, and guidance on when to use one component over another. When should you reach for a button versus a radio input? When using a button, which type of button fits the context? That layer of guidance, the when and why rather than just the what, has always been the hardest part of design systems to get adopted. Rumsey believes this is precisely where AI can help.</p> | |
| </div> | |
| <div class="section" id="s-2"> | |
| <h3>Building the Claude Skill from Sass and Fluent Principles</h3> | |
| <p>Rumsey's approach centers on Claude Skills, which he sees as a more practical tool for day-to-day design-system usage than MCP servers alone. MCPs are valuable for digging into data and surfacing the source of truth, but design systems are tools of scale, and most of the time people are not creating or updating the system itself. They are leveraging what already exists. Design systems should not be changing every day, so the governance layer lends itself well to a static, well-structured set of instructions.</p> | |
| <p>He took the Sass-based UI framework he already had and combined it with principles and color guidance from Microsoft's Fluent design system. Working with Claude, he fed in the existing codebase and asked it to review and understand the system, then began converting it into a Claude Skill composed primarily of markdown files. The process took a couple of hours. The result was a skill containing tokens, governance rules, and component definitions. There are files describing how an app shell should work, how empty states should behave, what to consider when choosing colors, and what each component, such as alerts, looks like. What was previously defined in Sass is now expressed in markdown that an AI model can follow as governance and instruction.</p> | |
| </div> | |
| <div class="section" id="s-3"> | |
| <h3>The Hypothesis: Consistent Output Without Hallucination</h3> | |
| <p>Rumsey's hypothesis is straightforward. Companies want people to use AI. They still want designers and others to experiment and test in new ways. But the industry is struggling to reach a place where models do not hallucinate, do not invent things, and do not produce output that is difficult to bring to production. Rumsey believes there is a path to vibe coding that still allows people to work in Figma on whatever canvas they prefer, while the model faithfully follows the design system instead of deviating from it. His approach is a large, extended Claude Skill that functions as a routing system: a set of directions defining the blueprints that tells the model when to go where and what rules to apply.</p> | |
| <p>The first test was simple. Could he vibe-code the same documentation site that the original UI framework defined, but this time driven entirely by the Claude Skill? The answer was yes. He acknowledges the UI framework itself is not the most elegant, but Claude was able to render and adhere to the same output. He then pushed further by prototyping a Figma plugin. Rather than building a full API-connected pipeline, he had Claude generate a JSON file that both Figma could read and that Claude itself could use to produce a matching HTML version. The JSON acts as a shared source of truth between the two outputs.</p> | |
| </div> | |
| <div class="section" id="s-4"> | |
| <h3>Live Demo: An Internal Communications App</h3> | |
| <p>To demonstrate the workflow in real time, Rumsey opens Claude in co-work mode and prompts it to build an internal communications application. He describes an app that internal teams would use to discuss projects, share files, organize channels both public and private, maintain an activity feed, and allow people to RSVP to internal events or knowledge discussions. Because the project folder has been connected and contains the Claude Skill, the model should follow the design-system rules when generating output.</p> | |
| <p>Claude begins by asking a few clarifying questions: What should the default view be? What kind of company is this for? How prominent should the events section be? Rumsey answers that the default view should be the activity feed, the company is a software startup, and events should have a dedicated section. Behind the scenes, Claude is working through the skill's markdown files, reading the design-system governance, the HTML rendering rules, and the JSON specification for Figma output.</p> | |
| <p>Rumsey then walks through his prototype Figma plugin. Rather than pulling from a live API, the plugin reads the JSON markup that Claude generated, which serves as the source of truth for both the Figma rendering and the HTML build. He pastes the JSON into Figma, and the plugin renders the design across three breakpoints: 1440 pixels, 768 pixels, and 375 pixels. The result resembles a Slack-like interface with an activity feed and a sidebar showing events. He concedes it looks rough, but that is because the underlying UI component library is intentionally basic. The important thing is that it followed the rules.</p> | |
| </div> | |
| <div class="section" id="s-5"> | |
| <h3>Matching HTML Output and Responsive Behavior</h3> | |
| <p>While Figma renders the design, Claude finishes producing the HTML version. When Rumsey opens it, the result matches the Figma output: the same layout, the same structure, the same component choices. Not every interactive state, such as hover effects, is fully implemented, and Rumsey attributes that to those states not yet being defined in the design-system markdown. But the HTML is responsive. It breaks down across screen sizes in the same way the Figma version does, confirming that both outputs are drawing from the same governing rules.</p> | |
| </div> | |
| <div class="section" id="s-6"> | |
| <h3>A Practical Path Forward for Design Systems and AI</h3> | |
| <p>Rumsey closes by outlining the broader workflow he envisions. The source of truth is what is currently in production. You use a model to examine the existing stack and determine the UI framework as it stands today. You then work with the model to convert that framework into a format and structure that AI models understand well, in this case markdown files organized as a Claude Skill. Once you have that markup layer, it is easily readable by both humans and models, and changes to the design system become changes to those files.</p> | |
| <p>From there, someone working in Figma can pull components that are defined and rendered by the skill. They can do all the Figma work they want with those resources available directly in the file. And when they or anyone else on the team is vibe coding, the same reference governs the output. The design system, expressed as a Claude Skill, becomes the single thread connecting design tools, prototyping, and code generation. Rumsey admits he may not be the domain expert, but he has not seen this particular approach discussed elsewhere, and he invites others to weigh in.</p> | |
| </div> | |
| <footer> | |
| <p>AI-generated summary — not an official transcript</p> | |
| <p><a href="https://www.youtube.com/watch?v=rE_H4-AybMc" target="_blank">Watch the original video</a></p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment