8套面向开发者的在线工具生成 Prompts:要求完整源码+构建部署+测试用例,覆盖对比度检查、ARIA校验、键盘可达性与可访问性报告等高频场景。
在线 Contrast Checker + Palette Validator
输入颜色与组件状态,输出WCAG对比度结果、建议替代色与报告。
英文 Prompt:
Build an online tool: "Contrast Checker & Palette Validator". Inputs: foreground/background colors, component states, text sizes. Output: WCAG AA/AAA results, suggestions, export report JSON/PDF (text- d), dark/light theme. Tech: React+Type +Vite. Output full code, file tree, run/build, deploy guide, and QA checklist with 15 cases.
中文释义: 生成对比度检查与调色板校验工具:可导出报告、覆盖不同字号/状态并带测试用例。
在线 ARIA Label/Role Audit
粘贴一段HTML或URL快照,扫描常见ARIA/role错误并给修复建议。
英文 Prompt:
Build "ARIA Audit" tool. Input: HTML snippet (no network fetch). Parse DOM, check missing aria-label for icon buttons, invalid roles, aria-hidden misuse, form label associations. Output: findings list with DOM path and suggestions. Tech: Svelte+TS+Vite. Output full code + run/build + deploy + QA checklist with 20 snippets.
中文释义: 生成 ARIA 检测工具:只处理输入HTML,输出定位路径与修复建议,样例覆盖常见错误。
在线 Keyboard Navigation Simulator
输入可交互元素列表,模拟Tab顺序与焦点陷阱检测,输出优化建议。
英文 Prompt:
Build "Keyboard Navigation Simulator". Inputs: simplified component tree JSON describing focusable elements and tabindex. Simulate tab order, detect traps, duplicate tabindex, non-linear order. Output: visualization + suggested order. Tech: Vanilla JS + SVG. Output full code + QA checklist with 12 trees.
中文释义: 生成键盘可达性模拟工具:可视化Tab顺序、检测陷阱并给调整建议。
在线 Form Accessibility Checklist Generator
输入表单字段定义,生成可访问性检查清单与示例实现片段(不需要后端)。
英文 Prompt:
Build "Form A11y Checklist Generator". Input: form fields JSON. Output: checklist + sample code snippets for labels, errors, aria-describedby, required indicators. Tech: Next.js+TS static export. Output full code + QA checklist for generator.
中文释义: 生成表单可访问性清单工具:输出结构化清单与示例代码,并自带QA验证点。
在线 Focus Ring Style Tester
配置focus样式并在组件预览中测试可见性与一致性,导出CSS变量。
英文 Prompt:
Build "Focus Ring Tester". Provide component preview set (buttons, inputs, s). Allow editing CSS variables for focus ring, test contrast and visibility on light/dark backgrounds, export CSS. Tech: React+TS. Output full code + QA checklist with 10 themes.
中文释义: 生成焦点样式测试工具:可导出CSS变量,兼顾浅/深色主题并覆盖测试用例。
在线 Accessibility Report Builder
把上述检查结果汇总为可分享的报告模板,支持导入JSON并导出Markdown。
英文 Prompt:
Build "A11y Report Builder". Inputs: findings JSON. Output: report view, sections, severity, export Markdown/JSON. No backend. Tech: SolidJS+TS. Output full code + QA checklist with 8 datasets.
中文释义: 生成可访问性报告生成器:支持导入检查结果并导出Markdown,便于协作。
在线 i18n 文案长度预警工具
输入多语言文案表,检测长度溢出风险并生成替代短文案建议列表。
英文 Prompt:
Build "i18n Length Checker". Input: CSV/JSON with locales. Detect strings exceeding thresholds per UI slot, show warnings, export report. Tech: React+TS+Vite. Output full code + QA checklist with 10 datasets.
中文释义: 生成多语言长度预警工具:按槽位阈值检测,输出报告并可导出。
在线 Icon Button Label Helper
为图标按钮生成可读label建议,输出aria-label清单与命名规范。
英文 Prompt:
Build "Icon Label Helper". Input: list of icon names + contexts. Output: suggested labels, naming guidelines, export JSON. Tech: Vanilla JS. Output full code + QA checklist with 50 icons.
中文释义: 生成图标按钮label助手:输出建议与规范,支持导出清单。