Quick start
• Pick a preset (e.g., Chrome, Car Paint, Glass) or adjust lights/roughness/IOR.
• Use the preview to fine-tune highlights and shadow falloff.
• Export as 1024–4096 px PNG.
• Optional: upload a backplate/environment to influence reflections.

Tips
• Keep the sphere centered; MatCaps assume a perfectly lit, front-facing normal.
• Save your settings as a preset before exporting multiple sizes.

Quick start
• Paste a tokens JSON URL or upload a .json file.
• Toggle dark/light preview as needed.
• Review color swatches, type scale, and sample controls for quick QA.

Tips
• Use flat or nested token structures—keys are auto-flattened (e.g., color.brand.500).
• Host tokens on the same domain to avoid CORS issues, or use a CORS-enabled endpoint.

Quick start
• Load A and B via URL or file upload (drag & drop supported).
• Click Diff to generate the comparison.
• Export results as JSON for reviews or change logs.

Tips
• Works best with consistent key structures across files.

Quick start
• Enter a public website URL (e.g. https://apple.com) and click Fetch & Analyze.
• The system scans the site for common design variables such as colors, fonts, spacing, and shadows.
• View the extracted design tokens visually and export them as JSON, CSS variables, or Figma-ready tokens.

Tips
• Works best with sites that use CSS variables or consistent style definitions.
• If a site blocks direct requests, open Advanced → Paste CSS and manually analyze its stylesheet.
• Use the CORS proxy toggle if analyzing sites that restrict cross-origin access.
• For quicker insights, test it on component-level URLs instead of full homepages.