Vibe Coding实战：用Figma+Framer+AI两天重构游戏化作品集

当作品集变成一款可交互的游戏

在传统认知里，个人作品集网站不过是一份在线简历——罗列项目、贴上头像、附上联系方式。但B站UP主「紫薯冰粉」用两天时间的Vibe Coding实践，把这套陈旧模板彻底颠覆：他将Framer的可视化能力与AI辅助编码结合，做出了一个像Steam商店页面一样、可以直接「游玩」的交互式作品集。

所谓Vibe Coding，是由OpenAI联合创始人Andrej Karpathy于2025年初提出并命名的编程范式。其核心理念是开发者以「氛围」（Vibe）和意图为导向，用自然语言与AI协作完成代码实现，而非亲自编写每一行逻辑。这一范式的兴起，得益于以Cursor、GitHub Copilot、Claude等为代表的AI编程助手能力的快速跃升——它们不仅能补全代码片段，更能根据上下文生成完整的组件、页面乃至整个功能模块。

Vibe Coding的诞生与大语言模型（LLM）在代码生成领域的能力突破密切相关，同时也与软件工程「抽象层级不断上升」的历史脉络一脉相承。从汇编到C、从C到面向对象语言、从手写jQuery到React组件化开发，每一次抽象层级的跃升都意味着开发者能以更少的认知负担表达更复杂的意图。2023年前后，以GPT-4、Claude 3为代表的模型在代码基准测试（如HumanEval、SWE-bench）上的表现大幅跃升，不仅能处理单函数补全，还能理解跨文件的项目上下文。HumanEval是OpenAI发布的164道编程题基准，早期GPT-3通过率不足30%，而GPT-4已超过85%；SWE-bench则更进一步，要求模型直接修复GitHub上的真实Issue，考验的是系统级代码理解能力——这类基准测试的进步并非只是数字游戏，它意味着模型开始能够理解「为什么这样写」而非只是「怎样写」，具备了初步的软件工程推理能力，这正是Vibe Coding能够从实验性探索走向实用工作流的技术前提。Vibe Coding可以被视为抽象层级跃升这一趋势的最新延伸——自然语言成为新的「编程语言」，AI承担了从意图到实现的翻译工作。Karpathy提出这一术语时特别强调，Vibe Coding中开发者的核心技能从「语法记忆与手写实现」转向「需求拆解、提示词工程与代码审查」——这恰恰与软件工程中「系统思维比语言熟练度更重要」的长期共识形成呼应。

Vibe Coding并不意味着开发者技能的退化，而是重新定义了创作者的核心竞争力：从「能写出来」转向「能想清楚、能审出好坏」。在这次重构中，开发者不再逐行手写代码，而是通过自然语言描述需求、由AI生成实现，人则专注于创意与体验设计。这次重构最核心的价值，并不在于从零构建，而在于视觉与交互层面的全面升级——大部分内容其实沿用了此前的作品，只是被重新包装成了更有沉浸感的形态。

AI生成卡牌交互：整站最抢眼的设计

整个网站最吸引眼球的元素，是一组支持悬停与拖拽的游戏卡牌。这部分完全由AI生成代码实现——作者只需用自然语言描述想要的交互效果，AI便输出了可悬停响应、支持拖拽的卡牌组件。

这恰恰体现了Vibe Coding的典型分工：创意和审美由人把控，繁琐的交互逻辑与前端实现交给AI。对于设计背景出身、不擅长手写JavaScript动效的创作者来说，这种模式极大降低了「把脑中效果实现出来」的门槛。以往需要协作前端工程师或啃文档数天的悬停拖拽交互，如今几句提示词就能落地。

更巧妙的是「插卡带」的设计。作者利用Framer自带的嵌入（embed）功能，让访客可以选择不同的「游戏卡带」并直接在网站内游玩。Framer起初是一款面向设计师的高保真原型工具，以支持复杂动效和交互逻辑著称。近年来它完成了从原型工具到「可发布网站构建器」的战略转型，内置了CMS、SEO设置、自定义域名、团队协作等生产级功能。

在技术架构层面，Framer基于React构建，这使其在可视化网站构建器中占据独特位置。React由Facebook（现Meta）于2013年开源，其核心创新是「组件化UI」与「虚拟DOM」——前者将界面拆分为可复用的独立单元，后者通过对比前后状态差异最小化真实DOM操作，大幅提升渲染性能。Framer的画布本质上是一个React运行时环境，这意味着设计师的每次拖拽操作都在隐式地配置React组件的props和状态，最终输出的是可直接部署的React代码，而非静态HTML字符串。这与Webflow（生成原生HTML/CSS）或WordPress（PHP模板引擎）的技术路径形成鲜明区别——这一架构差异带来的实际影响远不止于技术层面：React生态拥有npm上数百万个可复用包，Framer的React底层意味着第三方组件库、动画库（如Framer Motion，其本身就脱胎于Framer）都可以相对自然地接入，而Webflow的封闭HTML/CSS生成体系则难以享受这一生态红利。也正是这种开放性，使AI生成卡牌交互能够无缝落地——Framer允许开发者直接插入自定义React组件或原生JavaScript，使其成为设计工具与代码工具的「混合地带」。这种把小游戏内嵌进作品集的思路，将静态展示变成了主动体验——访客不再是被动浏览，而是真正「玩」了起来。

Figma + Framer + AI 的高效工作流

这个项目背后，是一套非常值得借鉴的现代设计开发工作流。

设计稿直接导出，跳过还原痛点

网站的大量排版并非在代码里从头搭建，而是在Figma中完成设计后直接导出到Framer。Figma与Framer之间存在官方插件支持的导出通道，设计师可将Figma中的图层结构、自动布局（Auto Layout）、组件变体等直接迁移至Framer的画布，保留大部分视觉属性。

这一工作流能够顺畅运转，有其深层的技术原因。Figma的Auto Layout功能本质上是在设计工具中引入了类似CSS Flexbox的布局模型——子元素间距、对齐方式、填充模式均可通过参数控制，而非手动像素定位。CSS Flexbox（弹性盒模型）是W3C于2009年提出、2012年后逐步普及的布局规范，解决了传统float布局的种种痛点，让容器能够智能分配子元素空间。Figma将这套逻辑引入设计工具后，设计师在画布上拖拽元素时，其实是在隐式地定义Flexbox参数——这一设计哲学的深远影响在于，它从根本上改变了设计交付物的性质：从「视觉截图+标注说明」变成了「可计算的布局意图」。

值得一提的是，这一转变在行业层面引发了深远的协作模式变革。Figma在2016年首次引入Auto Layout的前身功能，其创始人Dylan Field明确表示设计灵感来自于对工程师「为什么看不懂设计稿」这一问题的长期观察——他们发现，设计师用绝对坐标定位元素，而工程师用相对规则描述布局，两套语言之间存在根本性的语义鸿沟。Auto Layout的本质，是强迫设计师用「规则」而非「像素」思考，从而让设计意图能够被计算机理解，进而被Framer等工具直接消费。Framer的响应式布局同样基于Flexbox/Grid逻辑，两者规则体系高度兼容，这正是Figma→Framer导出通道能够保留大部分布局意图的根本原因。导出到Framer或转交前端工程师时，布局意图已经被数学化地保存在设计文件中，而非依赖设计师的口头说明，从源头上消除了传统设计还原过程中大量依赖人工经验和沟通的模糊地带。

这一工作流的价值在于消除「设计还原损耗」——传统流程中，前端工程师需要对照设计稿手动还原样式，误差在所难免，沟通成本极高。设计师可以在最熟悉的工具里控制像素级细节，再无缝迁移到可发布的网站环境，彻底省去了「设计还原」这一传统痛点。

CMS管理内容，样式与数据分离

对于此前撰写的多篇报告，作者使用了Framer的CMS（内容管理系统）功能，将图片与文字结构化嵌入，访客可直接在网站内阅读完整内容。Framer内置的CMS属于轻量级结构化内容管理，允许用户定义字段模板（如标题、封面图、正文富文本），再将这些字段绑定到页面组件的对应位置。

Framer的CMS所代表的「内容与样式分离」思想，是过去十年Web内容架构演进的缩影。传统CMS（如WordPress）将内容存储、模板渲染、前端展示耦合在同一系统中，更新任一层都可能牵连其他层，灵活性受限。Headless CMS的兴起（Contentful于2013年成立，Sanity、Strapi相继出现）彻底解耦了这一架构——内容通过RESTful API或GraphQL输出，前端可以是任意技术栈，同一份内容可以同时驱动网站、App和智能音箱。「Headless」得名于去掉了传统CMS的「头部」（即前端展示层），只保留内容存储与分发能力。这一架构演进的背后，是移动互联网时代「一次创作、多端分发」需求的爆发——2010年代初，智能手机渗透率的快速上升让内容团队意识到，同一篇文章需要同时在PC网站、手机App、RSS阅读器乃至后来的微信小程序中呈现，传统CMS的「内容绑定展示」模式在多终端场景下变得极为笨拙。GraphQL（由Facebook于2012年内部开发、2015年开源）的出现进一步推动了这一趋势——它允许客户端精确声明自己所需的数据字段，避免了REST API常见的「过度获取」（over-fetching）问题，让内容分发变得更加精准高效。Framer CMS是这一思路面向个人创作者的轻量化落地：字段模板定义内容结构，组件绑定定义展示样式，两者独立演进——未来更换网站设计时，历史内容无需重新录入，只需重新绑定新模板即可。CMS的核心优势在于：未来新增文章时，只需向CMS填入数据，页面模板会自动套用，无需重复排版，内容积累与视觉迭代可以真正并行进行。

年度总结的Steam Page化呈现

作者还将自己的年度总结报告嵌入网站主页，让访客像浏览Steam游戏商店页一样滚动观看完整报告。这种设计借鉴了游戏化（Gamification）的核心思路——将游戏设计元素如进度感、探索机制、即时反馈、叙事包装引入非游戏场景，以提升用户参与度。

Steam商店页的信息架构并非偶然的美学选择，而是有认知科学依据的交互设计范本。游戏设计借助「变量奖励机制」（Variable Reward）激活多巴胺系统，制造持续探索的内驱力——行为心理学家B.F.斯金纳通过「斯金纳箱」实验证实，不可预测的奖励比固定奖励更能强化行为；进度条与成就系统则利用「目标梯度效应」（Goal Gradient Effect）——人在接近目标时会加速行动，这一效应在1932年由心理学家Clark Hull首次量化描述。诺贝尔经济学奖得主丹尼尔·卡尼曼的「峰终定律」（Peak-End Rule）则表明，人对一段体验的记忆主要由其峰值时刻和结束时刻决定，而非全程平均值——Steam商店页的截图轮播、标签系统和滚动叙事结构，正是围绕这一规律精心设计的信息架构。

值得注意的是，Steam商店页本身也是游戏化信息架构的一个极端案例：Valve在2005年推出Steam时，面临的核心问题是如何让玩家在数字货架前停留更长时间并做出购买决策。他们通过大量A/B测试发现，「可交互的预览」（如游戏片段轮播）比静态截图的转化率高出数倍，「用户评测数量」比专业媒体评分对购买决策的影响更大——这些洞察最终固化成了我们今天熟悉的Steam商店页布局，并成为游戏行业乃至整个数字内容领域产品详情页的设计参考标准。将个人作品集套用这套框架，本质上是借用访客已内化的「评估一款游戏」的认知脚本，来降低「了解一个人」的决策摩擦——研究表明，交互性内容相比静态页面能显著提升页面停留时长与内容记忆度。这种「产品详情页」式的信息组织，把个人成长叙事包装成一款可以「了解详情」的作品，叙事感与记忆点都远超普通图文堆砌。

从这个案例能学到什么

这次两天的重构，看似只是一个个人项目，实则折射出内容创作与前端开发领域的几个值得关注的趋势。

第一，工具链正在模糊设计与开发的边界。 Figma负责视觉、Framer负责发布与内容管理、AI负责交互代码——创作者一个人就能跑通过去需要设计师加前端工程师协作的完整链条。

第二，AI辅助编码最适合「目标明确、实现有门槛」的场景。 卡牌拖拽这类效果，创作者清楚想要什么，但手写代码有门槛，AI恰好补齐了这块能力缺口。

第三，个人作品集的形态正在走向游戏化。 用卡带、Steam页等游戏化隐喻降低阅读门槛、提升页面停留时长，这种思路对任何做个人品牌的创作者都有参考价值。对于创意从业者而言，作品集本身的形式语言，也是展示审美判断力与叙事能力的隐性作品。

当然，Vibe Coding并非万能。AI生成的代码在复杂业务逻辑、性能优化和可维护性上仍需人工把关；Framer虽然上手快，面对高度定制化需求时也会遇到天花板。但对于「视觉驱动、交互轻量」的作品集类项目，Figma + Framer + AI这套组合确实是当前性价比极高的解法。

两天做一个会「玩」的作品集，门槛已经比想象中低得多——关键或许不在于会不会写代码，而在于你能否想清楚，自己想让访客体验到什么。

核心要点