Extract visual design tokens from source code into a structured DESIGN.md file.
npx skills add https://github.com/erclx/aitk --skill claude-design-extract
Please help me install this Agent Skill. Skill: claude-design-extract Source: https://github.com/erclx/aitk/tree/main/claude/skills/claude-design-extract Command: npx skills add https://github.com/erclx/aitk --skill claude-design-extract
This skill solves the problem of design drift and documentation debt by automatically generating a standardized DESIGN.md file from existing project prose, UI components, and configuration files.
Ask the assistant to extract the design system from the current project to bootstrap the documentation.
High-intent search queries and answers about installing and using this skill.
Generating a design system from existing CSS and UI components involves scanning project files like Tailwind configs and stylesheets to extract visual design tokens. This skill produces a structured DESIGN.md file that codifies existing visual patterns into a standardized format.
Design token documentation captures visual intent like colors and typography in a machine-readable format. Automatically generating a DESIGN.md file from project source code prevents design drift and reduces documentation debt by codifying existing visual patterns consistently.
Yes, extracting design tokens from source code requires installing both the aitk CLI and jq. These dependencies parse project signals and render the final HTML/CSS design preview for immediate verification of the extracted design system.
Yes, you can bootstrap documentation from Tailwind configs and project prose. The skill scans files like CLAUDE.md, CSS configurations, and UI components to identify visual intent and generates a standardized DESIGN.md file using a canonical seed template.
The best way to visualize extracted design tokens is by rendering an HTML/CSS preview. This skill integrates with the aitk CLI to render an immediate visual preview of the extracted design system, allowing you to verify the captured tokens directly.
Automated design system extraction from code relies on parsing existing files like stylesheets and UI components, so it cannot capture implicit design decisions not present in the source. It requires structured project files and the aitk CLI to parse signals and render previews.
lasswelltExtract design tokens, typography, and palettes from Vue/Nuxt projects into DESIGN.md.
erclxGenerate a structured DESIGN.md file with design tokens and previews.
AndrejKiriExtract design tokens and component definitions from visual audits or source repositories.
ekatasingh1107Extract brand visual systems into structured JSON style guides.
