Heron AI

Heron 要推销的产品没有外观，很难用一张照片拍出来。它是一个装在 Revit、Rhino、ArchiCAD、SketchUp 这些建筑设计软件里的 AI 助手，会一边看着建筑师画模型，一边指出哪里不符合规范，建筑师点头同意以后，它直接在模型里改好。因为没有东西可以摆出来给人看，Bearplus 把整个网站做成了一张建筑图纸，让访客在图纸上体验审图这件事。

每次进门，访客都要先等一段大约 8 秒的加载画面。米白色的图纸上，住宅立面的线条一笔一笔画出来，一根橙色细线旁边的百分比跟着往上走。加载画面的左下角写着 DESIGNED BY BEARPLUS, THE AWARD-WINNING DESIGN AGENCY。右下角是一块像图纸标题栏的说明卡，写着公司类型、成立于 2026 年、专注为建筑师做 AI 规范审查，地址在丹佛。说明卡旁边还有六行像机器开机日志一样的字，从 INITIALIZE CORE SYSTEM 到 OPTIMIZE INFERENCE ENGINE。线条画完以后，素描阴影铺上去，首屏的文字和菜单才出现。

首屏就是那张可以拖框找违规的立面图。房子上有两个红点，分别藏着一条扶手规定和一条护栏规定，访客把它们都圈出来，两张橙色卡片就并排挂在房子上。大标题写着 AN AI AGENT THAT WORKS INSIDE YOUR DESIGN TOOLS，右下方一条滚动字带反复写着更快的迭代、更少的错误、更少的杂活。

首屏往下，页面讲了一个完整的问题和答案。开头是一段声明和一排客户标志，再次写明 Heron 能直接在前面那几款建筑设计软件里工作。接着有四张卡片列出建筑师的四个麻烦，每次修改都要手动做，通用的 AI 看不到模型，没有人盯着问题，零碎的小事堆成了整天的工作。然后页面停下来讲一个小故事，三句字幕依次出现，一张平面图从零散的墙体拼了起来。图上随后冒出几个红点，访客点其中一个，就会弹出一条关于疏散距离的规范说明。

故事讲完以后，页面才介绍产品本身。Heron 有两个产品，一个浮在设计软件上面的聊天窗口，一个汇总所有修改和审批的看板。页面再往下，Observe、Advise、Act、Learn 四个词把它的工作方式分成观察、提醒、动手和学习四步。页面最后列出八类用户，从建筑师、室内设计师到制图员和小型事务所，然后是一个预约演示的按钮。看完首页还想多了解的访客，可以从顶部菜单进入另外几页，有两个产品页、价格页、资料库、标着 ABOUT 的公司介绍页和联系页。其中价格页的标题写的是按你省回来的工时付费。

Heron 官网的规矩是一切都画在同一张图纸上。背景是带一点纸纹的米白色，屏幕四角和各个格子的交点上有细小的十字标记，像图纸的对位记号。细线把版面分成一格一格，菜单在顶部的格子里，说明文字在右下的格子里，整页像一张排好版的施工图。

Heron 首页上的建筑插图都是铅笔和炭笔的质感。首屏的住宅、第二屏的高层公寓、页面后段的粗野主义建筑，都用细密的排线画出阴影，有的背后还挂着一个橙红色的圆，像一轮落日。这种画法让一个 AI 软件看起来像建筑事务所自己的手稿，不像一家科技公司的宣传图。

整个首页的颜色只有纸色、炭黑和一种橙红。橙红色专门留给需要访客注意的地方，包括违规卡片、选框、平面图上的红点、加载时的进度线，以及右上角的 CONTACT US。版面其余部分都是黑白灰，所以橙红一出现，访客的视线就会被拉过去，那里通常是一处问题或者一个可以按的按钮。

Heron 的字体分成两种声音，大标题和小提示各用一款。大标题用粗重的无衬线字 BT Grotesk，也就是笔画末端不带小脚的字，全部大写，像图纸上的图名。说明、编号和提示用等宽字 Geist Mono，字号很小，常常装在方括号里，比如 [01]、[SCROLL TO CONTINUE] 和 [CLICK ON VIOLATION]，读起来像软件界面里的状态提示。Bearplus 把建筑规范的条款编号本身也当成了版面的一部分，IBC 1017.2、ICC A117.1 这样的编号印在卡片最上方，排在标题前面。

页脚把公司名画成了一张还没上墨的字体构造图。HERON AI 几个字母只有轮廓线，线上标着尺寸刻度和圆心记号。页脚左边还留了一个订阅框，写着想看更多这样的酷网站，就订阅 Bearplus 的更新，这个页脚同时也在替做站的设计公司招揽读者。

Bearplus 把访客的光标做成了一件制图工具。光标在首屏上移动时，会拖着一横一竖两条贯穿整张图纸的细线，旁边的 X 和 Y 坐标跟着变化，很像建筑软件里的捕捉准星。访客按住鼠标拖动时，准星后面拉出一个橙色的半透明选框，松开之后选框消失，被圈中的红点上弹出违规卡片。卡片弹出以后会一直挂在房子上，不会自己消失。

平面图那一段的动画完全由滚动驱动。访客滚到这里，页面会停住，几段墙体从四面八方飞进画面，拼成一套完整的平面图，然后尺寸线和家具陆续画上去。下方的黑色小标签每滚一段换一句字幕，提示访客继续滚动，最后标签上的字变成 [CLICK ON VIOLATION]，图上的红点也出现了。

Heron 页面上那些小处的动画，也都在模仿画图的动作。四张问题卡片的线条图标，鼠标移上去时会重新画一遍。光标扫过页脚那几个空心字母，扫过的地方就像浸透了墨水，变成一片黑色。访客点进 ABOUT 页时，屏幕上先画出一张六边形的平面图，几个房间依次填成橙色，大约三秒半以后才出现方块形的公司标志。

Heron AI 的页面滚起来很平稳，访客从首屏一路滚动到页脚，页面一直保持每秒 60 帧，几乎没有掉帧。

Bearplus 在 Webflow 里搭出了版面，动画、平滑滚动、换页和轮播用的都是从公共 CDN 加载的现成库，主力是 GSAP 和它的几个插件，平滑滚动交给 Lenis。首屏的十字准星和选框跟着光标的坐标画，页面上大部分图形是线条画的矢量图，画线和涂黑的动画都在这些线条上做。这个站自己写的脚本做了混淆处理，变量名和执行顺序都被打乱，别人很难读懂或者照搬。

整个站的下载量很小，首页打开时只下载约 1.7 MB，从头滚到尾也只有约 3.9 MB。整页 3.9 MB 里最大的一组，是用户列表里那八类人的配图，合计约 1.7 MB。页面上大部分图形是线条画的矢量图，数量很多，加起来却不到 0.2 MB。

访客等待的时间几乎全花在加载画面上。服务器 0.04 秒就返回了第一个字节，第一块内容和最大的那块内容也都在 0.3 秒以内画了出来，可这两个时刻画出来的，是被加载画面盖住的标题和插图，访客要等那段约 8 秒的加载画面画完，才看得到首屏。访客每次回到首页，这段加载画面都会从头再画一遍。页面在打开后半秒左右跳动过一下，正好被加载画面盖住，访客其实看不到。

Heron 首页上那两处找违规的互动只能用鼠标完成，读屏软件的用户和对晃动敏感的访客也只照顾到了一点。两处红点都不是按钮，键盘走不到它们，只用键盘的访客没法拖框，也点不开违规卡片。其余部分对键盘还算友好，链接和按钮都有默认的焦点框，焦点移到顶部的 Product 和 Resources 时，下拉菜单会自动展开。顶部两个标志链接没有名字，页脚的订阅输入框只有占位文字，提交按钮也没有名字，另有五张图片缺少替代文字。打开减少动态效果的设置后，Heron 只停掉了问题卡片和工作方式那一段的悬停动画，加载画面仍然会把那栋房子完整画一遍。

Heron AI 先在 9 月 1 日拿到 Awwwards 的荣誉提名，10 月 1 日拿到 FWA 的当日最佳，10 月 12 日又拿到 Awwwards 的当日最佳。Awwwards 给的四个分项里，创意 Creativity 最高，得了 7.85，这和首页让访客亲手圈出违规的做法对得上。可用性 Usability 最低，得了 7.48，首屏画面要等大约 8 秒才出现，可能是原因之一。开发奖的评委给了 7.01 分。不算响应式那一项，动画 Animations 最高，得了 7.6，代码结构 Markup 最低，得了 6.6。

FWA 给了 83 分，把它归在建筑与设计、商业与企业两类下面。团队在 FWA 上写的项目说明只有短短三句话，大意是 Heron 是一个在设计工具里工作的助手，它看着你的模型提出修改，经你同意后自己动手，并且由建筑师打造。说明里看模型、提修改、自己动手这三个动作，在页面上都找得到，就是 Observe、Advise、Act 那三步。

Bearplus 和 Kenny Ho 两边的获奖记录几乎完全重合。Kenny Ho 在 Awwwards 上列出的六件作品，United Carriers、Kanak Naturals、CargoKite 等，全部也出现在 Bearplus 的作品列表里，Kenny Ho 看起来是这家公司固定合作的主设计师。两人在 FWA 上的获奖数也一样，各有六座奖。9 月 6 日，双方合作的另一个项目 United Carriers 刚拿到 Awwwards 的当日最佳。