Honeycomb Design
Generate branded interfaces and assets following Honeycomb design guidelines and components.
Installation
- Make sure Claude is on your device and in your terminal.
Skills load from
~/.claude/skills/when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then runclaudein any terminal to verify.One-time setupnpm i -g @anthropic-ai/claude-codeAlready have it? Skip ahead.
- Paste into Claude Code or into your terminal.
This copies the whole skill folder into
~/.claude/skills/honeycomb-design-legioncodeinc/— the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.Faster alternative (instruction-only skills)
Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.
Quick install (SKILL.md only)Sign up to copy - Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from
~/.claude/skills/). New skills are picked up on startup. - Just ask Claude.
Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.
Prefer to read the source first? Open on GitHub.
When Claude uses it
Use this skill to generate well-branded interfaces and assets for Honeycomb (shared AI agent memory, a Legion Code × Activeloop product), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
What this skill does
Read the readme.md file within this skill, and explore the other available files.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
Where things are
styles.css— the one stylesheet to link;@imports everything intokens/.tokens/— colors (honey/pollinate/verified + surfaces), typography (Inter + JetBrains Mono), spacing/radii/motion,@font-face.components/— React primitives:core/(Button, Badge, Card, Input) andhoneycomb/(MemoryCard, Kpi). Each has a.prompt.mdwith usage.ui_kits/dashboard/— interactive recreation of Honeycomb's daemon-served dashboard; the reference for any full Honeycomb surface.guidelines/cards/— small specimen cards for every foundation.logos/— logomark, wordmark, partner logos, fonts.
Non-negotiables
- Dark-native, warm near-black canvas. Honey amber
#F7A823is the one brand hue — one saturated honey region per view (scarcity rule). Pollinate violet is only for the Pollinating loop; verified-green only for source-backed states. - Mono (JetBrains Mono) is the texture of trust — every memory key, id, hash, path, count, timestamp, recall query.
- Sentence case; lowercase
honeycombwordmark. No emoji. Icons = Lucide (1.5px stroke, geometric). - Cards = 1px border on
bg.elevated, 12px radius, no shadow. The only expressive light is the honey/pollinate glow on one focused element. - Every recalled memory shows its source and score. Claims carry evidence.
Related skills
Generative Code Art
anthropics
Create algorithmic art with p5.js using randomness and interactive parameters.
UI/UX Pro Max
anthropics
Build production-grade web components and interfaces with distinctive, polished design.
Artifact Theme Toolkit
anthropics
Apply professional color and font themes to slides, docs, and web pages.
Multi-Component Web Artifacts
anthropics
Build complex React artifacts with Tailwind CSS and shadcn/ui components.