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
你能得到
- 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
适合场景
- SaaS dashboards and product landing pages
- Feature-heavy pages that need visual hierarchy
- Teams that want modular, remixable sections
不适合
- Long-form editorial or blog layouts
- Minimal single-message pages
- Projects needing a light, airy aesthetic
- 名称
- Bento-Style UI Design
- 下载数
- 0
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: v1.0.0: initial release — SKILL.md + 3 references + animated landing-page demo
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip bento-style-ui-v1.0.0.zip -d ~/.claude/skills/bento-style-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
评价
相关技能
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