我这几天疯狂测试 Fable 5 的能力。目前重点聚焦它的游戏开发能力和网页设计能力，复杂的项目编程这个不用测，它肯定是 No. 1。
游戏方面我已经让他做了好几种模式了，之前做了坦克大战，然后做了大模型大逃杀，大模型塔防，还做了一个类似拳皇的格斗类游戏。这些我都会慢慢分享。
因为游戏的核心其实是游戏引擎和玩法，所以我是先快速让 Fable 帮我把这部分完成，细节留给 Opus 4.8 慢慢去调。调起来是要点时间的，得慢慢来，以后会一个一个分享。
今天主要是来看一下 Fable 的网页设计能力！
我随手做了几个例子，效果都很赞！
今天分享两个例子，我估计是看了都想要模板系列。
1、图解大模型概念
因为最近在让 Fable 5 设计大模型相关概念的游戏，所以里面涉及到了很多比较抽象的概念。如何向普通人解释这个概念是一个大问题。比如上下文压缩，大模型幻觉，API Key，缓存命中......。
所以我想做一个科普 PPT，先把这几个概念介绍一下！
但是，我是从来不用 PPT 的人，我电脑上 Office 都没有打开过！所以，我不会 PPT，我也不会选择使用本地版 PPT 软件，太笨重了。
所以我准备让 Fable 5 给我开发一个可以互动教学的"网页版 PPT"！
我当时其实并没有想好具体要如何设计，要做成什么样子，要有哪些元素，这些东西想明白也挺困难。
所以我是这么开始的：
我们这个项目主要是围绕大模型相关的知识点来制作游戏的。
我现在希望你做一个交互式的网站。网页上使用全屏PPT的形式，一个页面一个知识点，用形象生动的图形和交互来展示各种和AI相关的知识，比如上下文，APIKey,幻觉，上下文压缩。
核心概念可以参考这里AI_model_game_concept.md的概念部分，你也可以扩展一些。
UX效果一定要好，然后很好的规划内容和布局，容易理解。
创建一个独立的子目录在放置这个项目。我就直接把这段话扔给它：
先试试水，看它能搞出什么东西来，不满意就慢慢调整吧！
很多专业人士可能会用非常细致的提示词来控制结果，我都是脚踩西瓜皮划到哪里是哪里。因为以我的设计能力如果要用细节去控制的话，基本上我会成为那个拖后腿的人，还不如让 Fable 自己发挥，不要限制他就行。
没想到，它的第一个版本就近乎完美！
一看到这个首页我就爱了！看了一下内容也不错。基本上优化一下内容，就直接可以用了。
因为我是 Claude 爱好者，所以我非常喜欢 Claude 网页的设计风格，我就尝试让他帮我改一下这个主题风格。
言出法随：
没有任何反复，不需要一大堆提示词，不用告诉它去哪里抄答案。
就是一句话的事儿！
继续提需求：我要去讨好小女生，帮我做个女生版。
言出法随：
一个粉嫩的版本就出现了！
改主题太简单了，我要一个 SVG 图片交互的版本。
依旧是一句话的事情：
这个版本已经做了排版的变化。左边是文字，右边是图片。这个图片是可以动的。依旧是全屏 PPT 的形式，可以按键盘翻页，也可以点击小图标翻页，然后每页都有页码！
刚才看的都是首页，下面来看看它的内页。
第一个版本第一个主题的第一个页面。
它显示解释了一个最基础的概念------Token。
整个界面分成了几个区域，左上角是有两种分批色的大标题，然后下面有一行解释，中间的是这个概念的具象化解释，下方是需要记住的知识点，然后右边是翻页图标，右下角是页码。
一个非常完整的结构。
其中很多页面都是可以点击交互的：
比如这个压缩上下文的概念，只要点一下那个按钮，就会有一个动画，把上面的 8 个信息压缩成两条。
上面的上下文内容，按钮，数字，解释，这些都是会联动调整的！
它总共规划了 13 个页面，所有内容细节，动画效果全部自主完成。
SVG图文版的效果就更赞了：
左边是内容解释，右边就直接是交互动画。比如这个 Tokens 的解释。就是左边一个小车子开过去，然后被切割成了不同的块。
比如这个温度（Temperature）的概念：
这个效果非常赞，它这里有两种动画，一种是拖动滑块，右边的饼图和概率数据会自动调整。第二个是幸运大转盘，当你说"今天天气真---"，后面会出现词是根据概率分配的。就像转幸运大转盘一样。有可能是"好"，有可能是"热"，有可能是"不错"。
这个动画做的非常形象！
Fable 5 在概念的理解和解释，动画效果的制作，以及整个网页的风格，字体，布局方面的设计，等方方面面都非常优秀。
而且整个过程，我根本没用任何提示词模板和 Skill，也没有用 Claude 的 Design 功能。你只要把核心需求和内容方向说清楚，接下来的就直接交给 Fable 5 去细化了，它会按这个场景和内容下的最佳实现来做。这就是聪明的模型，一点即通。
我觉得一个月几万的设计师，未必能有这个审美和效率！
即便有厉害的设计师，也很难听懂我的描述，让我一次做出我想要的这种效果，甚至是完全超越我预期的效果。
今天页面感受会削弱很多，我最后会放一个视频，大家可以直观感受动态交互效果！
就在我查看效果的时候，后面路过一个人，求着我把这个模板发给她，还让我帮她多设计几个。
我... 没有 Token 了~~
接下来我只要把这个东西稍微沉淀一下，就是一个很好的模板了，下次可以快速复用。
所以我让它自己写了一个设计理念的文档，以后就可以快速复用了，可以做成 Skill，也可以直接用这个 MD 文档，也可以直接用这个网页作为参考。
好的大模型使用其实非常简单，随便抽卡，一般效果都很好，遇到喜欢的就存档，以后直接复用即可。
2、设计个人网站
它的大模型概念讲解 PPT 做的非常好。所以我就让它帮我的个人网站也升级一下吧。
我之前已经用 Codex 做了一个首页了。
深色主题：
浅色主题：
这个效果也还可以，我要求的简约的黑白配色和深浅主题，两个主题我都挺喜欢的。但是我总感觉 Codex 的布局太过"板正"，不够"精致"。作为首页其实还好，元素多一点的页面，那种方方正正一块一块就会很丑。
我把大致的需求和板块内容给 Fable 5 交代了一下，然后它就帮我重新设计了一个版本。
我让它出了三个主题。
第一个叫"宣"：
第二个主题叫"曜"：
第三个主题叫"陶"：
这三个主题其实是对应了，浅色，深色，Claude 三种风格。前面两个主题我明确要求只有黑白主色，不要有其他复杂的配色，我第三个主题我希望是暖色的，便于文章的阅读。
做的也是挺不错的！
它其实不光设计了一个页面：
各种子页面也做好了，然后还形成了"结构文档"和"设计理念"！
结构文档，主要是网站的结构：
JarvisUni.com
├── / ······················· 首页（无导航条，居中 Hero + 板块卡片）
│
├── 主板块（4 个，均含列表页 + 详情页）
│ ├── 博客 blog.html → post.html 文字列表式（日期 + 标题 + 摘要）
│ ├── 工具 tools.html → tool.html 16:9 封面卡片 → 可用的工具面板
│ ├── 测评 bench.html → review.html 16:9 封面卡片 → 评分图表 + 报告
│ └── 游戏 games.html → game.html 16:9 封面卡片 → 游戏舞台 + 说明
│
├── 辅助板块（首页虚线胶囊条，可随时增删）
│ ├── 文档 / 教程 / 关于我
│ └── （预留）周刊 / 实验室 ··· 用「筹备中」占位
│
└── 全站通用
├── 首页：主题切换器悬浮右上角（无导航条）
├── 子页面：顶部导航（印章 Logo + 4 主板块 + 主题切换器）
└── 页脚（版权 + GitHub / RSS / 邮箱）这个目前都是它自动规划的，我还没有提出我修改需求。后面的修改，就要根据实际情况来了。
设计理念，就是介绍它的设计思路。
因为今天讲的是"设计"，所以设计理念这个文档，我可以完整地展现一下。
甲维斯 · 设计理念
一句话：把「自然语言编程」做成视觉本身，其余一切从简。
一、名字即设计
「甲维斯」= 甲 + Jarvis。
- 甲，天干之首，也是「甲等」的甲------正好压住「大模型测评」这个板块的气场；
- Jarvis，AI 助手的原型，对应站点的 AI 主题。
所以全站的视觉母题是一枚**「甲」字印章**：它是 Logo，是头像的边框语言，也是页脚的落款。四个主板块不用通用图标，而是各配一个汉字水印------博、具、评、戏------名字本身就是图标。
二、首屏是一次对话
站点主题是「用说话写程序」，那么首页就不该是静态的招牌，而应该是一次正在发生的对话：
ruby
jarvis@uni ~ $ 自然语言编程 · 应用开发 · 大模型测评▌终端提示符 + 打字机逐字输出 + 闪烁光标------访客看到的第一眼，就是「自然语言编程」这件事本身。介绍语用手写签名体，让这行「命令」带一点人的温度。
首页坚持单屏：头像、名字、一句话、四张卡、一行落款，一屏说完，不让人滚动着找重点。
三、三主题：黑、白、暖
| 主题 | 底色 | 唯一重色 | 气质 |
|---|---|---|---|
| 宣 | 纯白 | 黑 | 干净，白纸黑字 |
| 曜 | 纯黑 | 白 | 酷，黑底白光 |
| 陶 | 米杏 | 陶土橙 | 暖，Claude 风格 |
原则是克制到只剩一种颜色：宣和曜互为反相的纯黑白系，全站唯一的彩色只存在于陶。没有科技蓝，没有渐变彩虹------内容是主角，颜色只做标点。
默认跟随访客的系统深浅模式（浅→宣，深→曜）；陶是一种口味而非明暗，只由用户手动选择。
四、墨线，不要通栏线
全站没有一条横贯屏幕的硬分割线。区分内容用两种手段：
- 墨线------径向渐变画出的短线，中间粗、两头渐细收尖，像一笔淡墨，只在需要的地方轻轻一划（列表条目之间、元信息下方、页脚上方）；
- 视觉差------板块头部用底色的深浅渐变自然过渡，靠色块层次而不是线条切分。
五、字体分工
| 角色 | 字体 | 理由 |
|---|---|---|
| 标题 | 思源宋体系 | 编辑感，和印章气质一致 |
| 正文 | 宋体系（与标题同族） | 长文阅读统一、不跳戏，行距 1.85 |
| 签名 | 行楷/楷体 | 手写温度，只用在介绍语这一处 |
| 代码 / 日期 / 路径 | 等宽 | 终端语感，呼应对话式主题 |
全部走本地字体栈，不依赖外网字体服务。
六、一图三用的 21:9
所有封面、缩略图、正文首图统一为 900×383（21:9） ------正是公众号首图的规格。做一张图，可以同时用于：站内封面卡、博客缩略图、公众号推送。没有真图时，主题色渐变 + 大字标记的占位块本身也是一种设计。
七、留出生长的空间
- 主板块是自动排版的网格，加一张卡就是加一个板块；
- 新板块先进「辅助板块」虚线胶囊条（文档、教程......），内容攒够了再升级成主板块卡片；
- 「筹备中」的占位（周刊、实验室）故意露出来------让访客看到这个站在生长。
本来，我是准备亲自介绍各种细节的，但是它这个设计理念已经说得很清楚了，我贴出来就可以了。
我虽然完全不懂设计，但是它这个文档，我还是看得懂的！
它的设计效果，我也是挺喜欢的。
作为偏后端的全栈开发者，以前最难的就是设计前端页面了。JS 控制逻辑还是好学，但是界面"设计"真的太难了！
我记得当时为了开发一个系统，还得专门请设计师先把前端页面设计好，价格和沟通成本都不低。这一步又不能省，自己写的太烂，没有一个合适的页面的话，后端再好也没法看，所以这是一个巨大的痛点。
现在好了，万事不求人了。
真的是前端设计，前端代码，后端业务逻辑，数据库设计，服务器配置，后期运维，全部可以外包给 Fable 这样的模型了。也许还算不上真的顶级，但是每一个环节都在中上水平，这已经够了！
可惜，这个天才程序员和设计师很快要下线了！单独买有点贵！