架构

Lumo 拆成三个仓库，让权限、发布节奏与故障域保持分离。设计语言是三者之间唯一刻意共享的东西。

产品运行时#

两个扩展都是 Chrome MV3 上的 WXT 项目。React 渲染界面；Tailwind 与 shadcn 风格原语提供组件层；Motion 负责布局与入场动效。

站点运行时#

本站使用 React Router 8 framework mode，设置 ssr: false 并全量预渲染。构建时把每个路由渲染成 HTML，运行时水合成普通 SPA。生产环境没有服务器。

export default {  ssr: false,  prerender: async ({ getStaticPaths }) => [    ...getStaticPaths(),    ...docPaths,  ],} satisfies Config;

静态产物在 build/client。Cloudflare Workers 以静态资产方式直接托管；每个已知路由都有对应文件，未知 URL 会落到生成的 404.html。

共享设计语言#

• OKLCH 语义令牌，带调色板与主题色轴。
• 相同的字号阶梯、圆角、材质与动效曲线。
• 相同的四条设计法则，在营销面与工具面上有不同的落地方式。
• i18next 资源，中英文 key 严格对齐。