全部作品

个人项目

Design Skill Arena

线上运行

同一产品 Brief 下的多模型与 Skill Chain 前端作品展厅,保留真实页面、截图、交互和设计来源,支持按模型或组合筛选。

访问 Arena 查看源码
类型
个人项目
状态
线上运行
我的角色
产品设计 / 前端实现 / 部署
获取方式
开源项目
技术栈
  • Next.js
  • TypeScript
  • Tailwind CSS
  • shadcn/base
  • Cloudflare Pages
  • Cloudflare R2
Design Skill Arena 项目封面
Design Skill Arena 项目封面

关于项目

由我独立开发和维护的 AI 前端作品对照展厅。每个作品拥有可独立打开的实现页面,访客可以比较信息层级、响应式、交互和视觉呈现。模型、Skill Chain、当前作品与语言可通过 URL 分享;作品展示与严格基准评测有不同边界,缺失的生成日期和版本信息如实标记。

项目定位

这个项目不是排行榜,而是一个可复查的前端设计输出展厅。它把同一产品页面题目下的多条 skill chain 结果集中展示,让差异回到页面结构、视觉语言、状态覆盖和工程完成度本身。

浏览结构

首页以模型和组合为筛选维度,卡片展示截图、skill chain、标签和结果入口;详情页保持独立路由,便于把单个结果作为真实页面打开检查。

工程实现

项目使用 Next.js App Router、TypeScript、Tailwind CSS 和 shadcn/base UI primitives,生产版本通过 Cloudflare Pages 静态发布,截图资源可由 Cloudflare R2 承载。

项目要点

  1. 同一产品 Brief 下保留多模型、不同 Skill Chain 的真实独立实现,供直接体验和比较。

  2. 作品详情展示截图、设计意图、Skill 来源与组合上下文,另提供可交互页面入口。

  3. 筛选、分页、作品与语言进入 URL,支持分享与浏览器前进后退。

  4. 以 Next.js / TypeScript 构建,使用 Cloudflare Pages 发布和 R2 承载图片资源。

  5. 不设置模型综合分或排名;无法证实的生成日期、版本等信息如实标注。

相关主题

  • AI前端设计
  • Skill Chain
  • Next.js
  • Cloudflare
  • 静态站
  • 设计评测

On the loom — screens

项目实览

Design Skill Arena 首页展示多模型和 skill chain 结果卡片
首页展示模型与组合筛选、结果卡片和独立页面入口。
Esc