396 件 AI 创作案例 从可运行前端，到真实影像与产品叙事
这里不是一张作品截图墙，而是一座持续生长的 AI 创作档案馆：100 个可运行单文件， 加上258 条飞书案例与38 条 Claude Fable 5.5 案例，覆盖交互实验、品牌视觉、影像叙事、知识讲解与工程复现。 每条内容都经过整理、分类与边界标注——打开就能看，动手就能玩，值得反复回来探索。
可运行单文件的创作能力分布
下面三块面板聚焦 100 个可运行单文件（Claude 侧），是 396 条总案例中的前端实验样本。 飞书案例集与 Fable 案例以视频与图像为主、没有技术栈标签，因此不参与技术栈与交叉分布统计—— 把它混进来只会让「技术栈使用率」变成一张假的图。 这组样本集中在同一个能力面上： 用 Canvas / SVG / CSS 3D / Web Audio 在一个页面里造出完整的体验。
美学分类分布
技术栈使用率
分类 × 技术栈 交叉分布
这批案例是什么，又不是什么
可运行单文件（100 个，属于 396 条总案例）——单个 .html 文件，内联了全部 CSS 与 JS，
不引用任何外部库、外部图片或字体，双击就能打开。它们集中在同一个能力面上：
用 Canvas 2D / SVG / CSS 3D / WebGL / Web Audio 在一个页面里造出完整、可交互的体验。
每条都给出大白话解读（创意意思 / 妙处所在 / 可借鉴之处）、
完整实现细节（作品全貌 / 技术要点 / 交互说明），以及生成它的原始提示词。
提示词原文为英文，本站为每一条都提供了中文译文，在详情面板里一键切换。
飞书案例集（258 条）——产品宣传片、品牌视觉、影像实验、知识讲解与工程复现， 以视频与图像为主。这批资料最有价值的部分是每条都附「证据与边界」： 明确写出哪些能证实、哪些不能，避免把「成片很漂亮」误读成「功能已被验证」。 视频可在站内全屏播放；尚未完成转码的条目会标注「视频待转码」并给出原帖入口。
Claude Fable 5.5 案例（38 条）——独立策展的第二组飞书资料，覆盖影像叙事与视觉实验、 产品与品牌宣传片、可交互角色与物理演示、三维场景与体素、科学讲解与人文叙事。 结构与飞书案例集一致：同样是视频成片，同样附「证据与边界」，同样可在站内播放并参与四维评分排行。
各类案例都按创意度 / 技术难度 / 实用价值 / 视觉表现四个维度打过编辑评分， 可在评分榜按维度排序查看。 作品版权归各原作者所有，本站仅作整理、索引与品鉴解读。