AniStyl
DemoExamplesDocsPricingAccountCreate yours
DocumentationAniStyl Docs
Getting Started
Overview
Frameworks
HTML React Next.js Vue Other
Workflow
Import from URL Import from Figma Customize Download Regenerate
Developer
Tokens Components SCSS CSS Layout & grid Utilities Fonts Dark mode CLI Agent Skill
Support
Licence & support
Open builderFree · live preview · no account

Import from URL

Paste any public URL in the builder - we fetch the page + stylesheets and extract tokens deterministically (no hallucinated hexes).

  • Free: palette + fonts preview instantly (radius/shadows/breakpoints stripped at generation).
  • Pro: keeps radius, shadows, breakpoints, container width where detectable + 9-section design.md.

Where values aren’t detectable (media queries, hidden radii), defaults are kept. Everything stays editable after import - Customize next.

Tips

  • Use a page that actually renders your brand (homepage or marketing page).
  • If your site is behind auth, use Figma import instead.

Next: Customize → Download

AniStyl

Generate a design system that is actually yours. MIT licensed output - we could disappear tomorrow and your code keeps working.

ProductThe builderExamplesDocsComponentsPricingQuestions
Supportsupport@anistyl.comYour account & buildsDonate - keep it running
LegalTerms of ServicePrivacy PolicyRefund Policy
This site runs on its own generated design system - fluid scales, an HSL colour map, one accent.