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 能在 Revit、Rhino、ArchiCAD 和 SketchUp 里直接工作。接着有四张卡片列出建筑师的四个麻烦，每次修改都要手动做，通用的 AI 看不到模型，没有人盯着问题，零碎的小事堆成了整天的工作。然后页面停下来讲一个小故事，三句字幕依次出现，一张平面图从零散的墙体拼了起来。图上随后冒出几个红点，访客点其中一个，就会弹出一条关于疏散距离的规范说明。

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

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

首页上的建筑插图都是铅笔和炭笔的质感。首屏的住宅、第二屏的高层公寓、页面后段的粗野主义建筑，都用细密的排线画出阴影，背后常常挂着一个橙红色的圆，像一轮落日。这种画法让一个 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 的更新，这个页脚同时也在替做站的设计公司招揽读者。

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

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

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

整页滚动起来很平稳，从首屏连续滚到页脚，页面一直保持每秒 60 帧，最慢的一帧也只有 22 毫秒。平滑滚动由 Lenis 处理，页面同时加载了动画库 GSAP 和它的滚动触发、拆字和打字插件。

Bearplus 在 Webflow 里搭出了版面，动画和平滑滚动用的是从公共网络加载的现成库，GSAP、Lenis、换页库 Barba 和轮播库 Swiper。这个站自己的脚本有 290 KB，单独托管，并且做了混淆处理，变量名和执行顺序都被打乱，别人很难读懂或者照搬。

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

访客等待的时间几乎全花在加载画面上。服务器 35 毫秒就返回了第一个字节，首次内容绘制（FCP）和最大内容绘制（LCP）都在 0.3 秒以内。但这两个数量到的是被加载画面盖住的标题和插图，访客要等大约 8 秒，线条画完、阴影铺好，才看得到首屏。而且访客每次回到首页，这段加载画面都会从头再画一遍。布局位移（CLS）是 0.12，略高于 Google 建议的 0.1，位移发生在打开后半秒左右，正好被加载画面盖住，访客其实看不到。

这个站最有意思的两处互动都只能用鼠标完成。首屏的红点和平面图上的红点都不是按钮，Tab 键走不到它们，所以只用键盘的访客没法拖框，也点不开违规卡片。其余部分对键盘还算友好，链接和按钮都有浏览器默认的焦点框，焦点移到顶部的 Product 和 Resources 时，下拉菜单会自动展开。不过顶部两个标志链接没有名字，读屏软件只会念出这是一个链接。页脚的订阅输入框只有占位文字，提交按钮也没有名字，另有五张图片缺少替代文字。

Heron 为减少动态效果准备的规则，只管到了很小的地方。样式表里有两条针对这个设置的规则，管的是问题卡片和工作方式那一段的悬停动画，加载画面仍然会把那栋房子完整画一遍。

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

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