项目

Design Skill Arena

静态展示站,用同一个 Muse AI Campaign Studio brief 对比多模型与前端设计 skill chain 生成的真实页面输出,支持独立结果页、筛选和方法查看。

我的项目 线上运行产品设计 / 前端实现 / 部署AI 前端设计展示站开源项目AI前端设计Skill ChainNext.jsCloudflare静态站设计评测

介绍

Design Skill Arena 是一个面向产品构建者、prompt 作者、设计师和工程师的静态展示站。它固定同一个 Muse AI Campaign Studio 页面需求,把不同 AI 模型和前端设计 skill chain 的输出放在同一浏览结构里,方便逐个打开、横向观察和复盘生成差异。

技术栈

Next.jsTypeScriptTailwind CSSshadcn/baseCloudflare PagesCloudflare R2

项目定位

这个项目不是排行榜,而是一个可复查的前端设计输出展厅。它把同一产品页面题目下的多条 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 承载,前台展示不依赖后台服务。

截图