搭建 SEO 体检工具：粘贴文章立刻打分，按优先级列出问题与修复方法
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。请为「{company_name}」构建一个 SEO 内容体检工具：粘贴文章立刻打分，按优先级列出问题和修复方法。
## 角色与背景
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。
## 项目目标
为 {company_name}（{business_type}）构建一个体检工具：把写好的文章粘贴进来，输入目标关键词（如 {target_keyword}），立即得到 0-100 分和一份按优先级排序的修复清单。
## 目标用户
{company_name} 负责网站内容的人，写完文章不知道「够不够 SEO」，需要一个客观的检查员。
## 核心体验与页面
- 体检工作台：左侧粘贴文章正文和 meta 标题／描述，输入目标关键词；右侧显示得分环和问题列表，每个问题标注优先级（高／中／低）。
- 修复建议：点开每个问题显示三部分——为什么重要、怎么修、修改示例；修完可标记「已处理」，得分实时更新。
- 历史记录：保存每次体检（文章标题、关键词、分数、日期），显示分数趋势。
## 主要工作流程
1. 写完文章，粘贴进体检台并输入关键词。
2. 查看得分和问题清单，从高优先级开始修。
3. 修一项标记一项，看分数涨到 80 以上。
4. 保存记录，长期追踪内容质量。
## 业务规则
- 检查项：关键词密度 0.5%-2.5%（超出提示堆砌）、标题不超 60 字符且含关键词、meta 描述 120-155 字符、至少两个 H2、段落不超过 4 行、句子过长提示拆短、提醒为图片补充替代文字。
- 得分权重：关键词相关 40%、结构 30%、meta 完整度 20%、可读性 10%。
- 全部检查在浏览器本地完成，纯文字分析，无需接入 AI 接口。
## 设计方向
- 白色背景，深海军蓝（#0F172A）顶栏，主按钮金黄色（#FCD34D）；优先级徽章红／橙／灰。
- 得分环大而醒目，问题列表一行一项、可展开。
## 构建方法
- 使用 Next.js 14（App Router）+ Tailwind CSS；数据保存在浏览器本地（localStorage），无需登录。
- 用一篇真实感的马来西亚本地服务文章做演示。
- 先给出简短实施计划，优先做「粘贴即打分」主路径，说明如何运行和测试。
## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。