把问题画出来
品牌有没有被 AI 认识，眼睛看不到。网站要用图像和比喻说明，没有技术背景的老板也一看就懂。
BroccolinkAI 营销 · 企业网站
网站的内容也写给 AI 看。
这是马来西亚 AI 营销服务 Broccolink 的网站。老板看页面上的文字，AI 工具读页面背后的资料，两边都顾到了。
概要
Broccolink 是马来西亚的 AI 营销服务，由 Be Broccoli Inspiration House Sdn. Bhd. 经营。Potadot 为这家公司设计并开发英文、中文双语网站，全站只有一个长页面。页面先问老板一个问题：“Does AI know your story?”（中文版写的是“AI 认识你的品牌吗？”），接着讲道理，再讲做法，最后转到 WhatsApp。页面背后还有结构化资料，用机器读得懂的格式写明公司、服务和四个常见问题。
客户
这家马来西亚公司为 AI 撰写品牌文案。
Broccolink 由 Be Broccoli Inspiration House Sdn. Bhd.（注册编号 201901033374）经营。公司替品牌撰写文案，让 AI 工具识别、记住并推荐这个品牌。
网站列出三个平台：品牌传记（Brand Biography）、企业里程碑（Corporate Milestones）和品牌问答中心（Brand FAQ Center）。页面最后是限量 1,000 个名额的先锋优惠。
- 3
- 阶段：识别、记住、推荐
- 3
- 平台：传记、里程碑、问答
- 1,000
- 先锋优惠名额
- 2
- 语言：英文、中文
客户所托
老板滑完一页就要明白这个新概念。
Google 老板都熟悉。顾客请 AI 推荐时，AI 会怎么回答，却是比较新的问题。网站要在一个页面里提出这个问题，也把答案交代清楚。
自己先做到
公司劝老板让 AI 读懂品牌，自己的网站就要先让 AI 读懂。页面背后的资料，和页面上的文字一样重要。
两种语言都完整
网站有英文版和中文版，两边都要从第一个问题讲到最后一个按钮。
下一步要轻松
老板有兴趣，不必填表格，发一则 WhatsApp 讯息就可以开始谈。
设计概念
这个页面有两种读者。
Broccolink 的道理很简单：AI 只能推荐读过的东西。网站既然这样说，自己就要做到，所以同一个页面同时照顾两种读者。老板看到的是大字写成的清楚故事，机器读到的是公司和服务的结构化资料。页面上方的握手图，一边是人手，一边是机器手，说的也是这件事。
浏览路线
-
1
提问
开场画面只问一个问题。
-
2
沉默
机器人把手指按在唇上，沉默就看得见了。
-
3
串联
一条彩带串起识别、记住和推荐。
-
4
展开
三个平台，一次展开一张卡片。
-
5
考虑
大脑周围三张小卡，接着是优惠。
-
6
联络
最后一个按钮打开 WhatsApp。
灵感从何而来
名字
BROCCO 是实心黑字，LINK 是彩色细线。标志本身就把名字分成两半：粗字给人读，颜色负责连接。整个页面都照这个分法来做。
图书管理员
网站把 AI 比作图书管理员：资料库里没有关于您品牌的书，就无从推荐。这个比喻贯穿全页，把技术概念变成每位老板都想象得到的场景。
握手
人手与机器手在品牌色的光晕上相握。这张图放在页面上方，因为这项服务做的正是这件事，LINK 这个字说的也是这件事。
设计风格
黑字给人读，彩色负责连接。
页面大部分是白色，标题用极粗的黑字。颜色来自一条由蓝经洋红到橙的渐变，取自标志里的 LINK。渐变用在负责连接的地方：握手图、彩带和按钮。
色彩
- 白色
#FFFFFF页面底色 - 近黑
#141414标题、收起的卡片、页脚大字 - 天蓝
#2AACE2渐变起点、引号 - 洋红
#EA0A8C渐变中段、名额标签 - 橙色
#F47A1F渐变终点
白色和浅色约占页面四分之三，渐变每次出现都格外醒目。
字体
Does AI know your story?
Poppins · 开场的问题，正式网站用特粗AI can only recommend what it has read.
Poppins · 章节标题，字号和粗细与开场的问题相同Imagine AI as a librarian. If there are no books about your brand in its library, it cannot recommend you to readers.
Poppins · 正文彩带
一条彩带卷出三个圈，颜色由蓝转到橙。识别、记住、推荐，读起来就像路上的三站。彩带上的字看起来就是网站的第二种字体 Android 7。这种字体方正，带点机器感，也用在每个标题上方的标签。
细节
在电脑版上，一张卡片展开，用浅色底；另外两张收起，用黑色底。鼠标移到收起的卡片上，那一张就展开。三段长说明变成一次看一段，收起的文字也还留在网页代码里。
节奏
- 提问
- 握手
- 原因
- 彩带
- 金句
- 方法
- 优惠
- 标志
页面以白色为主，中间穿插几段浓烈的颜色：握手图、彩带、黑色卡片，还有页脚的大字。上方色条按实际比例画出整个页面，每一章取最强的颜色。
逐章导览
照老板读的次序看一遍。
从第一个问题到最后一个按钮，框起来的是每一段道理的重点，旁边写明这样安排的原因。
开场先问一个问题
一行小字说顾客正在问 AI。下面是屏幕上最大的字：“Does AI know your story?”（中文版写的是“AI 认识你的品牌吗？”）。再往下是一句说明和一个按钮。
用意 问题会让老板想到自己的情况。换成一句陈述，很容易一眼带过。
沉默画成了机器人
标题写着“AI can only recommend what it has read”（大意：AI 只能推荐读过的东西），旁边的机器人把手指按在唇上。文字把 AI 比作图书管理员，资料库里没有关于您品牌的书。
用意 这里要讲的是“缺了什么”，很难用图表达。机器人做个嘘的手势，一看就明白。
三张卡片讲三个原因
The Shift、The Stakes、The Trust Mechanism 各占一张白卡，各有一句短标题，例如“10 Links vs. 1 Answer”（中文版写的是“10个链接 vs 1个标准答案”）。
用意 每句标题单独看也明白。老板只是扫一眼，三个原因也都看到了。
一条彩带分三段
彩带横过整个屏幕，卷出三个圈，分别是 Recognize、Remember、Recommend，圈里各有图标。
用意 三个词列成清单，很快就忘。放在一条不断开的彩带上，读起来就是一段有方向的路。
一次展开一张卡片
方法分三个平台。鼠标移到卡片上，卡片就变宽、转成浅色，显示图标和说明，另外两张继续收起。
用意 三个名称一眼看全，细节只读自己想看的那一张。
大脑周围三张小卡
1,000 Brand Pioneers 标题下方，中间是一颗多面切割的大脑，周围三张渐变小卡：Triple Verification、Global Indexing、Permanent Asset。
用意 大脑代表第二种读者，全页说的就是这位读者。小卡围着大脑摆放，读起来不像普通清单。
最后只留一个按钮
先是优惠，接着一句收尾的话，再来一个打开 WhatsApp 的按钮。按钮下方，Broccolink 大字横跨整个屏幕。
用意 读到这里，老板只剩一件事要做。离开之前看到的最后一样东西，就是这个大大的名字。
一个问题，一个按钮机器人与图书管理员
三张卡片识别、记住、推荐移上去就展开三张小卡，一颗大脑优惠、按钮、大字
手机版
手机上同样一路读到底。
手机没有鼠标，页面就换一种方式呈现，故事的次序不变。
- 彩带按比例缩小，仍然排成一行，三个阶段连在一起读
- 三张方法卡片上下排列，图标和全文都直接显示
- 三张小卡排成一列，放在大脑上方
幕后功夫
还有一位读者您看不见。
前三项是写给机器读的，访客看不到，却正是这个网站的重点。后三项让人读得到页面，也联络得到公司。
公司资料
结构化资料写明公司名称、标志、简介，以及服务范围是马来西亚。
服务资料
另一组资料写明服务类型 Answer Engine Optimization，并注明由 Broccolink 提供。
写给机器的问答
四个常见问题，例如“What is AEO?”，以问答资料的形式写在页面背后。
英文、中文
两种语言各有自己的网址，再用语言标记互相连接。屏幕左下角留着两个圆形按钮，随时可以切换。
每个按钮都通 WhatsApp
三个渐变按钮打开的都是同一个号码的对话，不必填表格。
没有鼠标也能看
手机版的方法卡片全部展开。电脑版上，收起的卡片文字也留在网页代码里。
- 1
了解您的业务
Broccolink 卖什么，谁需要，怎样向从没想过这件事的老板说明 AI 能见度。
- 2
文案撰写
为每一章写好短标题和平实的比喻，英文、中文都有。
- 3
设计与开发
先定渐变、彩带和卡片的展开方式，再逐章做电脑版和手机版。
- 4
SEO 与上线
设好网页标题、语言标记，以及公司、服务和问答的结构化资料，然后上线。
常见问题
您可能想问。
有新服务要向市场说明？欢迎 WhatsApp Ricky（+6011-1142 1029）详谈。
Potadot 为 Broccolink 做了什么？
我们定下构思，撰写文案，设计页面，开发英文、中文双语网站，并完成 SEO 设定、结构化资料和 WhatsApp 链接。
为什么只做一个长页面？
Broccolink 的概念要分几步讲，每一步都接着上一步。放在同一个页面，按次序读下来，道理才连得起来。
什么是结构化资料？这个网站为什么看重？
结构化资料写在网页代码里，用机器读得懂的格式说明公司和服务。这个网站尤其看重这一点，因为让机器读懂品牌，正是 Broccolink 的生意。
我的生意也能这样做吗？
可以。如果顾客要先弄懂一个新概念才会买，我们就先找出最平实的比喻，像这里的图书管理员，再照着比喻安排页面。不妨把您的服务告诉我们，我们再给您具体建议。
