Design Skill Arena

{MODEL_NAME} = 当前模型名称
{MODEL_SLUG} = 当前模型标识

当前使用模型是：{MODEL_NAME}
当前模型标识是：{MODEL_SLUG}

你现在接手已有项目：Design Skill Arena。

你的任务范围非常严格：

只允许新增当前模型的一套独立 showcase 页面。
不要修改首页。
不要修改首页卡片。
不要修改模型筛选。
不要修改分页。
不要修改 i18n。
不要修改全局展示逻辑。
不要覆盖已有 showcase 页面。
不要重构项目架构。

最后由另一个维护者统一汇总接入首页。

你只需要做：
1. 为当前模型生成 18 个独立 Muse showcase 页面
2. 每个页面中显式显示模型名称标签：{MODEL_NAME}
3. 每个页面中显式显示对应 skills / chain 名称
4. 每个页面必须能独立打开
5. 每个页面必须有真实交互
6. 每个页面必须适配移动端

推荐新增目录：

src/components/model-showcases/{MODEL_SLUG}/

每个组合一个文件，例如：

src/components/model-showcases/{MODEL_SLUG}/standard-builder.tsx
src/components/model-showcases/{MODEL_SLUG}/visual-frontend.tsx
src/components/model-showcases/{MODEL_SLUG}/design-logic.tsx
...
src/components/model-showcases/{MODEL_SLUG}/max-quality-chain.tsx

推荐新增独立预览路由：

/model-showcase/{MODEL_SLUG}/{showcaseId}

例如：
/model-showcase/{MODEL_SLUG}/standard-builder
/model-showcase/{MODEL_SLUG}/visual-frontend
/model-showcase/{MODEL_SLUG}/max-quality-chain

如果当前项目已有其他适合的独立预览路由，可以沿用，但必须满足：
- 不覆盖已有页面
- URL 能区分模型和 showcaseId
- 页面可直接打开

截图建议保存到：

public/model-screenshots/{MODEL_SLUG}/{showcaseId}/desktop.png

不要改现有 public/screenshots，避免覆盖其他模型封面。

基础产品需求固定：

创建一个名为 Muse 的单页面 AI Campaign Studio。
用户是一名创意总监，需要用它为新品发布生成营销活动方案。

每个 Muse 结果页必须包含：
- Campaign Brief 输入
- 目标人群、渠道、语气、视觉风格等控件
- 大型主创意预览
- 三个可切换创意方案
- Reach、CTR、Conversion 预测指标
- Activity / 最近操作
- Generate、Save、Export 操作
- Loading、Success、Error、Selected、Hover、Focus 状态
- Desktop 和 Mobile 响应式布局

必须实现：
- 点击 A / B / C 创意方案后，主预览和指标变化
- 点击 Generate 后显示生成中，再进入成功或错误状态
- 修改控件后，主预览内容有可见变化
- 使用本地 mock data，不连接后端
- 每个结果页独立展示，不 iframe 嵌套

最重要规则：

当前模型的 18 个组合必须当成 18 个独立新项目生成。

也就是说：
- 18 个组合只共享同一个 Muse 产品需求
- 每个组合必须独立做需求理解、交互拆解、布局规划和视觉方向
- 不允许复用其他模型的页面实现
- 不允许复用当前项目已有 showcase 页面实现
- 不允许 18 个组合套同一个模板
- 不允许只是换颜色、换背景、换标题
- 每个页面都应该像当前模型独立设计出来的结果
- skills / chain 的差异必须体现在：
  - 页面结构
  - 信息架构
  - 主视觉方式
  - 控件组织
  - 交互状态
  - 响应式策略

18 个组合如下：

01 Standard Builder
frontend-app-builder

02 Visual Frontend
frontend-skill

03 Design Logic
frontend-design

04 Impeccable Full Flow
impeccable

05 Artifact Builder
web-artifacts-builder / artifacts-builder

06 UX Pro Reference
ui-ux-pro-max

07 Component System
shadcn-best-practices / shadcn

08 Motion Bits
react-bits

09 Standard + Taste
frontend-app-builder + taste-skill

10 Standard + Impeccable
frontend-app-builder + impeccable

11 Visual + Taste
frontend-skill + taste-skill

12 Visual + Impeccable
frontend-skill + impeccable

13 Design + UX Pro
frontend-design + ui-ux-pro-max

14 Design + Impeccable
frontend-design + impeccable

15 Balanced Chain
frontend-app-builder + taste-skill + impeccable

16 Visual Premium Chain
frontend-skill + taste-skill + impeccable

17 Product Polish Chain
frontend-app-builder + shadcn-best-practices + web-interface-guidelines + impeccable

18 Max Quality Chain
frontend-design + ui-ux-pro-max + web-interface-guidelines + impeccable

页面内要求：
- 每个页面顶部或明显位置必须有模型名称标签：{MODEL_NAME}
- 每个页面顶部或明显位置必须有 skills / chain 标签
- 不要写评分
- 不要写排名
- 不要写结论
- 不要写“最佳”
- 不要把需求分析写成 UI 说明文

执行流程：

1. 先阅读当前项目结构，只为确认技术栈和可新增目录。
2. 新增当前模型专属目录。
3. 新增当前模型专属独立路由。
4. 生成 18 个独立页面。
5. 每个页面都显示 {MODEL_NAME} 标签和对应 skills / chain 标签。
6. 每个页面都实现真实交互。
7. 每个页面都适配移动端。
8. 不修改首页。
9. 不修改现有 showcase 数据。
10. 不覆盖现有截图。
11. 为 18 个页面保存截图到 public/model-screenshots/{MODEL_SLUG}/{showcaseId}/desktop.png。
12. 输出新增页面 URL 列表，方便后续汇总接入。
13. 运行 typecheck、lint、build。

限制：
- 不要修改首页
- 不要修改首页展示数据
- 不要修改模型筛选
- 不要修改分页
- 不要修改 i18n
- 不要覆盖现有页面
- 不要覆盖现有截图
- 不要重新初始化项目
- 不要 iframe
- 不要评分、排名、结论
- 不要做普通 Landing Page
- 不要把 18 个页面做成同一套模板