静态展示站,用同一个 Muse AI Campaign Studio brief 对比多模型与前端设计 skill chain 生成的真实页面输出,支持独立结果页、筛选和方法查看。
介绍
Design Skill Arena 是一个面向产品构建者、prompt 作者、设计师和工程师的静态展示站。它固定同一个 Muse AI Campaign Studio 页面需求,把不同 AI 模型和前端设计 skill chain 的输出放在同一浏览结构里,方便逐个打开、横向观察和复盘生成差异。
技术栈
项目定位
这个项目不是排行榜,而是一个可复查的前端设计输出展厅。它把同一产品页面题目下的多条 skill chain 结果集中展示,让差异回到页面结构、视觉语言、状态覆盖和工程完成度本身。
浏览结构
首页以模型和组合为筛选维度,卡片展示截图、skill chain、标签和结果入口;详情页保持独立路由,便于把单个结果作为真实页面打开检查。
工程实现
项目使用 Next.js App Router、TypeScript、Tailwind CSS 和 shadcn/base UI primitives,生产版本通过 Cloudflare Pages 静态发布,截图资源可由 Cloudflare R2 承载。
要点
- 固定同一个 Muse AI Campaign Studio 需求,避免每个模型面对不同题目导致比较失真。
- 每张卡片都打开真实、独立的结果页,方便检查布局、交互状态、响应式和视觉完成度。
- 站点保留筛选、组合、方法说明和 skill 文档入口,重点是浏览与复盘,不做分数排名。
- 使用 Next.js 静态导出和 Cloudflare Pages/R2 承载,前台展示不依赖后台服务。
截图