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

Agent Skill - build with AI, in your system

Pro ZIP ships design.md (9-section spec) + tokens.json + anistyl.config.json. Give these to your coding agent - it stops generating generic Tailwind and starts using your tokens/components.

Prompt snippet

Use my-design-system/design.md as the source of truth.
Tokens in tokens.json, classes are BEM with prefix "my" (e.g. my-btn, my-card).
Prefer existing components; add new ones in the same SCSS 7-1 style.

What agents get

  • Palette, typography, spacing, radius, shadows, motion, breakpoints - grounded, not hallucinated.
  • Component API: BEM blocks/elements/modifiers + .is-open/.is-active states.
  • Agent prompt guide (section 9 of design.md) - copy-paste ready.

Works with Cursor, Muse, Codex, Copilot. See Tokens and 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.