Works with your existing React system
Fragments reads supported React components and declared token sources directly from your repository. Storybook is not required, and you can keep your existing library.
Turn your design system into a contract agents and CI can verify.
Fragments gives supported coding agents your approved components and tokens, while configured hooks and CI detect or block covered violations before merge.
Use with your favourite tools:Claude · Cursor · VS Code · Codex · Windsurf · OpenCode
Fragments helps configured AI workflows reuse the components and styles you already have.
A wall of 15 rendered interface primitives — buttons, fields, badges, toggles, tabs — in which four have drifted off the design contract: a raw hex background (FUI2005), a raw button element (FUI1001), an unknown badge variant (FUI6002), and off-scale padding (FUI2006). The Fragments check scans the wall, pins each finding to its component, and conform rewrites them one at a time — the counter ticks down to 15 components with zero drift, and the kit settles governed.
A new kind of design-system tool. Built to make canonical components and tokens the default path for people and agents shipping interface code.
Your rules become a contract
Pick your canonical components, token sources, and repository scope; Fragments compiles them into a governed policy that configured agents and CI can read.
One policy across configured gates
Use the same served rules and scan scope in supported agent hooks, configured CI, and connected GitHub repositories. Findings include a code and explanation; only proven-safe fixes are offered as deterministic rewrites.
Put agents under contract
Scaffold it in one command
npx @usefragments/cli initfragments.config.ts
const config = {
framework: 'react',
govern: {
presets: ['universal'],
canonicalSources: [
{
kind: 'npm',
specifier: '@your-org/ui', // your component library
},
],
},
};
export default config;One contract defines the components and tokens your configured agents, hooks, editor, and CI share.