AniStyl
ExamplesDocsAccountCreate 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

Frameworks - use AniStyl with your stack

Your ZIP is stack-agnostic: compiled CSS + BEM HTML. The wiring is one line - the rest is your framework conventions.

HTMLNo build step · <link> to dist/*.min.cssReact Vite / CRA · BEM classes, is-open, ani.js optionalNext.js App Router · import once in layout.tsx · SSR-safeVueSFC · Nuxt - same BEM, same CSSOtherSvelte, Astro, Hugo, static sites

React/Next.js are our strongest markets - see those guides first. Every system uses your prefix (my in examples), fluid clamp() scales, and data-theme="dark".

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.