I
Iconography Technology
Guest
Eighteen open-licensed agent skills give an AI agent design judgment: distinctive frontends, brand-consistent themes, Figma-to-code translation, accessibility audits, SwiftUI patterns and generative art. Seven come from Anthropic, including its frontend-design skill. Nine come from Tech Leads Club, and Matt Pocock and Thomas Ricouard contribute one each.
All 18 are packaged as the Design & UI plugin in Cuttlefish.MD, HackerNoon's license-checked skills marketplace. They follow the open Agent Skills standard, so they run in Claude Code, Codex CLI and 30+ other tools, and each is indexed in HackerNoon's SKILL.md Library.
For Codex CLI, Cursor or another agent that supports the standard, clone the repo and copy
Prefer pixel art? The same marketplace ships HackerNoon's own Pixel Icon Library skill:
All 18 are packaged as the Design & UI plugin in Cuttlefish.MD, HackerNoon's license-checked skills marketplace. They follow the open Agent Skills standard, so they run in Claude Code, Codex CLI and 30+ other tools, and each is indexed in HackerNoon's SKILL.md Library.
The 18 design skills
| Skill | What it does | Author |
|---|---|---|
| web-accessibility | Audits and fixes accessibility against WCAG 2.1 | Tech Leads Club |
| algorithmic-art | Creates generative art in p5.js with seeded randomness and tunable parameters | Anthropic |
| brand-guidelines | Applies Anthropic's brand colors and typography; a template for encoding your own brand | Anthropic |
| canvas-design | Creates visual art as PNG and PDF from a design philosophy | Anthropic |
| codebase-design | Shared vocabulary for designing deep modules and clean interfaces | Matt Pocock |
| figma | Pulls design context, variables and assets from Figma through its MCP server | Tech Leads Club |
| figma-implement-design | Turns Figma frames into production code with 1:1 visual fidelity | Tech Leads Club |
| frontend-blueprint | Runs a design discovery process before generating any frontend code | Tech Leads Club |
| frontend-design | Brings distinctive, intentional visual design to new or existing UI | Anthropic |
| frontend-design | Builds production-grade frontends with high design quality | Tech Leads Club |
| modular-design-principles | Guidance on boundaries, composability and explicit contracts in modular systems | Tech Leads Club |
| skill-architect | Designs new skills through a structured conversation | Tech Leads Club |
| slack-gif-creator | Creates animated GIFs sized and optimized for Slack | Anthropic |
| swiftui-ui-patterns | Example-driven patterns for SwiftUI views, navigation and modifiers | Thomas Ricouard |
| create-technical-design-doc | Writes technical design documents through interactive discovery | Tech Leads Club |
| theme-factory | Applies ready-made or custom themes to slides, docs and pages | Anthropic |
| web-artifacts-builder | Builds multi-component HTML artifacts with React and Tailwind | Anthropic |
| web-design-guidelines | Reviews UI code against the Web Interface Guidelines | Tech Leads Club |
Install all 18 in one command
Code:
/plugin marketplace add hackernoon/cuttlefish-agent-skills
/plugin install design-ui@cuttlefishFor Codex CLI, Cursor or another agent that supports the standard, clone the repo and copy
plugins/design-ui/skills/ into your agent's skills folder, such as .agents/skills/. The two frontend-design skills install under different folder names, so both can sit side by side.Prefer pixel art? The same marketplace ships HackerNoon's own Pixel Icon Library skill:
/plugin install hackernoon-originals@cuttlefish. Each skill keeps its license and an ATTRIBUTION.md naming its author and source commit. Browse the full library at hackernoon.com/skills, and star Cuttlefish.MD on GitHub.