Anime design skill for AI agents
Overview
Anime is a playful educational design system skill file for AI coding assistants. It creates interfaces that feel like a bright study board: mint-green surfaces, forest-green ink, expressive rounded headings, sky-blue links, stacked fan cards, sticker panels, and doodle-like accents.
The system is built for products that need energy without losing structure. Learning platforms, creator tools, student dashboards, quiz apps, and playful onboarding flows can use Anime to make generated UI feel friendly, visual, and memorable.
Design Tokens
Color Palette
Anime uses a classroom-inspired green palette with white sticker panels and bright blue links.
| Token | Value | Purpose |
|---|---|---|
| Surface | #EDF5E9 |
Mint page background and patterned sections |
| Panel | #FFFFFF |
Sticker panels, modals, and foreground content |
| Brand | #3AAD72 |
Primary filled buttons and positive brand moments |
| Brand Strong | #195736 |
Forest-green borders, button gradients, and headings |
| Link | #0099FF |
Links and navigational emphasis |
| Heading | #195736 |
Primary headings and high-emphasis text |
Dark mode shifts the palette into a chalkboard-like green surface with soft mint foregrounds. The color system keeps the playful contrast while preserving readability.
Typography
Anime uses DynaPuff for all headings and Geist for body, labels, navigation, and buttons. The display face gives headings a cute, rounded, hand-lettered tone, while Geist keeps UI controls and paragraphs clean.
Headings can scale large and expressive, but button labels stay in Geist so controls remain legible and crisp.
Spacing and Shape
The system uses an 8px rhythm, 88-96px section spacing, 1200px containers, and 32px card grid gaps. It intentionally separates rounded controls from square stacked cards: panels and modals can use 16px corners, buttons use 7px corners, and stacked fan cards use square corners.
Component Language
The signature component is the stacked fan card: a front card with two rotated duplicate layers behind it, thick ink borders, and a hover fan effect. Buttons share one forest-green gradient recipe with a gradient border ring and glow shadow. Sections use layered mesh patterns, radial dots, grids, diagonal stripes, and doodle accents to make pages feel animated and educational.
Best For
Use Anime for educational products, learning games, creator tools, kid-friendly dashboards, course landing pages, and any interface that should feel upbeat, visual, and approachable without abandoning accessibility or clear structure.