anydesign

Pass the URL and the skill fetches the HTML first, extracts CSS custom properties from linked stylesheets as high-confidence tokens, and only uses Playwright screenshots when the HTML is empty (SPA without SSR). The output is a design.md plus a DTCG design-tokens.json.

Use element mode by asking to copy that specific element. The capture script's --selector flag screenshots just the element's bounding box and saves its outerHTML, then the skill produces an element.md with a rebuild prompt or a token-grounded image-generation prompt.

Yes, tokens are emitted in W3C DTCG format with $value and $type fields, which imports directly into Style Dictionary, Figma Variables, and Tokens Studio. The export script also generates a tailwind.config.ts and tokens.css from the same token file.

Yes, it uses the Figma MCP tools get_metadata, get_variable_defs, get_design_context, and get_screenshot in that order. Tokens defined as Figma Variables are extracted directly and marked high confidence rather than inferred from pixels.

Raw HTML fetches return empty bodies for SPAs without server-side rendering, and some sites block requests with Cloudflare or captchas. For SPAs, run capture_site.py with Playwright; for blocked sites, provide a manual screenshot instead since bypassing protections is not attempted.

Run verify_design.py with your design-tokens.json and the live URL. It fetches the site's current CSS custom properties and reports which declared tokens still match, which drifted, and which new values appeared.