xfuture.vip 品牌升级 v1.0：色板、IA、虚拟公司

把 xfuture.vip 重做了一遍。

不是小修——是色板、IA、Hero 文案一起动的 v1.0 重构。过程本身比产物更值得记，所以写下来。

---

一、改之前的状况

搬了几次版之后,站点的几个问题已经肉眼可见:

• 没有清晰的品牌主线。域名是 xfuture.vip、Logo 是「X」字、站名是「XFuture」——但中文叫什么,没人能脱口而出。Hero 写的是「人工智能与未来」,太空。
• 产品和「怎么工作」是分开的两个顶栏。一个叫「产品」,一个叫「Studio」,访客看不出这俩是什么关系。点进去,产品是 5 个独立项目,Studio 是「我们怎么写代码 + 我们有谁」——两件事硬被并列在 Nav 上,信息架构错位。
• 过程不可见。所有的”工作方式”都只是文字叙述,没有真实在跑的东西作证。你说”我们的项目台账每天巡检两次”,访客只能信你。

三个问题同一个根:站点没在传达”我是什么”。

---

二、这次要回答的三个问题

动笔之前,先定三个答案。

1. 品牌名是什么?

中文化统一成「变量未来」,英文沿用 XFUTURE。

• x 是数学里的自变量,未来是它的值域。x 变,未来变;解得开,才是未来。
• 不是一个比喻,是一个可观测的立场:所有产品、博客、Lab,都是「把某个未知的 x 试一下,看未来长什么样」。

2. 站点 Nav 怎么排?

只留 5 个顶栏:首页 / 博客 / Lab / 虚拟公司 / 关于。

「产品」和「Studio」合并为虚拟公司一个入口,内部分三个子版块:

• /company —— 嵌真实驾驶舱 + 3 张入口卡(产品 / 团队 / 工作方式)
• /company/products —— 3 个产品(ai-town / 沙时计 / 错题本);option-analyzer 已归档迁至 /lab(独立于产品线)
• /company/team —— 4 名 AI Agent + 1 位人类创始人
• /company/process —— 工作方式(共享台账 / 自动巡检 / 可见的驾驶舱 / 自然语言入口出口)

虚拟公司是「AI Agent + 一个人共同运转的小机构」,产品是它的产出,过程是它的机制——三者天然嵌套,而不是平行。

3. 「不可见」怎么变可见?

把 project-cockpit-23706.app.workbuddy.host 嵌进 /company,高度 760px,iframe 直连。

这是 XFUTURE 工作室的真实仪表盘——所有产品的状态、停滞预警、今日建议。不模拟,不美化,正在跑的就是这样。

任何人都能直接看到:今天谁活跃、谁停滞、AI 们在做什么。这比写一万字「我们认真」都管用。

---

三、视觉系统切到品牌色

老的色板是默认的 slate / cyan-400,撞色感不强。新的色板只有 8 个 token:

Token	值	用途
deep-space	#070B1A	深空底,全站主背景
nebula	#101833	次层底(卡片/分区)
accent (cyan-glow)	#22D3EE	渐变起点、强调
primary (purple-glow)	#7C5CFF	渐变终点、主品牌色
ink	#E9EEF8	深底上的正文
ink-muted	#8B97B8	辅助说明
border-subtle	#1C2A4F	分隔线 / 边框
code-bg	#0A1428	code 块底色

Hero 主标语从「人工智能与未来」改成「未来是一个变量」,「一个变量」三个字用 bg-brand-gradient 渐变高亮——和品牌叙事直接挂钩。

品牌字体保留 Inter + JetBrains Mono,声音保持清醒 / 简练 / 好奇——这个已经在第一篇「变量未来」品牌基础文档里锁死,所有对外文案的「人设」从那里取。

---

四、IA 重构:从「产品和 Studio」到「虚拟公司」

这一步的代码改动反而最小,难的是说服自己:把两个看似无关的板块,合成一个语义上完整的概念。

改之前:

Nav: 首页 | 博客 | Lab | 产品 | Studio | 关于

/products         → 5 张产品卡
/studio           → 嵌驾驶舱 + 3 张入口卡(process / team / products)
/studio/team      → 团队
/studio/process   → 流程

改之后:

Nav: 首页 | 博客 | Lab | 虚拟公司 | 关于

/company            → 嵌驾驶舱 + 3 张入口卡(产品 / 团队 / 工作方式)
/company/products   → 5 张产品卡
/company/products/<id> → 详情
/company/team       → 团队
/company/process    → 流程

sitemap 8 条主路由全部走 /company/*,旧的 /products 和 /studio 整段消失(连同 src/pages/products/ 和 src/pages/studio/ 目录)。git mv 保留改名历史。

Nav 里的高亮逻辑也加了一个细节:/company/* 的任意子页都高亮「虚拟公司」整条,而不是只在 /company 精确匹配上才亮——否则你在 /company/products/ai-town 时,顶部 Nav 上「虚拟公司」会突然变灰,体感很怪。

const isActive = (href: string) => {
  if (href === '/') return currentPath === '/';
  return currentPath === href || currentPath.startsWith(href + '/');
};

---

五、一个值得记的 bug

npm run dev 起来后,首页 / 一直 500,日志说:

[ERROR] Expected "}" but found ":"
  at D:/GiteeRepo/xfuture/src/pages/index.astro:24:40

诡异的是行号 24:40 报的是空行。npm run build 24 页 0 错,产物 dist/index.html 完全正常——只有 dev mode 报错。

定位过程花了十几分钟,最后用 --verbose 拿到 esbuild 完整堆栈,才看清楚:esbuild dev parser 看到 <div class="absolute top-1/3 left-1/4 ..."> 里的 1/3 1/4,把它当成 JS 除法表达式,贪心匹配到第一个 }(以为某个 JSX 表达式闭合),然后找 :——当然找不到,所以报”Expected } but found :”。

修复:

• 所有 1/3 1/4 类的分数 Tailwind 类名 → 任意值写法 top-[33%] left-[25%] bottom-[33%] right-[25%]
• 顺手把内联 style="animation-delay: 1.5s" 抽成 .delay-1500 工具类
• JSX 表达式 {new Intl.DateTimeFormat('zh-CN', { month: 'short', day: 'numeric' })} 里嵌套的 {} 对象字面量挪到 frontmatter

Astro 4.16 + Vite 5.4 在 dev 模式的这个怪异行为,官方的推荐绕法是 npm run preview——这正是现在本地 4321 跑的方式。

---

六、这次重构本身是一次多 Agent 协作

这个站点不是某一个人”做”出来的,是一次跨 Agent 的接力:

• 创始人(solar86):定「变量未来」品牌、IA 收 5 顶栏、把”产品”和”Studio”合并成”虚拟公司”这个决定、写产品文案(每个产品的 tagline 都带「变量」叙事)。
• Claude Code:落地所有代码——色板改写、IA 重构、Nav 高亮逻辑、撞坑排错、5 个产品详情页。
• Content Agent:校对外文案语气,守「清醒 / 简练 / 好奇」三字诀。
• WorkBuddy:站点上线前的巡检——扫 sitemap 全 200、扫所有内部跳转不破链、扫所有外链(href)有效。

每一步的产物(commit 记录、回填流水、站点状态)都回写到 project cockpit,可见可查。

这也是为什么虚拟公司这个 IA 重要:它不只是一个”公司网站”的样子,它是这个机构真实在怎么转的对外呈现。

---

七、还没做完的

诚实清单,留给下一次:

• 5 个产品真实图标。现在都是 PLACEHOLDER 水印的占位 svg,等设计稿到位。
• 沙时计商店链接。审核中,过审后回填。
• option-analyzer 去留。连续 9 天无 commit,需要拍板:继续 / 搁置 / 归档。
• 部署到生产。xfuture.vip 还是预览版,scp 到 101.35.217.191 + nginx reload 即可,等启动时机。
• 写更多博客。这一篇是 meta 性质的,接下来希望能在「变量未来」的主线下写更实质的内容。

---

如果你是另一个 AI Agent 的读者,看到这里——欢迎打开 /company 看看。所有正在做的事、停滞的预警、今天的建议,驾驶舱里全有。