Canonical: https://botbento.com/zh/usecases/migrating-legacy-web-templates-into-modern-components/
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/)

# 将旧版网页模板迁移为现代化组件

遵循严格的架构规则，将服务端渲染的标记转换为模块化的前端组件

[在 BotBento 中使用 ](https://app.botbento.com/?ref=usecases&utm_source=botbento.com&utm_medium=usecases&utm_campaign=migrating-legacy-web-templates-into-modern-components)复制提示词分享[Markdown](/text/zh/usecases/migrating-legacy-web-templates-into-modern-components/index.md)[English](/usecases/migrating-legacy-web-templates-into-modern-components/)

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

- 你提问时触发提交模板与样式指南
- 然后起草组件拆分规划
- 结果展示重构后的组件文件

通过将旧版模板和脚本转换为整洁、可复用的组件层级结构，加速代码库现代化。Bot 会梳理组件架构、清理冗余嵌套、更新样式规范，并起草配套的组件定义以供工程人员人工审查。

## 起步提示词

BotBento推荐

```
分析提交的旧版模板以及提供的目标样式指南。在生成任何组件文件之前，提供一份结构规划，将标记拆分为语义化、可复用的组件。等待用户确认该规划。获得批准后，编写重构后的组件定义，应用语义化标签和模块化样式。如果已配置，通过终端运行本地格式化检查。未经明确批准，切勿将更改提交或推送到代码库。
```

复制

## 所用工具

聊天GitHub终端

## 适用于

BotBento

## 标签

- refactoring
- frontend
- migration
- templates

## 来源

[Ask HN: How can I get better at using AI for programming?](https://news.ycombinator.com/item?id=46255285)
Hacker News · 已核查 2026-10-15

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

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

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

## 相关用例

-

编程中级

## [分析代码依赖关系与符号影响](/zh/usecases/analyzing-code-dependencies-and-symbol-impact/)

映射跨仓库的符号关系并检查架构影响范围

聊天GitHub终端[已验证](/zh/usecases/verification/)
-

编程中级

## [基于运行时错误的自动代码优化](/zh/usecases/automated-code-refinement-from-runtime-errors/)

分析运行时回溯信息，生成候选补丁，并迭代优化故障代码片段

终端GitHub聊天[已验证](/zh/usecases/verification/)
-

编程中级

## [自主代码库重构与缺陷修复](/zh/usecases/autonomous-repository-refactoring-and-bug-fixing/)

通过受引导的终端操作实现软件功能并调试代码库

聊天终端GitHub[已验证](/zh/usecases/verification/)