DS Loop
Foundations
Editable color, spacing, and type decisions connected to the components that use them.
For fast-building teams with growing codebases
Your design-system team,
in one install.
Build and maintain an LLM-ready design system with your coding agent. DS Loop investigates, proposes a plan, and guides approved changes to shared components, usage examples, and project decisions.
npx ds-loop@0.4.0A design-system change your team can maintain
01 / INVESTIGATE
Find the theme mismatch.FindingAction uses a literal
Sourcebefore.css:7
Your agent reads your code, tokens, components, and docs first. Every finding points to its source.
The work of a design-system team.
What an experienced design-system team or agency would do, packaged as one kit your coding agent runs.
Decisions, examples, and checks stay with your code, ready for the next change.
The problem
Every new screen adds another set of decisions.
Your app has a shared input, but the billing form builds its own. The settings screen hardcodes a color that already has a token. As people and agents ship changes, the code drifts from the system you agreed on.
An agent can repeat the same mistake when it cannot find your library. DS Loop helps it find the right component, use a checked example, and save the decision for the next change.
Billing.tsx · another local button
<button className="billing-action">Pay</button>Illustrative UI and code.
Whatever shape your system is in
You don’t have to diagnose it yourself. DS Loop works out where you are and recommends a route.
No design system yet
“Our screens need a shared foundation.”
It sets up tokens and shared components in the screens you choose, with examples your team can follow.Components exist, screens skip them
“We have components. Our screens bypass them.”
It measures who uses what and connects the screens that bypass your library.Help agents use your existing system
“Our agent keeps rebuilding components we already have.”
Make real components, APIs, and decisions easy to find. Check the setup with a fresh agent completing a real task.We already have a design-system team
“We know what to do. We need hands.”
Your agent takes on migrations, documentation, and maintenance using your team’s existing conventions.Under the hood
Your agent edits. The engine checks. Your team decides.
Local checks provide evidence from your code. Your coding agent investigates it, proposes a plan, and carries out the work you approve. Updated checks and project notes feed the next round.
Your agent runs the checks. Hooks and CI need setup.
A report your team
can act on.
Findings with sources and an ordered plan. Each step says what it changes and how you’ll know it worked. This example follows a theme fix from the findings through implementation, browser checks, and handoff notes.
Read the example reportThis example includes the fix, browser checks, and handoff notes.
Keep what your agent builds.
Your system lives in your project: editable foundations, shared components, working examples, and recorded decisions. People and coding agents can use that context to maintain it and build what comes next.
Components and patterns
Shared buttons, inputs, and tables used in your product.
Intentional exceptions
Keep differences your product needs. Write down where they apply and why.
Usage and maintenance guide
Correct import paths, supported props, working examples, and decisions your agent can find. Keep the guidance with the code and explain how to update it.
Use the same foundations across your screens.
Shared inputs, actions, and layout patterns give the next screen code to reuse.
Start with a report and a plan.
Open source · Checks run locally
Node 22.6 or later · Alpha · review changes before shipping
Install
Run
npx ds-loop@0.4.0and connect the skill to your agent.Start
Type
/ds-loop:start. It reads your project and writes the report.Choose
“Want me to ask a few questions, or go ahead on what I found?” Your agent changes the shared system after you approve the plan.
Before you install
What makes the design system LLM-ready?
Can a fresh agent find the right component, use its actual API, and check the result without you supplying every detail? DS Loop helps you connect the components, examples, and project decisions it needs, then try a representative task. That task shows what works and what still needs attention.
Why use it if my agent already has DESIGN.md?
Keep your DESIGN.md. DS Loop helps your agent turn that guidance into shared components, checked changes, and updated documentation.
Do we need a design system already?
No. Your agent can help you start one. If you already use a component library, it should look at what you have before suggesting a replacement.
What does it check, and what doesn’t it?
The engine reads CSS custom properties and selected rule properties, Tailwind values in JavaScript and TypeScript strings, DTCG and Style Dictionary token JSON, and SCSS/Sass. It doesn’t review layouts, interactions, accessibility, or design quality. Read the exact coverage.
Does it run in the background?
Checks can run after edits through an optional hook, and in CI. Neither blocks or fixes on its own. Rerun checks after changes and compare with saved results.
Does it replace shadcn/ui or require Storybook?
You can keep shadcn/ui or another suitable library. Storybook is optional; component examples and a usage guide may be enough to start.
What does it cost, and where does our code go?
The package and skill are open source under MIT. The engine runs locally without model calls, API keys, or network access. Your coding agent’s costs and data handling depend on its provider and your settings.