Canonical: https://botbento.com/zh/usecases/prototyping-ui-components-with-automated-test-validation/
Format: Markdown representation of the public HTML page.

[首页](/) / [用例](/zh/usecases/) / [编程](/zh/usecases/?category=coding)

编程 · 中级

已验证

自动化验证

- 已通过全部自动化关卡：结构校验、唯一性、HTTPS 与来源链接可访问、提示注入与安全扫描、审批步骤规则。
- 未记录起草模型。
- 第二模型审核：deepseek-v4-pro（无严重或高危问题）。
- 简体中文译文：google/gemini-4-argon，由 openai/gpt-5.5 审核。
- 验证于 2026-10-16。
- 仅经自动化检查和 AI 审核，未经人工审核。[验证如何运作](/zh/usecases/verification/)

# 结合自动化测试验证构建 UI 组件原型

通过结构化规范与自动化检查构建交互式用户界面原型

[在 BotBento 中使用 ](https://app.botbento.com/?ref=usecases&utm_source=botbento.com&utm_medium=usecases&utm_campaign=prototyping-ui-components-with-automated-test-validation)复制提示词分享[Markdown](/text/zh/usecases/prototyping-ui-components-with-automated-test-validation/index.md)[English](/usecases/prototyping-ui-components-with-automated-test-validation/)

打开 BotBento。请将提示词粘贴到 Bot 中；不含任何预设配置。

- 你提问时触发提交组件需求
- 然后起草规范并运行测试构建
- 结果已验证的组件代码

仅靠单次代码生成来创建交互式界面小部件，往往会导致布局缺陷和语法错误。此工作流通过在技术规范文档中明确需求、渐进式实现组件，并在交付代码前运行语法检查和无头浏览器测试来确认渲染效果。

## 起步提示词

BotBento推荐

```
当受命构建或更新用户界面组件时，请先创建或更新一份结构化规范，概述 props、state、布局行为和边界情况。请渐进式编写代码，而不是从头重新生成整个文件。在展示更新之前，使用终端运行构建命令、代码检查工具（linter）和无头测试，以验证语法和渲染效果。在将代码推送到 GitHub 或修改生产分支之前，务必请求确认。
```

复制

## 所用工具

浏览器GitHub终端

## 适用于

BotBento

## 标签

- frontend
- prototyping
- testing
- javascript

## 来源

[Ask HN: Why is my Claude experience so bad? What am I doing wrong?](https://news.ycombinator.com/item?id=47000206)
Hacker News · 已核查 2026-10-15

内容以我们自己的话概述。其中描述的任何结果均为原作者所述，并非 BotBento 实测。

由 AI 辅助自英文版翻译，并经自动审核模型检查。以英文文本为准。

作者：BotBento Editorial · 发布于 2026-10-15 · 更新于 2026-10-15 · [提交更正](/contact/)

## 相关用例

-

编程中级

## [本地代码更改的自动化 UI 验证](/zh/usecases/automated-ui-verification-for-local-code-changes/)

启动本地服务器并为前端更改捕获浏览器证据

浏览器终端GitHub[已验证](/zh/usecases/verification/)
-

编程入门

## [通过自然语言构建轻量级个人 Web 应用](/zh/usecases/building-lightweight-personal-web-apps-from-natural/)

通过对话式迭代，将小型单页工具的构想转化为可运行的本地 Web 项目

终端浏览器[已验证](/zh/usecases/verification/)
-

编程中级

## [浏览器内网页原型设计与代码执行](/zh/usecases/in-browser-web-prototyping-and-code-execution/)

在交互式浏览器环境中构建和测试轻量级网页应用程序

终端浏览器聊天[已验证](/zh/usecases/verification/)