Playground

全部项目与实验

  • Brooch Shop

    ● LIVE

    AI AGENT · E-COMMERCE

    Brooch Shop

    筛选器解决不了的问题，Agent 从这里开始。用 Claude API + tool calling 构建的 AI 导购 agent，演示自然语言意图理解如何替代传统多级筛选。

    GitHub →查看 Demo →
  • Prompt Shop

    ● LIVE

    CHECKOUT · STRIPE

    Prompt Shop

    完整电商购物流程实验场，Stripe Checkout 集成，覆盖从商品列表到支付完成的全链路。

    GitHub →查看 Demo →
  • Human vs AI Judge

    ● LIVE

    AI · GAME · E-COMMERCE

    Human vs AI Judge

    当 AI 已经做出判断，谁来按那个确认键？与 AI 同场竞技，对真实电商售后工单做意图分类，实时对比人类、Claude、GPT 三方判断差异。

    GitHub →查看 Demo →
  • Readable & Shareable

    ● LIVE

    CLAUDE CODE · SKILL · VISUALIZATION

    Readable & Shareable

    你写了好文章，但大多数人不会点开链接。Claude Code `/viz` skill：自动识别文章结构，生成思维导图、交互 HTML、图片卡片等可分享产出，每种形式都链回原文，让不同受众找到自己的入口。

    GitHub →查看 Demo →
  • Particle Flow Generator

    ● LIVE

    CANVAS · SIMULATION

    Particle Flow Generator

    把时间垒进空间里。用粒子流模拟用户轨迹的空间残留——Canvas 2D 实时渲染，BFS 流场寻路，支持参数调节与 GIF 导出。

    GitHub →查看 Demo →
  • SSB Website

    ● LIVE

    DESIGN ENGINEERING · FRAMER MOTION

    SSB Website

    从零搭建的 B2B 营销站设计工程练习。四页完整实现，含自定义物理弹跳动效 hook（速度向量 + 边界反射）、响应式布局与 Framer Motion 动画。Lighthouse 性能 91 / 无障碍 96 / SEO 100。

    GitHub →查看 Demo →
  • Design Token Signals

    ◇ EXPERIMENT

    DESIGN SYSTEM · EXPERIMENT

    Design Token Signals

    设计令牌不只是存储数值，它们携带意义。一个用于分析 design token 组合所传达视觉信号的实验工具——映射颜色、圆角、字重的语义，在组件开发之前识别视觉冲突。

    GitHub →查看 Demo →
  • EaseBuy

    ◆ HACKATHON ★ TOP 10

    UX DESIGN · E-COMMERCE · MOBILE

    EaseBuy

    UXcel × UX Pilot 竞赛 Top 10 获奖作品。以「无感购物」为核心，11 个页面覆盖完整电商链路——极简留白、卡片式信息架构、透明结算流程。用 AI 辅助完成从线框到高保真的全流程。

    查看提交 →
  • Spec-Driven Scenario Updater

    ◆ HACKATHON

    AI AGENT · GITLAB HACKATHON

    Spec-Driven Scenario Updater

    GitLab AI Hackathon 参赛项目。以「规格鸿沟」为切入点——业务逻辑在产品、设计、开发之间反复翻译导致的失真。用单一 spec 数据源驱动 AI 自动生成代码、测试与文档。

    GitLab →看介绍视频 →查看提交 →