Eighteen open-licensed agent skills give an AI agent design judgment: distinctive frontends, brand-c 2026-11-6 18:27:29 Author: hackernoon.com(查看原文) 阅读量:19 收藏
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.
如有侵权请联系:admin#unsafe.sh