跳到主要内容
The webanion.com home page hero in English

Webanion:带 MCP 服务器的无头 CMS 作品集平台

Webanion brand logoWebanion网站开发5月 12, 20251 年 6 个月

静态作品集网站既承载不了五种语言的内容,也跟不上背后写作的节奏,于是我们用一个平台取代了它。一套无头 CMS 保存每一份案例研究、文章和记录;一个 Next.js 前端以英语、孟加拉语、西班牙语、印地语和中文呈现它们;一台 MCP 服务器则把同样的内容开放给 AI 助手,让被问及这些工作的智能体去读取源头,而不是根据抓取结果猜测。搜索、媒体管理、审批流程和一个公开的发现层都运行在它之上。证据是递归的:你正在阅读的这个页面,正由本条目所描述的系统提供。

Next.jsStrapiPostgreSQLTypeScriptGraphQLDockerKubernetesNode.js
Md Moniruzzaman Image

Md Moniruzzaman

完整故事

像产品一样打造的作品集:一条记录贯通每个页面、每种语言,再加一台让 AI 助手直接从源头读取内容的服务器。

跟不上节奏的作品集

对工作室来说,拿得出手的证明决定成败。Webanion 的旧网站由一组手工搭建的页面组成:每新增一个项目,就得修改其中好几页;作品背后的文字从来没能放上网站;用孟加拉语、西班牙语、印地语或中文阅读的买家,看到的要么是英文,要么什么都没有。更糟的是,买家已经开始让 AI 助手帮忙列候选名单,而这些助手只能根据抓取来的、早已过时的页面去猜。

解决办法是不再把作品集当作一堆页面,而是把它当作产品来打造:每个案例研究只有一个唯一可信的来源,以人们各自的语言呈现给读者,也以 AI 助手可以信赖的形式提供给助手。

每个案例研究都是一条记录,而不是一个页面

项目、服务、公司、客户、推荐评价和文章,都是无头 CMS 中彼此关联的结构化记录。一条记录只需修改一次,所有提到它的页面都会随之更新:项目页、公司页、服务页和搜索结果。

对买家来说,这意味着证明始终是最新的,而且始终相互关联,从他们需要的服务,到体现这项服务的项目,再到为之背书的人。对创始人来说,这意味着新项目只需发布一次,而不必花一整个下午把它复制到各个页面。

Brand colour backdrop
The Strapi admin behind the site: every portfolio record with its showcase, service and five language versions
The live Webanion project page on webanion.com, rendered from one of those records

同一条记录,五种语言

英语为主,每条记录同时带有自己的孟加拉语、西班牙语、印地语和中文版本,并基于同一结构在各种屏幕尺寸上呈现。达卡、马德里、德里或上海的买家,都能用自己的语言、以和英文同样的深度阅读这些作品,而不是只看到一个翻译过的首页,背后处处仍是英文。

Brand colour backdrop
The live home page in English, the primary language, on a desktop monitor
The same home page in Bengali on a laptop
The same home page in Hindi on a phone

故事就是项目页,从封面到结尾

重要的案例研究会有一个完整故事:先是封面,然后是在同一张画布上依次堆叠的各个板块,每个板块都有自己的布局和动画插图,全部在同一个 CMS 中撰写和编排。故事本身就是项目页,所以从搜索进来的买家不必离开页面,就能读完问题、方案和结果。故事同样是数据,因此能像其他内容一样翻译,也无需开发人员就能修改。

Brand colour backdrop
A live published story in one window: the site header, the story cover, the project summary and its sections running down the page

一台 MCP 服务器,让 AI 助手读取源头

与网站并行运行的还有一台 MCP 服务器,它把同样的内容以带类型定义的工具形式开放给 AI 助手:搜索作品集、读取项目、列出服务、查看推荐评价。当 AI 助手被问到 Webanion 时,它读取的是记录本身,而不是根据抓取结果去猜;想进一步了解的买家,还可以直接在助手里申请访问密钥并发送消息。

这让作品集在一个大多数工作室尚未涉足的地方成为获客渠道,而且助手给出的每一个回答,都出自工作室自己之手。

Brand colour backdrop
The live MCP page on webanion.com: one public endpoint, what an assistant can ask and what it will never be given
An AI assistant connected to the Webanion MCP server, listing its 27 tools

从设计上保障私密

作品集里有些内容绝不能泄露:客户联系方式、需保密的公司、尚未批准的草稿。因此,公开范围是一份在同一处逐个字段确定、并在 CI 中强制执行的白名单,凡是不在名单上的内容,网站和 MCP 服务器都无法返回。草稿在发布之前始终不可见,所有者的管理后台则由三道相互独立的检查把守。

受 NDA 约束的客户可以在不具名的情况下作为证明展示,而这往往决定了一个案例研究能否存在。

未经审读,绝不上线

每一处改动都会先以草稿形式进入系统,无论是在管理后台里输入的,还是由 AI 助手通过所有者自己的 MCP 服务器起草的。创始人会在真实页面的私密预览中审读,预览对搜索引擎隐藏,确认后才发布。一人工作室也能让作品集像代理公司那样保持更新,同时不发布任何一个没人读过的字。

Brand colour backdrop
The Invoice Manager story open as a draft in the Strapi admin, with Publish and Open preview
The draft preview of the same story on the real site, hidden from search engines until it is published

不断累积的证明

添加到 Webanion 的每个项目,当天就会出现在相应的页面上,覆盖五种语言,可以在网站上搜索到,也能由 AI 助手作答。对买家来说,这是看到可信且相关作品的最快途径;对工作室来说,这是一个随着每条记录不断增值、而不会逐渐过时的作品集。

这个平台运行在与其所介绍的客户项目相同的自托管 Kubernetes 集群上,详见零停机迁移的故事;帮助运行它的 AI 助手,则在AI 工程的故事中有介绍。

你可能也喜欢

Coverfanz Logo
Coverfanz Admin App
网站开发
2 个月
Upwork brand logo

CoverFanz:表演者市场平台的管理后台

这套管理后台让 CoverFanz 的创始人从上线第一天起,无需求助开发人员就能运营一个表演者市场平台。每一位粉丝、表演者和演出场所都在同一个列表中,附带订阅状态;新场所在地址核实之前一直待在审批队列里;举报会附上原因;表演类型是一份由创始人掌控的列表。它与应用在同一个月内、基于同一套 GraphQL API 构建。

Md Moniruzzaman Image

Md Moniruzzaman

4月 29, 2022

Amr Mashrah
Al Insaf Logo

Al-Insaf:含总账与贷款的合作社金融平台

一家合作社金融机构此前把社员档案、储蓄、贷款和投资人资本分散在纸质记录与电子表格之间,既无法审计任何一个网点,也无法干净地完成日终结账。我们构建了一套系统把这些全部收拢:社员登记、每日收款、从申请到放款的完整贷款流程、多网点总账、投资人资本,以及一份记录谁做了什么的审计日志。工作人员在每笔收款发生时当场记录,管理者审批贷款并完成日终结账,而权限模型决定每个角色能看到什么、能做什么,而不是简单地把按钮藏起来。本案例研究中展示的一切都运行在预置的演示数据上;真实的社员档案从不出现在作品集材料中。

Md Moniruzzaman Image

Md Moniruzzaman

Md Nuruzzaman
Sukalyan Research Group logo
Sukalyan Research Group website on desktop
网站开发
3 个月
Webanion brand logo

Sukalyan Research Group:一所大学药学实验室的网站

Jahangirnagar University 的 Department of Pharmacy 中 Sukalyan Research Group 的网站,由 Sukalyan Kumar Kundu 教授领导:七个研究方向及其技术和论文,一份按年份归类、可筛选的一百二十四条 Google Scholar 记录的论文列表,首席研究员的简介,按姓名和肖像列出的成员,一面校友去向墙,一个 Lab Life 图库,以及带邮件清单的四条路径加入页面。Next.js 静态导出,React 和 TypeScript,Tailwind CSS,所有内容都在一个查询函数之后,因此迁移到无头 CMS 时其他一切都不必改变。作为单个容器部署在自托管的 Kubernetes 集群上。

Md Moniruzzaman Image

Md Moniruzzaman

9月 30, 2026

Sukalyan Kumar Kundu, PhD
Read the Md Moniruzzaman blog

博客是来自生产一线的笔记:架构决策、经受住真实用户考验的 AI 系统、能自己挣回成本的基础设施。写于工作之中,而不是隔岸观火。