Design

为出版物级官网而设计的前端工程体系

基于 Nuxt 的 SSG-first 架构，从静态 HTML 开始，逐步扩展到 CMS、SSR、多语言和复杂内容系统。这里主要包含两部分：视觉与组件层面的设计系统，以及支撑站点运行的技术架构。

Design System

设计系统

包含整体架构、颜色、间距、排版、动效、组件示例、响应式策略和开发指南。

Technical Architecture

记录 Nuxt 4 项目的真实技术选型、模块分层、已落地能力和后续规划。

Design Scope

设计系统负责视觉、组件和交互一致性；技术架构负责框架、内容、媒体、治理和后续扩展。两者共同支撑这个个人网站长期演进。

通过 token、layout、typography、motion 和 base components 保持页面一致。

通过 Nuxt、内容系统、SEO、安全、PWA 和代码规范保证站点可维护。

把已落地、待规范和规划中的能力区分清楚，避免文档和代码脱节。

Relationship

个人网站先服务内容表达，再用系统化规则降低长期维护成本。设计系统和技术架构都是支撑层。

01. 表达目标

先明确个人网站要承载的内容、读者和更新节奏。

02. 设计系统

再把视觉和交互沉淀为 token、基础规则和组件。

03. 技术架构

最后用工程选型支撑内容维护、性能、SEO、安全和未来扩展。