ai-friendly-web-design-skill

为什么要用

核心特性

14 design principles optimized for agent navigation + accessibility
Stable data-testid / data-ai-action locator conventions
No hover-only interactions, no iframes/Shadow DOM barriers
Explicit loading states to avoid race conditions
Auto-activated during UI build / review — flags issues with severity

实时演示

实际使用效果

ai-friendly-web-design-skill.replay ▶ 就绪

0/0

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： ai-friendly-web-design-skill

Audit an existing component for agent-readiness

👤 Web devs shipping to customers who'll hit the page with agents ⏱ ~30 min beginner

何时使用： Your support chatbot or QA agent keeps missing the right button.

步骤

Feed Claude the component

Review this Checkout.tsx against ai-friendly-web-design principles. Flag severity.✓ 已复制

→ Ranked list: critical (hover-only submit) -> minor (missing aria-live)
Apply the fixes

Apply all critical + major fixes, keep visuals identical.✓ 已复制

→ Patched component + a diff summary

结果： A component that's still pretty for humans and reachable for agents.

注意事项

Adding data-testid everywhere without convention — Follow the skill's naming convention (data-testid='<area>-<action>') or they drift

搭配使用： chrome-devtools

Build a new form with native controls and proper ARIA

👤 Frontend devs building high-stakes forms (checkout, onboarding) ⏱ ~45 min intermediate

何时使用： A new form where you can't afford to block screen readers or agents.

步骤

Scaffold from principles

Build a billing address form using ai-friendly-web-design. Native input types, labels, aria-describedby for errors, explicit loading on submit.✓ 已复制

→ Form with HTML native types (email, tel), no custom combobox hacks
Add deep-linking + URL state

Make the form step reflect in the URL so agents can open step 2 directly.✓ 已复制

→ step param in URL, state restored on load

结果： A form both assistive tech and agents navigate cleanly.

Replace infinite scroll with predictable pagination

👤 Product engineers where agents fail to get past page 1 ⏱ ~30 min intermediate

何时使用： Your list page uses infinite scroll and agents never reach items below the fold.

步骤

Refactor to paginated route

Replace the infinite-scroll list with URL-based pagination (?page=N). Keep scroll behavior feel.✓ 已复制

→ Addressable pages, prev/next with ARIA

结果： A list an agent can walk deterministically.

注意事项

Breaking SEO by removing the old scroll entirely — Keep scroll load within each page — just make the page boundary explicit

组合

与其他 MCP 搭配，撬动十倍杠杆

ai-friendly-web-design-skill + chrome-devtools

Test the component live and confirm agent locators work

Load the patched component in devtools, verify data-testid values and aria attributes render.✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用
review_component	component path/source	Any UI PR or audit
apply_principles	component + findings	After review
scaffold_agent_friendly	UI spec	Greenfield UI

成本与限制

运行它的成本

API 配额: None
每次调用 Token 数: Moderate — component + review
费用: Free
提示: Run review at PR time, not every keystroke

安全

权限、密钥、影响范围

凭据存储： None

数据出站： None

故障排查

常见错误与修复

Review says no issues but agents still miss buttons

Run with Chrome DevTools snapshot; shadow DOM may hide from the static review

data-testid names clash with existing tests

Provide your naming convention to the skill before it auto-names

替代方案