Design System Extractor

Why this skill

Brand decisions about fonts and colors usually live in someone's head, a PDF guide, or a live site, and they rarely make it into a form that an AI agent can apply when it builds UI. This skill reads the source you point it at, pulls out the typography and color tokens that define the brand, and writes them into a project-local design-system skill that other skills then read automatically. Every value is checked with you before anything is written, so the output reflects the real brand rather than a guess.

What it does

The skill works from one of three sources, and you choose which:

• A website URL, where it crawls the page to read fonts and colors from the stylesheets and key elements.
• A PDF or file path, such as a brand guide, where it reads color swatches, font callouts, and design specifications.
• A guided interview, where it asks you the key questions directly and builds the system from your answers.

From any of these, it extracts six semantic color roles (background, foreground text, muted backgrounds, muted text, primary, and secondary), two font roles (heading and body), and a small set of design principles such as corner style, spacing density, shadow usage, and dark-mode support. Each value carries a confidence level, and anything it cannot confirm is shown to you for correction rather than written blind.

Once you confirm the tokens, the skill writes two files into your current project, not the source repository:

• design-system/SKILL.md, the reusable skill that holds the confirmed typography, colors, and design principles.
• design-system/references/setup.md, a setup reference tailored to your stack, covering Tailwind CSS, plain CSS, or shadcn/ui.

Both files land in the project's local skills directory, so any skill that looks for a project-local design-system skill picks them up.

How to use it

Call /act-design-system-extractor with the source as an argument: a URL, a path to a PDF or markdown file, or --manual for the guided interview. If you call it without an argument, it asks where to pull the design system from and waits for your choice.

After extraction it shows you a compact summary of the tokens it found, marks anything low-confidence or missing as unconfirmed, and asks two quick questions about your CSS framework and component library. Nothing is written until you confirm or correct the summary. When it finishes, it reports the two files it wrote and points you to the next step.

The output feeds directly into other skills. If you run the website builder, /act-website-generate reads the generated design-system skill on its own, so the brand tokens flow into the pages it produces. You can also edit the generated design-system/SKILL.md directly to refine anything later. The skill does not apply the design system to existing files unless you ask it to.