页面事实、结构、链接和顺序全部放在 data/sites。这里不放颜色、不放布局 class、不放交互细节。
Styles Atlas 现在不是说明书首页,而是这套黑白网页系统的文档入口
目标不是做一次性页面,而是做一个以后所有网站都能共用的生产系统。 这里负责说明 theme token、component primitive、schema kind、route recipe 和子域部署方式怎么一起工作。
最佳实践不是多写页面,而是给页面建立稳定边界
系统层先稳定,页面层才会越来越便宜。这个 atlas 现在把生产问题拆成四层,而不是只展示一套视觉结果。
theme token 只决定黑白皮肤:背景、前景、边框、面板、按钮与氛围,不写业务文案。
renderer 只负责把 schema 和 theme 组合成页面,不偷偷塞业务内容。
host rewrite + route layout 让一个 Vercel 项目承接多个子站,不复制整站。
这个 docs 站现在分成三个真正可用的工作面
入口页负责总览;components 负责看原语和 block;schema 负责字段规范;recipes 负责页面组装与部署约定。
看基础视觉原语、按钮/卡片/导航/section block 怎么组合成稳定的页面骨架。
看所有 section kinds、字段结构、什么时候该扩 kind,什么时候只需要换 data。
看 intro / hiring / case study / style board 这些页面应该怎么排 section 顺序和部署路径。
同一份内容,现在已经可以切三套黑白皮肤
theme token 只换气质和表面,不换内容本身。下一个页面如果要换明暗或网格密度,不再复制 page.tsx。
Noir Editorial
暗底叙事,适合私有求职页、作品集长页与更沉浸的阅读场景。
皮肤变化只来自 theme token。
Paper Ledger
亮底纸感,适合资料页、介绍页、长文与更克制的黑白展示。
皮肤变化只来自 theme token。
Mono Frame
更系统感的黑白网格皮肤,适合样式站、规范站和组件展示。
皮肤变化只来自 theme token。
先定义 token 家族,再定义组件
Brad Frost 式设计系统里,token 应该先成为公共语言,再由 block 和 route 消费。这里已经把黑白站最常用的 token 面拆出来。
background / panel / panelStrong / border / line / shadow
kicker / label / copy / note / chip
buttonBg / buttonFg / buttonGhost / navLink states
grid / washA / washB / themeColor / colorScheme
样式库要能被团队记住,就要有稳定的文件拓扑
文档页、renderer、schema、theme、site data、host rewrite 现在都在固定位置。以后扩新页面,只需要继续沿着这条拓扑增加。
app/styles/page.tsx
app/styles/components/page.tsx
app/styles/schema/page.tsx
app/styles/recipes/page.tsx
components/site-system/site-renderer.tsx
components/site-system/styles-atlas.tsx
data/site-schema.ts
data/site-themes.ts
data/sites/<slug>.ts
middleware.ts组件文档不是只给截图,要给真实皮肤中的可读结果
下面这块 preview 用的就是 site token 和真实 class。components/schema 子页会继续把 block 级别的能力拆开讲。
Reusable page shell
所有站点先共享节奏、surface、按钮与文本层级,再让 data 自己决定内容。
当前系统样板页已经接到真实 route,不影响你原来的满意版本
新的结构化求职页继续保持独立 route。你可以继续保留原始隐藏页,同时让新的系统页承担“以后怎么生产”的职责。