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.
The 18 design skills
| Skill | What it does | Author |
|---|---|---|
| Audits and fixes accessibility against WCAG 2.1 | Tech Leads Club | |
| Creates generative art in p5.js with seeded randomness and tunable parameters | Anthropic | |
| Applies Anthropic's brand colors and typography; a template for encoding your own brand | Anthropic | |
| Creates visual art as PNG and PDF from a design philosophy | Anthropic | |
| Shared vocabulary for designing deep modules and clean interfaces | Matt Pocock | |
| Pulls design context, variables and assets from Figma through its MCP server | Tech Leads Club | |
| Turns Figma frames into production code with 1:1 visual fidelity | Tech Leads Club | |
| Runs a design discovery process before generating any frontend code | Tech Leads Club | |
| Brings distinctive, intentional visual design to new or existing UI | Anthropic | |
| Builds production-grade frontends with high design quality | Tech Leads Club | |
| Guidance on boundaries, composability and explicit contracts in modular systems | Tech Leads Club | |
| Designs new skills through a structured conversation | Tech Leads Club | |
| Creates animated GIFs sized and optimized for Slack | Anthropic | |
| Example-driven patterns for SwiftUI views, navigation and modifiers | Thomas Ricouard | |
| Writes technical design documents through interactive discovery | Tech Leads Club | |
| Applies ready-made or custom themes to slides, docs and pages | Anthropic | |
| Builds multi-component HTML artifacts with React and Tailwind | Anthropic | |
| Reviews UI code against the Web Interface Guidelines | Tech Leads Club |
Install all 18 in one command
/plugin marketplace add hackernoon/cuttlefish-agent-skills /plugin install design-ui@cuttlefish For 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.
