我这几天疯狂测试 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。甲天干之首也是「甲等」的甲——正好压住「大模型测评」这个板块的气场JarvisAI 助手的原型对应站点的 AI 主题。所以全站的视觉母题是一枚「甲」字印章它是 Logo是头像的边框语言也是页脚的落款。四个主板块不用通用图标而是各配一个汉字水印——博、具、评、戏——名字本身就是图标。二、首屏是一次对话站点主题是「用说话写程序」那么首页就不该是静态的招牌而应该是一次正在发生的对话jarvisuni ~ $ 自然语言编程 · 应用开发 · 大模型测评▌终端提示符 打字机逐字输出 闪烁光标——访客看到的第一眼就是「自然语言编程」这件事本身。介绍语用手写签名体让这行「命令」带一点人的温度。首页坚持单屏头像、名字、一句话、四张卡、一行落款一屏说完不让人滚动着找重点。三、三主题黑、白、暖主题底色唯一重色气质宣纯白黑干净白纸黑字曜纯黑白酷黑底白光陶米杏陶土橙暖Claude 风格原则是克制到只剩一种颜色宣和曜互为反相的纯黑白系全站唯一的彩色只存在于陶。没有科技蓝没有渐变彩虹——内容是主角颜色只做标点。默认跟随访客的系统深浅模式浅→宣深→曜陶是一种口味而非明暗只由用户手动选择。四、墨线不要通栏线全站没有一条横贯屏幕的硬分割线。区分内容用两种手段墨线——径向渐变画出的短线中间粗、两头渐细收尖像一笔淡墨只在需要的地方轻轻一划列表条目之间、元信息下方、页脚上方视觉差——板块头部用底色的深浅渐变自然过渡靠色块层次而不是线条切分。五、字体分工角色字体理由标题思源宋体系编辑感和印章气质一致正文宋体系与标题同族长文阅读统一、不跳戏行距 1.85签名行楷/楷体手写温度只用在介绍语这一处代码 / 日期 / 路径等宽终端语感呼应对话式主题全部走本地字体栈不依赖外网字体服务。六、一图三用的 21:9所有封面、缩略图、正文首图统一为900×38321:9——正是公众号首图的规格。做一张图可以同时用于站内封面卡、博客缩略图、公众号推送。没有真图时主题色渐变 大字标记的占位块本身也是一种设计。七、留出生长的空间主板块是自动排版的网格加一张卡就是加一个板块新板块先进「辅助板块」虚线胶囊条文档、教程……内容攒够了再升级成主板块卡片「筹备中」的占位周刊、实验室故意露出来——让访客看到这个站在生长。本来我是准备亲自介绍各种细节的但是它这个设计理念已经说得很清楚了我贴出来就可以了。我虽然完全不懂设计但是它这个文档我还是看得懂的它的设计效果我也是挺喜欢的。作为偏后端的全栈开发者以前最难的就是设计前端页面了。JS 控制逻辑还是好学但是界面“设计”真的太难了我记得当时为了开发一个系统还得专门请设计师先把前端页面设计好价格和沟通成本都不低。这一步又不能省自己写的太烂没有一个合适的页面的话后端再好也没法看所以这是一个巨大的痛点。现在好了万事不求人了。真的是前端设计前端代码后端业务逻辑数据库设计服务器配置后期运维全部可以外包给 Fable 这样的模型了。也许还算不上真的顶级但是每一个环节都在中上水平这已经够了可惜这个天才程序员和设计师很快要下线了单独买有点贵