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

Customize - live preview

The builder’s 5-step wizard guides you: Start → Brand (Colors/Fonts/Feel) → Components → Preview (Desktop/Tablet/Mobile + Light/Dark) → Download.

  • Brand: palette + status colors, heading/body fonts (Google/system/custom), radius (sharp/soft/rounded/pill/custom), shadows, motion. See Tokens and Fonts.
  • Components: 46 in 6 groups, expandable (Basics 7/9 …). Ship only what you tick. Locked Pro items show .
  • Preview: width slider to {screenMin → screenMax}, device presets, dark toggle - same CSS you download.

Advanced controls (mono, heading H1–H6 pins, line-heights, type styles, breakpoints) hide behind “Advanced” - power without overwhelm.

Next: Download · Stack guides: Next.js React

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.