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

Vue - SFC + Nuxt

// main.js / nuxt.config
import './my-design-system/dist/my-design-system.min.css';

// MyButton.vue
<template>
  <button :class="['my-btn', variant==='outline' && 'my-btn--outline']">
    <slot />
  </button>
</template>

Same BEM, same tokens. data-theme="dark" on <html> flips to dark. ani.js optional (modal/drawer). See Components.

Nuxt: put CSS in css: ['~/my-design-system/dist/my-design-system.min.css'].

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.