Google Ads 广告文案工作台

你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。请为「{advertiser_name}」构建一个 Google Ads 广告文案工作台：一次生成 15 条标题和 4 条描述，实时检查字数，直接导出投放。

## 角色与背景
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。

## 项目目标
为 {advertiser_name}（{business_type}）构建一个响应式搜索广告（RSA）文案工具：围绕 {target_keyword} 批量生成合规文案，字数即时校验，并以广告预览呈现效果。

## 目标用户
{advertiser_name} 的老板或营销负责人，自己投 Google 广告，不熟悉 RSA 的字数和数量要求。

## 核心体验与页面
- 文案工作台：填入产品卖点、促销信息和关键词，生成 15 条标题（上限 30 字符）和 4 条描述（上限 90 字符），每条带实时字数条（接近上限变橙、超标变红并禁止保存），并标注角度标签（促销／信任／急迫／本地）。
- 广告预览：以 Google 搜索结果样式实时预览任意标题＋描述组合。
- 广告组管理与导出：按产品保存多组文案，一键全选复制或导出 CSV。

## 主要工作流程
1. 填入业务信息、关键词和本期促销。
2. 生成整组文案，逐条微调，超标的当场改短。
3. 用预览确认观感，保存为广告组。
4. 导出后粘贴进 Google Ads 后台投放。

## 业务规则
- 标题至少 3 条包含 {target_keyword}，至少 2 条包含数字或优惠，至少 2 条是行动号召。
- 禁用 Google 不允许的绝对化用语（如「第一」「最好」），检测到即提示替换。
- 描述必须以行动号召结尾；字数校验按字符计算，中英文都要准确。
- 生成逻辑用内置文案模板加规则组合即可，无需接入 AI 接口。

## 设计方向
- 白色背景，深海军蓝（#0F172A）顶栏，主按钮金黄色（#FCD34D）；字数条绿／橙／红三色状态。
- 表格式排版，密度适中，方便逐条扫读。

## 构建方法
- 使用 Next.js 14（App Router）+ Tailwind CSS；数据保存在浏览器本地（localStorage），无需登录。
- 用真实感的马来西亚本地服务业示例数据演示。
- 先给出简短实施计划，优先做「文案工作台＋字数校验」主路径，说明如何运行和测试。

## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。