700 次浏览 vs 8% 转化率：我为何在第 3 天将 Next.js 网站重新设计为 Bento Grid

Source: Dev.to

现实检验 📉

我已经进行“公开构建”挑战 3 天了。昨天，算法眷顾了我：700+ 次观看 我的更新视频。

我想：“这就是了，销量要来了。”

现实情况

• 实际访客只有 60 人。
• 8 % 的转化率。

流量有，但留存没有。我的着陆页漏掉了用户，感觉很普通。

转向：Bento 网格 🍱

我决定使用 Bento Grid 布局进行重新设计，这种模式在 Linear、Vercel 等顶级开发工具中很流行。Bento Grid 将复杂信息组织成易于消化的“盒子”，并营造出高级感。

我打开 VS Code，删除旧布局，使用 Next.js 14 和 Tailwind CSS 重建页面。

代码（我的实现方式）

在 Tailwind 中使用 Bento Grid 的关键是掌握 grid-cols 和 col-span。下面是主网格组件的简化版本：

export default function BentoGrid() {
  return (
    <div className="grid grid-cols-2 gap-4">
      {/* Hero Box - Spans 2 columns */}
      <div className="col-span-2 bg-gray-100 p-6">
        <h2>## The Ultimate Kit</h2>
        <p>Boost your workflow instantly.</p>
      </div>

      {/* Feature A */}
      <div className="bg-white p-4">
        <span>🚀</span>
        <h3>Next.js Ready</h3>
      </div>

      {/* Feature B */}
      <div className="bg-white p-4">
        <span>🎨</span>
        <h3>Tailwind CSS</h3>
      </div>

      {/* Pricing Box - High Contrast */}
      <div className="bg-black text-white p-6">
        <h3>Get it now</h3>
        <p>Limited offer</p>
        <p>€3</p>
      </div>
    </div>
  );
}

定价策略 🏷️

为了测试摩擦是否纯粹与设计相关，还是也与价格有关，我把价格设为 €3——一个“毫不犹豫”区间，低于一杯咖啡的价格。

接下来怎么办？

新版本已经上线。我正在跟踪两个关键指标：

1. 网格元素的点击率。
2. 最终购买转化率。

如果你想查看实时结果或支持此挑战，请前往以下链接：
https://veloxweb.gumroad.com/l/launch-ui

敬请期待第 4 天的指标！ 🚀