搭建博客写作工作台：从大纲到成稿，SEO 检查清单实时打分，一键导出发布
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。请为「{company_name}」构建一个博客写作工作台：从大纲到成稿一条龙，SEO 检查清单实时打分，一键导出发布。
## 角色与背景
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。
## 项目目标
为 {company_name}（{company_industry}）构建一个写作工具：输入主题和关键词生成文章大纲，边写边看 SEO 得分，完稿导出可直接发布的格式。
## 目标用户
{company_name} 负责内容的老板或员工，想靠博客带来 {primary_keyword} 相关的搜索流量，但不懂 SEO 规则。
## 核心体验与页面
- 文章策划：输入主题、目标读者和关键词，生成三个标题选项、H2/H3 大纲、开头段草稿和常见问题（FAQ）小节建议。
- 写作编辑器：按小节写作，显示总字数；右侧 SEO 清单实时打分（0-100）：关键词出现在标题／前 100 字／至少一个 H2、正文超过 1200 字、内链至少 2 条、meta 标题不超 60 字符、meta 描述 120-155 字符（带字数条）。
- 文章库：草稿列表（状态：草稿／已发布），支持复制全文、导出 Markdown 或 HTML。
## 主要工作流程
1. 输入主题和 {primary_keyword}，挑一个标题和大纲。
2. 按小节把内容写进编辑器，随时看右侧得分。
3. 按清单逐项修到 80 分以上。
4. 填好 meta 标题和描述，导出发布。
## 业务规则
- 得分权重：关键词布局 40%、篇幅 20%、内链 20%、meta 完整度 20%。
- 关键词密度超过 2.5% 时提示「堆砌」，建议用同义词替换。
- 单句超过 25 个词（或 50 个汉字）标黄，提示拆短。
- 大纲生成逻辑用内置行业模板加规则即可，无需接入 AI 接口。
## 设计方向
- 白色背景，深海军蓝（#0F172A）顶栏，主按钮金黄色（#FCD34D）；得分环绿／橙／红三档。
- 编辑区留白充足、字号舒适，接近写作软件的专注感。
## 构建方法
- 使用 Next.js 14（App Router）+ Tailwind CSS；数据保存在浏览器本地（localStorage），无需登录。
- 用真实感的马来西亚服务业示例文章演示。
- 先给出简短实施计划，优先做「编辑器＋实时打分」主路径，说明如何运行和测试。
## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。