Agent Academy

Agent Academy is a free, source-linked library of skills, prompts, MCP servers and bot templates, organised into courses by profession, for people who hand real work to AI agents: 1,467 live resources, each with its original link, license and safety tags.

Course · Design

UI designer

Learn to design an interface that does not look templated: pick one style from UI Hub, follow design skills, build, and verify with four screenshots.

Permissions

Mostly read-only. Figma/Canva MCP servers need tokens; skills are text you can read. Installing a skill writes files into the project; ask first.

96resources
5steps
8checks
  1. Enrol

    Read course.md: the job, the permissions it needs, and what good output looks like.

    TutorialDesign

    「先出设计方案再写代码」Prompt(@Voxyz_ai)

    受众/目标 → 4–6 个色 token → 字体 → ASCII 线框 → 1 个标志元素;完成后桌面 + 手机截图对照 DESIGN.md

    Sourcex.com/i/status/2087178102505926740

    No credentialsDoes not sendsee source
    TutorialDesign

    2026 产品设计师工作流(@dianne_alter)

    产品上下文 → Mobbin + Paper / Claude Code 原型 → Figma 组件进 Storybook → Agent 审查

    Sourcex.com/i/status/2088261777758851497

    No credentialsDoes not sendsee source
    TutorialDesign

    8pt Grid(spec.fm)

    8 点栅格间距体系的经典讲解

    Sourcespec.fm/specifics/8-pt-grid

    No credentialsDoes not sendsee source
    TutorialDesign

    AI × Design Weekly(Jason Cyr)

    每周 AI × 设计动态:Figma MCP、Codex ↔ Figma、设计系统 Skills

    Sourcejasoncyr.substack.com/p/ai-design-weekly-issue-005

    No credentialsDoes not sendsee source
    TutorialDesign

    AI slop 成因与破解(@dashiAIxz)

    约束不够就趋同;用随机数打破、给参考图、首尾帧生视频做 Landing

    Sourcex.com/i/status/2095715594368860421

    No credentialsDoes not sendsee source
  2. Pick a direction

    Choose one style, platform or channel from the reference library. Only one.

    Design systemDesign

    Apple Human Interface Guidelines

    Apple's platform design guidance: foundations, patterns, components, inputs, technologies.

    Sourcedeveloper.apple.com/design/human-interface-guidelines

    No credentialsDoes not sendApple terms; link only
    Style libraryDesign

    UI Hub (Incidental AI UI resource hub) — llms.txt / api

    Curated multilingual directory of ~2,391 public UI resources with visual-style (vs) facets, design KB (specs, skills), JSON endpoints and a recommended design-skill workflow.

    Sourcesiinxu.github.io/ui-resource-hub/llms.txt

    No credentialsDoes not sendaggregator; per-item license
    PluginDesign

    Design plugin (knowledge-work-plugins)

    A design productivity plugin primarily designed for Cowork, Anthropic's agentic desktop application — though it also works in Claude Code. Helps with design critique, system management, UX writing, accessibility, research synthesis, and developer handoff. Works with any design team — standalone with your input, supercharged when you connect Figma and other tools.

    Sourcegithub.com/anthropics/knowledge-work-plugins/tree/main/design

    No credentialsDoes not sendApache-2.0
    Bot templateDesign

    figma bro

    A design partner that works inside Figma, not around it

    Sourcebotsdots.site/templates/figma-bro

    Needs credentialsDoes not sendtemplate belongs to its creator
    Bot templateDesign

    Idle Tees Designer

    Visual/UX designer for idle/incremental games. Owns drones look, landscape/background, VFX, UI polish, and readable hierarchy while protecting

    Sourcebotsdots.site/templates/idle-tees-designer

    No credentialsCan send externallytemplate belongs to its creator
    Bot templateDesign

    Music Video

    Generates a track from your lyrics, syncs every line to the beat, and renders kinetic-typography visuals into a draft music video

    Sourcebotsdots.site/templates/music-video

    No credentialsDoes not sendtemplate belongs to its creator
  3. Learn the rules

    Read the required skills, prompts and standards in order.

    SkillDesign

    algorithmic-art

    Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

    Sourcegithub.com/anthropics/skills/blob/main/skills/algorithmic-art/SKILL.md

    No credentialsDoes not sendApache-2.0
    SkillDesign

    canvas-design

    Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

    Sourcegithub.com/anthropics/skills/blob/main/skills/canvas-design/SKILL.md

    No credentialsDoes not sendApache-2.0
    SkillDesign

    banner-design

    Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon,…

    Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/banner-design/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    mobile-native

    Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the…

    Sourcegithub.com/emilkowalski/skills/blob/main/skills/mobile-native/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    mobile-android-design

    Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.

    Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/mobile-android-design/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    mobile-ios-design

    Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.

    Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/mobile-ios-design/SKILL.md

    No credentialsDoes not sendMIT
  4. Do it

    Follow a workflow or case. Install a skill or MCP server only if you have permission.

    How this site was designed by an agent
    WorkflowDesign

    UI Hub skills.json (recommended design workflow)

    Workflow: pick ONE direction skill (frontend-design or taste-skill) → search resources by style/kind → build with emil-design-eng → audit with impeccable + web-design-guidelines + accessibility → verify in browser light+dark, mobile.

    Sourcesiinxu.github.io/ui-resource-hub/api/skills.json

    No credentialsDoes not sendaggregator
    CaseDesign

    Multimodal Design Agent Team

    A Streamlit application that provides comprehensive design analysis using a team of specialized AI agents powered by Google's Gemini model.

    Sourcegithub.com/Shubhamsaboo/awesome-llm-apps/tree/main/advanced_ai_agents/multi_agent_apps/agent_teams/multimodal_design_agent_team

    No credentialsDoes not sendApache-2.0
    MCP serverDesign

    io.github.GLips/Figma-Context-MCP

    Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

    Sourcegithub.com/GLips/Figma-Context-MCP

    Needs credentialsDoes not sendMIT
    MCP serverDesign

    Figma MCP Server

    The Figma MCP server brings Figma design context directly into your AI workflow.

    Sourcegithub.com/figma/mcp-server-guide

    Needs credentialsDoes not sendnot stated
    MCP serverDesign

    io.github.TranHoaiHung/figma-ui-mcp

    Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

    Sourcegithub.com/TranHoaiHung/figma-ui-mcp

    No credentialsDoes not sendMIT
    MCP serverDesign

    Keyline Icons

    Search Keyline Icons by name and get any icon's SVG source or React import. No key, no network.

    Sourcegithub.com/keyline-icons/keyline-icons

    No credentialsDoes not sendMIT
  5. Self-check

    Go through the checklist and report the result to your owner.

    SkillDesign

    impeccable

    Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding,

    Sourcegithub.com/pbakaus/impeccable/blob/main/.claude/skills/impeccable/SKILL.md

    No credentialsDoes not sendApache-2.0
    SkillDesign

    web-design-guidelines

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

    Sourcegithub.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md

    No credentialsDoes not sendnot stated
    StandardDesign

    WCAG 2.2 (W3C Recommendation)

    Web Content Accessibility Guidelines 2.2: testable success criteria for accessible web content.

    Sourcew3.org/TR/WCAG22

    No credentialsDoes not sendW3C Document License; link + quote with attribution
    SkillDesign

    ui-styling

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and…

    Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-styling/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    ui-ux-pro-max

    UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings,…

    Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-ux-pro-max/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    break-ui

    Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text, emoji, extreme numbers — then render it behind a "Demo data / Worst case" toggle and report everything that broke, with the fix for each. Use when the user asks to stress-test, break, or find edge cases in a component or screen, or to "try…

    Sourcegithub.com/emilkowalski/skills/blob/main/skills/break-ui/SKILL.md

    No credentialsDoes not sendMIT

    Checklist