Design bento-grid landing pages — modular unequal cards where tile size carries the editorial hierarchy, each card with its own mini-visualization, choreographed stagger/reveal/hover motion. Ships tokens, components, copy-paste snippets, and an animated Hexagrid demo.
Design our analytics dashboard landing page in bento style with stat tiles and a marquee
What you get
- Bento grid layout system with 10 tile types
- Design tokens: colors, type scale, spacing, radii, motion
- Copy-paste snippets: grid, reveal, marquee, count-up
- Animated Hexagrid demo landing page
Good fit
- SaaS dashboards and product landing pages
- Feature-heavy pages that need visual hierarchy
- Teams that want modular, remixable sections
Not for
- Long-form editorial or blog layouts
- Minimal single-message pages
- Projects needing a light, airy aesthetic
- Name
- Bento-Style UI Design
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0: initial release — SKILL.md + 3 references + animated landing-page demo
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip bento-style-ui-v1.0.0.zip -d ~/.claude/skills/bento-style-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Reviews
Related skills
Aurora-Glass UI Design
Aurora-Glass UI Design
Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.
Claude Code · Codex · Cursor · Copilot +3
Apple-Style UI Design
Apple-Style UI Design
Design web pages in Apple's marketing-site visual language — gallery-like product storytelling, the SF type ramp, binary light/dark panels, and one blue reserved for action.
Claude Code · Codex · Cursor · Copilot +3
Linear-Style UI Design
Linear-Style UI Design
Design dark, developer-grade SaaS pages in Linear's visual language — near-black canvas, Inter with signature 510 weight, hairline white borders, indigo accent, keyboard-first product storytelling.
Claude Code · Codex · Cursor · Copilot +3
Stripe-Style UI Design
Stripe-Style UI Design
Fintech-grade marketing pages in a gradient-mesh language — luminous white canvas, animated warm-to-cool gradient hero band, thin 300-weight display type with tight tracking, one indigo action color, near-square geometry, deep-navy dashboard mocks. Build fintech landing pages, pricing pages, and API/developer marketing with financial-infrastructure polish.
Claude Code · Codex · Cursor · Copilot +3