多语言站点代码生成调试清晰框架提示词

角色定义与任务定位

请以“全栈开发工程师兼多语言架构师”的身份，运用此提示词方案。你的核心目标是：系统化地生成结构清晰、符合多语言（i18n）最佳实践的站点代码，并建立高效的调试与问题定位框架，确保代码的可维护性与国际化适配的准确性。

适用场景

• 为支持多语言的新建网站生成核心页面模板（如首页、产品页）。
• 为现有项目添加新的语言支持，重构或生成对应的国际化资源文件与组件。
• 调试多语言站点中出现的特定问题，如文本溢出、布局错乱、翻译缺失或路由错误。
• 设计统一的多语言数据获取、状态管理与字符串格式化工具函数。

核心提示词

以下提示词可直接组合或单独使用，作为向AI编程助手或代码生成工具发出的指令：

• 生成多语言路由组件：“使用Next.js App Router，生成一个支持`/en`、`/zh`、`/ja`路径的动态路由布局组件。包含语言切换器UI，使用`next/navigation`实现路由跳转与状态同步。”
• 生成国际化资源结构：“创建基于JSON或YAML格式的国际化资源目录结构。要求按语言代码（如`locales/en/`）组织，并包含`common.json`（通用词条）、`homepage.json`（页面特定词条）示例。”
• 生成字符串格式化函数：“编写一个React Hook `useTranslation`，它能接收命名空间参数，从上下文中获取当前语言，并返回`t(key)`函数。处理词条缺失时的回退逻辑（如降级到默认语言）。”
• 调试布局与文本问题：“分析以下CSS代码，指出可能导致长德语词条破坏Flexbox布局的原因，并提供修复方案，确保容器能自适应不同语言文本长度。”
• 生成多语言SEO元标签：“为React组件生成``内的多语言SEO元标签，包括`lang`属性、`hreflang`链接以及针对不同语言的标题和描述的动态设置。”

风格方向

• 代码风格：采用模块化、函数式编程风格。代码应包含清晰的注释，特别是关于国际化逻辑的部分。优先使用现代ES6+语法和异步数据获取模式。
• 架构风格：倡导“配置与代码分离”，将语言包、路由配置等抽离为外部配置文件。鼓励使用Context或专门的状态管理库（如Zustand）来管理语言状态。
• 文件组织风格：遵循“按功能与语言联合组织”的原则，例如：`/components/`下存放通用组件，`/locales/`下存放所有语言资源，结构清晰，便于扩展新语言。

构图建议（代码结构）

• 分层结构：构建“用户界面层 -> 业务逻辑层 -> 数据/配置层”。UI层调用统一的翻译函数；逻辑层处理语言切换与数据映射；配置层集中管理词条与路由表。
• 入口点设计：在应用入口（如`_app.js`或根布局）包裹语言提供者（Provider），确保语言状态全局可用。
• 动态加载构图：对于大型站点，采用代码分割，按语言或路由动态加载对应的语言包资源，优化首屏加载性能。

细节强化

• 字符与排版：在CSS中为不同语言字体族设置回退方案（如中文字体与西文字体）。特别注意对RTL（从右向左）语言（如阿拉伯语）的布局支持声明。
• 占位符与变量：在语言词条中，使用命名插值（如`{userName}`）而非位置插值，提高可读性与维护性。明确标注词条上下文，避免一词多义导致翻译错误。
• 错误处理：在调试提示词中，强调加入错误边界（Error Boundaries）以捕获语言资源加载失败，并定义清晰的错误日志格式，包含语言代码、词条键名等信息。
• 日期、数字与货币格式化：提示生成或集成专门的格式化工具库（如`date-fns`、`Intl` API），确保这些元素能随语言切换自动适应本地化格式。

使用建议

• 将“核心提示词”作为与AI编程助手对话的起点，根据具体技术栈（React、Vue、Angular等）替换框架关键词。
• 在生成代码后，使用“调试布局与文本问题”类提示词进行针对性测试与优化，尤其关注长文本和特殊字符场景。
• 实践时，先利用提示词搭建最小可行原型（如一个支持两种语言的页面），验证框架流程，再逐步扩展。
• 将生成的“国际化资源结构”与团队共享，作为项目多语言开发的规范基础，保持词条文件格式统一。