故事是这样开始的。

上周我一个在重庆正在筹备创业的朋友，拉我聊了聊他的目前情况。

他说他游戏快做完了，目前正在思考游戏上线和自搭国内宣传网站。

然后又讲，因为自己不熟这块技术，他自己又需要卡着时间点上线，毕竟他一个打工人大段时间都要为公司服务。所以他还是希望能想个办法能尽快解决“自己搭建网站时间不够用”的问题。

当时的我确实是想提起用AI做这个游戏宣传网站，但此前我只用过deepseek、元宝生成网页，对于用AI做游戏宣传网站确实没有经验，况且它俩即便生成功能简单的个人学习/娱乐的网页，都会出现token不够、效果与要求两模两样的情况。

所以我话在嘴边又给憋回去了，只是提议他可以多搜集一下可以零代码生成网页的AI产品，兴许能生成复杂一些的网页。即便不成，也有基础代码可以使用，自己摸索也能轻松一些。

上周通话之后，我就开始关注能开发游戏网站的工具。

恰好上周五，字节的扣子空间推出正式版的网页设计功能，紧接着周六又开源。同时我了解到，国内知名度较高的网站原型设计产品墨刀AI，与扣子空间升级版都能实现“元素修改-复刻图片”，索性这两款工具就都测一下。

为了让大家能充分看到这两款产品指令理解能力、游戏宣传网站设计能力，此处我依次按照“不带附件生成-元素修改-复刻附件图片”这三个步骤来讲述分析。

不带附件生成

扣子空间此前只能在对话框中输入指令生成网页，升级后有了单独的“网页”标签选项，自动生成的类型就更精准了。

我同时对扣子空间和墨刀AI输入指令，它俩生成的结果如下：

扣子空间生成

墨刀AI生成

提示词

你是一个网页制作大师，帮我制作一个游戏《血界突袭》的介绍互动网页。页面风格需要红黑废土史诗风，将游戏介绍转化为沉浸式体验，兼顾知识性和趣味性，符合用户习惯。具体要求如下：

一、角色与目标群体

本网页面向硬核游戏爱好者（18-35岁男性为主），聚焦《血界突袭》的末日世界观、高自由度战斗和沉浸式叙事。通过视觉冲击与交互设计，传递游戏的“废土生存史诗”核心体验，激发玩家探索欲和代入感。全片需要以图文并茂的形式展示

二、核心目标与网页用途

（一）核心目标：

深度展示游戏的核心玩法（如资源掠夺、阵营对抗、动态事件）。

通过沉浸式交互让用户感知“红黑美学”的废土艺术风格。

结合轻量化知识彩蛋（如末日科技设定、阵营文化），提升内容厚度。

（二）网页用途：

为玩家提供“预体验”入口，强化下载转化。

通过互动彩蛋和隐藏剧情，延长用户停留时间。

三、整体风格与色彩搭配

主风格：红黑废土史诗 × 赛博朋克残响，营造一种世界末日、废墟、荒芜的氛围。

色彩：以暗红（#8B0000）、炭黑（#121212）、锈铁灰（#3A3A3A）为主，搭配霓虹故障色（如#FF003C）点缀。

视觉元素：

背景：动态废墟场景（如燃烧的苍穹、崩裂的地表），叠加全息投影风格的UI界面。

音效：工业金属混音 + 环境无线电杂音。

四、互动环节与内容设计（图文并茂）

1. 世界观导入

开场动画：短篇CG展示“血月降临”事件，镜头掠过变异怪物、废弃都市，最终定格游戏LOGO（伴随玻璃碎裂音效）。

交互触发：用户点击屏幕裂痕可解锁阵营背景故事（如“钢铁兄弟会”VS“流浪者联盟”）。

2. 核心玩法体验（图文并茂）

“生存模拟器”：

拖拽角色装备武器，实时生成战斗数值（如“生存概率：37%”）。

点击场景元素（如油桶、掩体）触发战术演示动画。

动态事件分支：选择不同选项（如“抢夺资源”或“谈判”）触发剧情短片。

3. 艺术设定集（图文并茂）

红黑美学画廊：横向滑动查看角色/场景原画，长按图片可透视“设计线稿→成品”演变过程。

隐藏彩蛋：连续点击霓虹灯牌，解锁开发者访谈片段。

4. 玩家共创区（图文并茂）

“废土宣言”生成器：输入关键词（如“钢铁”“辐射”），AI生成专属生存标语并生成海报。

五、页面布局与导航设计

布局：

首屏：全屏动态背景 + 悬浮导航栏（故障特效）。

主体：分区块折叠式设计（如点击“阵营”展开3D旋转徽章）。

导航：

顶部：主菜单（世界观/玩法/画廊/社区）。

侧边栏：快捷入口（预约按钮/彩蛋提示）。

六、技术实现要求

性能优化：

使用WebGL渲染动态废墟场景，确保中低端设备流畅运行。

加载高清原画和视频资源。

交互技术：

重力感应控制视角移动。

本地存储记录用户解锁的彩蛋进度。

数据层：

接入游戏官网API，实时更新预约人数/UGC内容。

首屏动态标语：

“当血月升起时，你会选择背叛还是拯救？”

扣子空间干脆利落，收到指令就立马开始编程，已完成也就反馈了一句话，与墨刀AI“确认功能说明-生成原型”的精细形成对比。

聚焦到结果上，扣子空间乍一眼感觉还挺不错，红月升起落下动态、光影效果、背景高频闪烁和按钮特效都挺好看。

但仔细看也会发现其他问题，比如导航栏上只有“世界观”有具体内容，能链接到对应位置；比如音频相关的需求都无法实现。

而墨刀AI出现的问题刚好和扣子空间相反。

内容上，它首屏很多的设置都不符合要求，比如没有导航栏、背景与开场动画，其他区块也没有扣子空间出现的世界观，倒是有扣子空间未涉及的核心玩法体验。

效果上，它没有CG动画，特效较少，没有扣子空间的惊艳感。

它俩目前都无法实现音频载入，都无法完成指令的所有要求，所以从内容完成度看，它们平分秋色。不过从网站的设计感来看，还是扣子空间占上风。扣子空间设计的末日危机浴血奋战的氛围和沉浸感立住了。

元素修改

我发现扣子空间元素修改确实挺智能，进入编辑模式，点击待修改位置，输入要求或最终想展示的文字，它便开始修改此处代码。

最令人惊奇的是它能自动生图！我让它用生成的图片替换“钢铁兄弟会”图标，它成功了！我在多个平台都搜索过，确实只有类似、没有一模一样的图！只是图片尺寸不太合适。

当然它也能搜集网上的图片替换原有图片、改文字、改背景和特效，只是修改背景色块大小不好使。

它还能将自己上传的图片添加到界面中或者替换原有图片。这也就意味着，做游戏开发、设计全流程的你是真可以通过这种编辑元素的方式将真实图片加载上去。虽然它还是会耗费5分钟以上。

墨刀AI虽然在预览界面也有编辑按钮，但这只是摆设，根本无法框选，只能输入指令调整，着实不方便。

我试着输入指令让它换字、给红月增加若隐若现的山丘、替换图标。

三个都能实现，不过后两个效果让人哭笑不得：山丘太假，图标和我的指令只能说是毫不相关。

其中替换图标这个事项，我是让它先生成图像，再去替换，但进程给我的提示是采用谷歌浏览器上的图。

所以其实它不能生图，只能搜图。

我还试了上传附件（我自己找的图），让它把图标替换成附件图片。好家伙，结果它重新生成了网页、网页中的图片之一就是我给的附件。有种小题大做的感觉。

出现这种结果的原因可能是它修改元素的重头戏是手动编辑功能吧！

原型网站导出后便进入了手动编辑界面，这里有各种组件、图片、图标、页面等要素，能对颜色、外观、交互功能进行精细化设置。特别适合追求独特设计、对界面细节要求高的网站设计者。

所以说虽然看着扣子空间修改元素比墨刀AI更智能，但其实是它俩的侧重点不同——前者主打AI执行全流程，后者主打“AI出框架+人工出独特设计”。

复刻附件图片

我直接让扣子空间和墨刀AI复刻扣子空间之前的原生生成结果。

没曾想，扣子空间还不能加载超过10M的图片，不过幸好能展示动态效果和整体情况的gif图内存量少。

我对两个产品的生成结果都不满意，因为确实改变挺大。

扣子空间首先氛围和沉浸感就没了，主要还是因为红月不再是之前那个红月，没有升起落下，也没有若隐若现的山丘和高频闪烁的粒子。取而代之的3D放大缩小的红月和不闪烁的星星。

而后就是文字布局差了，首屏红月中的“血界突袭”没有了，其他标语字太小了。

尽管它这次总算生成了“核心玩法”和“艺术设定”的具体内容，但差了些设计感，让人看不出独特之处。

墨刀AI有主屏和“世界观”“核心玩法”详细介绍，但主屏中的红月是静态效果，连闪烁的背景也没有，文字存在看不清、不对称的情况。世界观和核心玩法内容都太简略。

但我看其他人测试复刻效果，还是一句话简单指令输入，反馈都说还不错。是因为附件上传静态图，复刻效果会更好吗？

这个问题看看在座的各位能否解答。

小结

尽管经过测试，我们发现目前想用这两款AI产品生成能覆盖视频、音频、图片等多模态、功能复杂、氛围感浓厚的网站，还是比较难。

但它俩和其他能生成网站的产品依然给了我们“技术人员建站”之外的另一种选择——“多次AI调试+手动设计”。

我想我那个创业的朋友应该也愿意尝试走这条看着小弯多、可能还走得快的"野路子"。

你对扣子空间的网页设计功能和墨刀AI有什么看法？欢迎评论区留言一起讨论~

（我们的智能体已经上线了，可以在wx后台直接对话我们，就可以查工具教程或者测评）

关注ChooseAI，和我们一起探索AI时代！