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

Design review and accessibility

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.

course.md for agentsSkill pack (.zip)JSON
45resources
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

  2. Pick a direction

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

    Pick one visual direction (UI Hub)

    minimal 316motion 60enterprise 37dark-tech 27editorial 253d 21gradient 18playful 17soft 15swiss 13apple 12material 11skeuomorphic 8utilitarian 7brutalist 6glass 5fluent 3retro 2industrial 1neumorphism 1

    Bot templateDesign

    Critiquito: Design Critique

    Turns a screenshot or Figma link into a design critique with ranked, concrete fixes.

    Sourcebotsdots.site/templates/critiquito-design-critique

    Needs credentialsCan send externallytemplate belongs to its creator
    Bot templateDesign

    AV Engineer

    A CTS-D level AV design reviewer and co-designer for AV integrators, consultants, and in-house AV teams. It checks quotes, scopes, and drawings.

    Sourcebotsdots.site/templates/av-engineer

    No credentialsDoes not sendtemplate belongs to its creator
    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
    Design systemDesign

    Material Design 3

    Google's open-source design system: foundations, styles (color, typography, motion), components.

    Sourcem3.material.io

    No credentialsDoes not sendGoogle site terms; link only

  3. Learn the rules

    Read the required skills, prompts and standards in order.

    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

  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

    accessibility-compliance

    Audit web accessibility for WCAG compliance with automated axe-core tests, keyboard and screen reader checks, and remediation guidance

    Sourcegithub.com/wshobson/agents/blob/main/plugins/accessibility-compliance/commands/accessibility-audit.md

    No credentialsDoes not sendMIT
    WorkflowDesign

    ui-design

    Audit UI code for WCAG compliance

    Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/commands/accessibility-audit.md

    No credentialsDoes not sendMIT
    WorkflowDesign

    ui-design

    Review existing UI for issues and improvements

    Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/commands/design-review.md

    No credentialsDoes not sendMIT
    MCP serverDesign

    Supericons

    Multilingual semantic SVG icon search with previews for AI coding agents. 20,000+ icons.

    Sourcegithub.com/curlymolelabs/supericons

    Needs 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