Getting Started

AniStyl generates a bespoke SCSS design system from your brand - same engine, completely different output, not a reskin. Pick your stack below. Your class prefix is yours (examples use my - substitute your own).

Next.js App Router · import CSS once in layout.tsxReact Vite / CRA · one import in main.tsxHTMLNo build step · single <link>

How do I use AniStyl with my stack?

Choose your path - the ZIP is stack-agnostic, but the wiring differs:

  • Next.js - App Router, metadata.
  • React - Vite, TypeScript, and className usage.
  • HTML - plain CSS in 30 seconds.
  • Vue - SFC setup, Nuxt variant.
  • Other - Svelte, Astro, Hugo, static sites.

Workflow - from brand to code

  1. Import from URL - paste any public URL (palette + fonts free, full layout Pro where detectable, deterministic extraction).
  2. Import from Figma - link + token or plugin (no token); maps design language, not a pixel-copy, where detectable.
  3. Customize - colors, fonts, radius, feel - live preview (where values aren’t detectable, defaults kept).
  4. Download - ZIP is your bespoke SCSS system, MIT licensed.
  5. Regenerate - tweak free at your tier via anistyl.config.json.

Option A - plain CSS, no build step

<link rel="stylesheet" href="my-design-system/dist/my-design-system.min.css" />
<button class="my-btn">Hello</button>

The compiled CSS in dist/ is complete: tokens, base styles, your selected bespoke SCSS components and utilities. Size scales with what you pick (lean vs extended utilities). See CSS and HTML.

Option B - SCSS source (recommended for teams)

Recompile from source so you can change any token or component:

cd my-design-system
npm install     # sass + utopia-core-scss - the only build deps
npm run build:css  # recompiles dist/*.css
npm run watch:css  # rebuild on save

Or import into an existing SCSS setup with this folder on the load path: @use 'my-design-system/main'; See SCSS.

Component documentation ships in the ZIP

Open ds-check.html in a browser: every component you selected, rendered live with your tokens, each with copy-paste HTML. Pro ZIPs also include example.html (a full starter page), tokens.json (for Figma token plugins and Style Dictionary), design.md (a 9-section spec grounded in your tokens), and package.json (npm build kit with watch scripts). See Components.

Inside the ZIP - 7-1 SCSS architecture

The same detail that used to live on the homepage. Your tokens drive the whole system; change a custom property and everything re-themes. Plus compiled CSS if you don't use a build step.

ani-design-system/
├── main.scss         one import, whole system
├── abstracts/        your tokens
│  ├── _colours.scss     HSL palette → --yourprefix-colour-* + dark theme
│  ├── _typography.scss   fluid clamp() type scale
│  ├── _spacing.scss     fluid clamp() space scale
│  ├── _effects.scss     shadows · motion · layers
│  └── _fonts.scss      Google / self-hosted / system
├── base/           reset + h1-h6, p
├── components/        only the ones you picked
├── layouts/         container · grid · header · footer
├── utilities/        spacing · colour · type helpers
├── dist/
│  └── ani-design-system.min.css  no build step? just <link> it
├── ds-check.html       every component, live, with copy-paste HTML
├── ani.js          ~2 KB helper - modals, tabs, drawers
├── tokens.json        Figma / Style Dictionary export (Pro)
├── design.md         9-section spec (palette/type/layout/motion + prompt) (Pro)
├── anistyl.config.json    regenerate any time - free
└── README.md + LICENSE    MIT - it's yours

CLI · Agent Skill for automation → Tokens for API.

Quick links