表单构建Skill：让每一次用户输入都既合规又好填
- 一体化方案：把“选什么组件、什么时候验证、怎么报错、如何无障碍”这四件最容易踩坑的事，整合成一套可执行的流程。
- 50+ 输入类型决策树：从数据类型出发推导组件选择，避免“该用单选还是下拉”这类反复纠结。
- 验证时机有据可依：默认“失焦时验证 + 渐进增强”，并给出提交时、变更时、防抖等 5 种策略的适用边界。
- 内置 WCAG 2.1 AA 可访问性模式：标签、键盘导航、错误关联、ARIA 属性都有明确清单。
- 双技术栈落地：JavaScript/React（React Hook Form + Zod）与 Python（Pydantic + FastAPI）均给出可直接参考的实现路径。
1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？
技能中文名：表单构建Skill 技能英文名：building-forms 技能ID：13441
它要解决的是表单开发中“零散经验拼凑”的问题。表单看起来只是几个输入框，实际上涉及组件选型、验证时机、错误文案、键盘操作、屏幕阅读器兼容、多步流程状态管理等一长串决策。多数团队的做法是复制粘贴旧代码，结果就是：验证时机不统一、错误提示只有“无效输入”、必填项只靠红色星号区分、多步表单丢了草稿就前功尽弃。
表单构建Skill 把这些决策沉淀成了一套系统化指引：从数据类型到输入组件的决策树、验证时机策略、可访问性模式、错误消息公式，以及多步向导、条件字段、动态字段数组等复杂模式，并附上 React 与 Python 两套主流技术栈的实现参考。
一键安装的思路与步骤
「技能详情内容」中未提供具体的安装命令与下载地址，以下为通用流程，具体入口、命令与权限要求以官方说明为准：
- 确认安装前提：你使用的 AI 客户端或技能平台需要支持“技能（Skill）”机制，即可以加载外部技能描述文件并让模型在对话中调用。若你的客户端不具备技能能力，通常无法完整体验。
- 找到技能入口：在平台的技能市场、技能库或插件中心中，使用技能名称「表单构建」或英文名
building-forms搜索；部分平台也支持通过技能ID13441定位。 - 执行一键安装：点击安装/启用按钮，平台会自动把技能说明与参考资料挂载到你的会话上下文中。通常无需额外配置依赖。
- 验证是否生效：新开一个对话，提问“我要做一个注册表单，邮箱和密码字段，应该选什么输入类型、在什么时机验证？”。如果回答里出现了“失焦时验证并配合渐进增强”“密码强度用变更时验证”“每个输入都要有关联的可见标签”这类结构化内容，说明技能已加载成功。若回答仍是泛泛而谈，检查技能是否处于启用状态，或重新进入会话。
这种“一键安装”的价值在于：不需要你事先读完一份几十页的表单规范文档，安装完成后，你只要用自然语言描述业务场景，技能就会把对应的决策框架和实现模式带到对话里。
2. 该技能的主要功能和特点
- 组件选择决策树：以“数据类型 → 输入组件 → 验证模式”为黄金规则。短文本对应文本/邮箱/密码输入，长文本对应文本域或富文本，单选在 2–7 个选项时用单选按钮组、超过 7 个用下拉、超过 15 个用自动完成，多选用复选框组或多选组件，结构化数据则用地址、信用卡、电话号码这类专用输入。
- 五种验证时机策略：提交时、失焦时、变更时、防抖、渐进增强，并明确推荐默认值是“失焦时验证 + 首次错误后切换为变更时验证、修复后立即显示成功”。
- WCAG 2.1 AA 可访问性模式：每个输入必须有关联的可见标签、必填项不能只靠颜色区分、错误需通过
aria-describedby与输入关联并由aria-live播报、提交时焦点移动到第一个错误、Tab 顺序必须逻辑有序、Esc 关闭弹层、焦点必须可见。 - 现代表单 UX 原则：渐进披露、智能默认值、内联验证与积极反馈、移动优先（最小 44 像素触摸目标）、降低认知负荷、错误预防、自动保存与恢复。
- 错误消息公式：必须回答“什么错了、为什么重要、如何修复”三件事，并给出正反例对照，比如把“无效输入”改写成“电子邮件地址必须包含 @ 符号（例如 name@example.com）”。
- 复杂表单模式库：线性向导与分支向导、进度指示器、保存与恢复、条件字段、重复区块、字段数组、嵌套表单、内联编辑、批量编辑、乐观更新、撤销重做。
- 双语言实现参考：JavaScript/React 侧推荐 React Hook Form（约 8KB 包）+ Zod + Radix UI 或 React Aria；Python 侧推荐 Pydantic + FastAPI，传统框架可用 WTForms。
- 与设计令牌集成：表单视觉样式统一走 design-tokens 技能，支持亮色、暗色、高对比度和自定义品牌主题切换。
与普通工具相比强在哪？ 普通 UI 组件库文档告诉你“这个组件有哪些属性”，AI 编程助手通常直接给你一段能跑的代码；而表单构建Skill 回答的是“为什么这么选”——它先帮你把需求翻译成数据类型，再推导组件和验证策略，最后才落到代码。它把“可访问性”和“错误文案”这两个最容易被忽略的环节，变成了流程里的必选项而不是可选项。
3. 如何使用该技能？
下面是推荐的使用流程，每一步都可以直接照着提问。
第 1 步：描述业务场景，而不是只说“做一个表单”。 说明表单类型、字段清单、用户群体、终端（移动端为主还是桌面端为主）、是否有分步需求。例如：“我要做一个 SaaS 产品的注册流程，字段有邮箱、密码、公司名称、团队规模，移动端用户占七成，希望分成两步。”
第 2 步：先要选型结论，再要代码。 提问：“按技能里的决策树，这几个字段分别应该用什么输入组件？团队规模为什么用下拉而不是单选按钮组？”这样你能拿到可复用的判断依据，而不是一次性代码。
第 3 步：明确验证时机。 提问：“密码强度检查用哪种验证时机？邮箱唯一性校验需要请求后端，应该用防抖吗？错误文案请按‘什么错了 + 为什么重要 + 如何修复’的公式给我三版备选。”
第 4 步：要求可访问性自查。
提问：“请按 WCAG 2.1 AA 清单检查这个表单，列出还缺哪些 ARIA 属性和键盘支持。”通常会得到关于标签关联、aria-invalid、aria-live、焦点管理等具体条目。
第 5 步：获取实现参考。
React 场景下，输出通常包含模式定义 + 表单状态管理 + 错误渲染三段，例如邮箱用 z.string().email('无效电子邮件地址') 定义、表单以 mode: 'onBlur' 开启失焦验证、错误节点用 role="alert" 渲染。Python 场景下，输出通常是 Pydantic 模型 + 字段约束 + 自定义校验器，校验失败时框架自动返回 422 与字段级错误详情。
第 6 步：验收。 拿到结果后，至少做三件事：用键盘 Tab 走一遍全流程、用屏幕阅读器听一遍错误播报、把窗口缩到手机尺寸检查触摸目标大小。技能提供的是模式与清单，最终体验仍需你在真实环境中确认。
4. 同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| 表单构建Skill（building-forms） | 表单设计与实现的系统化决策助手 | 组件决策树、5 种验证时机、WCAG 2.1 AA 清单、错误文案公式、多步与动态表单模式、React 与 Python 实现参考 | 需支持技能机制的客户端，一键安装，具体入口以官方说明为准 | 需要从选型到落地全链路指导的表单开发 | 优势是覆盖“为什么”和“怎么做”两层，可访问性内建；不足是偏方法论，具体 UI 外观仍依赖你的组件库与设计令牌 |
| 通用 AI 编程助手 | 代码生成与问题答疑 | 直接产出表单代码片段 | 普遍较低，多数已集成在编辑器或对话工具中 | 已有明确方案、只想快速出代码 | 优势是快；不足是验证策略、可访问性、错误文案常被简化，容易产出“能跑但不合规”的表单 |
| UI 组件库官方文档 | 组件 API 参考 | 组件属性、事件、样式定制 | 免费查阅，学习成本取决于文档质量 | 已确定技术栈、需要查具体属性 | 优势是权威精确；不足是碎片化，不负责跨组件的流程设计与验证时机决策 |
| 可视化表单搭建平台（低代码） | 拖拽式表单生产 | 拖拽布局、可视化配置校验、导出提交数据 | 无需编码，但受平台能力与导出限制 | 运营活动报名、内部问卷等标准化场景 | 优势是上手极快；不足是复杂条件逻辑与深度可访问性定制受限，产物常与自有代码库割裂 |
5. 该技能的典型应用场景与实际体验情况
场景一：前端工程师搭建注册与登录流程 痛点在于密码强度、邮箱格式、确认密码一致性三处验证时机经常互相打架，用户一边打字一边被红字打断。使用方式是先问选型与验证时机，再要代码。实际体验：上手几乎零成本，回答会明确指出“默认失焦验证、首次错误后转向变更时验证”，并提示确认密码字段需要与密码字段做联动校验。注意事项是它不会替你做视觉设计，样式仍需接入设计令牌体系。
场景二：Python 后端开发者设计接口入参校验
痛点是前端校验可以被绕过，后端必须独立校验，但很多人只写一行 required。使用方式是描述接口字段与业务规则，要求给出 Pydantic 模型与自定义校验器。实际体验：能拿到包含最小长度、必须含数字与大写字母等规则的校验器示例，以及 422 错误响应的结构说明，前后端错误文案可以对齐。注意事项是涉及跨字段校验时要明确说明依赖关系。
场景三：产品与设计同学设计多步结账或问卷调查 痛点是不确定什么时候该显示下一步、条件问题怎么组织、用户中途离开怎么办。使用方式是描述步骤划分与分支条件，要求给出渐进披露与自动保存的建议。实际体验：会得到线性向导与分支向导的取舍建议、进度指示器的作用，以及“自动保存草稿并在离开前警告”的具体做法。注意事项是分支逻辑复杂时，建议先在纸面画清状态再让技能补细节。
场景四：存量系统的无障碍改造 痛点是收到无障碍整改要求，但不知道从哪改起。使用方式是贴出现有表单结构，要求按 WCAG 2.1 AA 清单逐条核对。实际体验：会得到标签缺失、错误未关联、焦点不可见、必填仅靠颜色等高频问题的定位与修复方向。注意事项是最终仍需真实屏幕阅读器实测，清单只能保证方向正确。
6. 该技能能为用户带来的价值
效率层面：把“查文档、找范例、想验证时机、补无障碍属性”这几个分散动作压缩到一次对话内完成。对常见表单，选型与验证策略的决策时间可以从反复讨论的数小时缩短到十几分钟；对多步流程这类容易返工的场景，收益更明显，因为状态管理与草稿保存方案在开工前就定了。
门槛层面：可访问性长期被视为“专家领域”，很多团队因为不熟而直接跳过。技能把 WCAG 2.1 AA 拆成了可勾选的清单（标签、键盘、错误关联、ARIA 属性），让不熟悉无障碍的开发者也能做出基本合规的表单，这对需要满足采购方合规审查的 B 端产品尤其关键。
质量与长期价值：统一的验证时机和统一的错误文案公式，会让产品内所有表单的交互手感趋于一致，减少用户“这个表单怎么和别的不一样”的困惑。错误提示从“无效输入”变成“密码必须至少 8 个字符长”，直接对应更低的提交失败率和更少的客服工单。而组件决策树这类知识一旦被团队吸收，会成为比代码更持久的资产——下次换技术栈时，判断逻辑依然成立。
7. 常见问题 FAQ
Q1：这个技能怎么安装？需要付费吗？
在支持技能机制的 AI 客户端中，用「表单构建」或 building-forms 搜索并一键启用即可，也可尝试用技能ID 13441 定位。具体的安装入口、命令与是否收费，各平台规则不同，请以官方说明为准。安装后在对话中问一个选型问题即可验证是否生效。
Q2：它适合谁用？ 前端工程师、全栈开发者、Python 后端开发者最直接受益；产品经理和交互设计师可以用它做表单流程与错误文案的前期决策；需要做无障碍整改的团队也能用它当检查清单。完全不做表单开发的人用不上。
Q3：它和 AI 编程助手、UI 组件库文档怎么选？ 三者不冲突。组件库文档解决“这个属性叫什么”，AI 编程助手解决“给我一段能跑的代码”，表单构建Skill 解决“为什么这么设计、验证该在什么时候触发、无障碍还差什么”。推荐顺序是先用它定方案，再用组件库文档落地细节，必要时让编程助手补样板代码。
Q4：它会替我写后端校验吗？ 技能提供了 Python 侧 Pydantic 与 FastAPI 的校验模式参考，能给出字段约束和自定义校验器的实现思路。但业务规则、数据库唯一性判断、风控策略这些必须由你提供，技能不会凭空知道你的业务约束。
Q5：照着做完就一定能通过 WCAG 2.1 AA 吗？ 技能给出的是经过整理的合规模式与清单，能覆盖绝大多数高频问题，比如标签关联、错误播报、键盘导航、焦点可见。但无障碍验收涉及真实辅助技术的实际表现，仍建议用屏幕阅读器配合键盘做一轮实测，必要时请专业无障碍人员复核。