Extract design tokens from rendered webpages and local HTML files.
npx skills add https://github.com/I2olanD/ai.to.prototype --skill extract-tokens-i2oland
Please help me install this Agent Skill. Skill: extract-tokens Source: https://github.com/I2olanD/ai.to.prototype/tree/main/plugin/skills/extract-tokens Command: npx skills add https://github.com/I2olanD/ai.to.prototype --skill extract-tokens-i2oland
It removes the manual effort of inspecting a website or HTML file and translating its visual system into reusable design tokens for implementation or review.
Ask the skill to extract tokens from a URL or local HTML file and save the results to your chosen output path.
High-intent search queries and answers about installing and using this skill.
To extract design tokens from a webpage, provide the skill with a URL or local HTML file. It uses headless Chromium rendering to capture colors, typography, spacing, radius, shadows, z-index, and motion values into a structured output.
W3C DTCG JSON is a standardized structured output format for design tokens. This skill exports extracted visual values like colors and typography into W3C DTCG JSON, ensuring consistent visual foundations for design audits and UI prototyping workflows.
Yes, you can convert extracted CSS variables into multiple output formats. The skill exports captured design tokens as W3C DTCG JSON, CSS variables, JavaScript, or Markdown to support different handoff and integration needs.
To audit an existing design system from a reference site, the skill analyzes rendered content and detects visual themes. It extracts foundational design tokens with configurable confidence filtering to establish a reliable baseline for review.
Yes, token extraction requires headless Chromium rendering. The skill relies on Chromium to accurately render local HTML files and live webpages, detecting themes and capturing true visual values before outputting structured tokens.
When extracting visual foundations from local HTML files, the process relies on headless Chromium rendering to capture accurate styles. Complex dynamic content or external assets may impact theme detection and the confidence filtering of extracted tokens.
pragyaP17Scrape webpage content, extract metadata, download images, and prepare for AEM Edge Delivery Services import.
NITISH-gitbitValidate and export Google DESIGN.md files to Tailwind CSS or W3C DTCG JSON.
Monjyu1101Validate DESIGN.md token specs and export to Tailwind or W3C DTCG JSON.
InverterNetworkAuthor, validate and export DESIGN.md tokens to Tailwind CSS and W3C DTCG formats.
