agent-friendly-design
agent-friendly design
how to build sites and apps that AI agents can actually use.
why this exists
most design guidance is about agents building UI. this skill is about agents consuming UI. the audience for your site is no longer just humans — automated traffic surpassed human traffic in 2024 (51% of all web interactions). agents browse, compare, purchase, research, and interact on behalf of users.
if your site is invisible to agents, you're invisible to a growing majority of the web.
the core insight
the accessibility tree — originally built for screen readers — is becoming the primary interface between AI agents and your website. OpenAI's Atlas explicitly uses ARIA tags to interpret page structure. Microsoft's Playwright MCP provides accessibility snapshots, not screenshots. even vision-first agents (Anthropic Computer Use, Google Mariner) are incorporating accessibility data for reliability.
building for agents and building for accessibility are the same work. every improvement you make for one benefits the other.
the checklist
1. semantic HTML (non-negotiable)
More from aa-on-ai/agentic-design-system
ui-polish-pass
>
10design-review
>
10web-animation-design
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
9agentic-design-system
>
9ux-baseline-check
>
9visual-reference-calibration
Use before implementing UI/design from a visual reference, screenshot, CodePen, Dribbble shot, website, or “make it feel like this” request. Prevents cargo-culting mechanics, fake UI chrome, and code-first misses by forcing reference breakdown, user-question calibration, visual target approval, and side-by-side review before implementation.
3