Extract Design System From Existing Code
extract-design-systemReads design tokens from CSS the caller passes in and returns the semantic palette, radius, fonts and shadow scale, with a token sheet that converts every color to oklch(). It accepts hex, rgb, hsl, named and oklch colors across :root, .dark and @theme blocks. sources merges several inputs, including a sample of computed styles from a live page. The server cannot read files, so the caller passes the text.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| css | No | Full contents of the project's globals.css (or any CSS holding the design tokens / CSS custom properties). Optional when `sources` is given. | |
| name | No | Optional label for the extracted system, e.g. the app or repo name. | |
| sources | No | Any mix of brand sources, merged in order (later sources win). See the tool description for how to gather each kind. | |
| maxTokens | No | Maximum tokens to return. Truncates the token sheet to fit. |