ZON STYLES ATLAS
RECIPES

最佳实践不是“页面模板”，而是“页面配方”

Nathan Curtis 常讲 design system 要同时服务组件和产品生产。这里的 recipe 就是在说明：什么场景适合什么 section 顺序、什么 theme、什么隐私级别、什么部署方式。

BACK TO OVERVIEWOPEN COMPONENTSOPEN SCHEMA
PAGE RECIPES

四类页面的推荐配方

不要每次新站点都从空白页想起。先选 recipe，再填 document，最后只在确实必要时扩 schema。

Private Hiring Page
noirprivate

适合强调判断力、可验证信号和行动入口。优先暗底，方便形成沉浸感。

PATH
/hidden-hiring-zon-2026-system
SECTION ORDER
narrativecardsmetricscomparisontimelinefaqspotlightlinks
Public Intro Page
paperpublic

适合面向更广泛访问者。亮底更适合长时间阅读和公开索引。

PATH
/intro-or-profile
SECTION ORDER
narrativemetricscardstimelinelinks
Case Study Page
framepublic

适合强调问题、决策、结果和复盘，用 frame 皮肤会更有系统感。

PATH
/case-study-example
SECTION ORDER
spotlightcomparisonstepsmetricsquotelinks
Style Board / Atlas
framepublic

适合作为设计系统入口或组件说明页，不建议写成长段个人叙事。

PATH
/styles
SECTION ORDER
cardsmetricscomparisonfaqlinks
PRODUCTION FLOW

推荐的生产顺序

顺序本身就是成本控制工具。先 data，后 theme，最后 route 和域名。

WORKFLOW
1. 在 data/sites/<slug>.ts 写 SiteDocument
2. 在 app/<slug>/page.tsx 只装配 document + renderer
3. 需要新 kind 时先改 data/site-schema.ts 与 site-renderer.tsx
4. 需要新皮肤时只改 data/site-themes.ts
5. 需要子域入口时改 middleware.ts
DECISION RULE
01要改信息：改 data。
02要改黑白皮肤：改 theme token。
03要改 section 结构：改 schema + renderer。
04要开新页面：新建 data document，再加薄 route。
05要开新子域：统一走 middleware host rewrite。
SUBSITE DEPLOY

子域不是只映射首页，而是映射整段 docs 路径

这轮把 styles 和 motion 都补成了 host rewrite。这样样式站和动效站以后都是真正的子站，而不是只有一个首页入口。

DOMAIN MAP
styles.zondev.top    -> rewrite to /styles/*
motion.zondev.top    -> rewrite to /motion/*
intro.zondev.top     -> keep normal app routes

Result:
- / on styles host serves the styles atlas overview
- /components on styles host serves /styles/components
- /schema on styles host serves /styles/schema
REPO TOPOLOGY
data/
  site-schema.ts
  site-themes.ts
  sites/
components/
  site-system/
app/
  styles/
  hidden-*.tsx
middleware.ts
APPLY

现在这套系统已经够支撑你继续做下一批站点

真正剩下的工作，不再是“有没有底座”，而是沿着这些 recipe 去累计更多 data document 和少量新增 section kind。

OPEN LIVE REFERENCE PAGE