[{"data":1,"prerenderedAt":126},["ShallowReactive",2],{"content-/blog/design-system-building":3,"related-blog":101},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":95,"_id":96,"_source":97,"_file":98,"_stem":99,"_extension":100},"/blog/design-system-building","blog",false,"","设计系统构建","如何构建和维护设计系统","设计系统构建, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":88},"root",[18,26,32,47,52,65,70,78,83],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","构建设计系统是实现视觉与交互一致性的长期工程。本文总结关键元素与落地建议。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"组件与令牌",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36,42],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"设计令牌（Design Tokens）：集中管理颜色、间距、排版等基础变量，便于跨平台同步。",{"type":19,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"可复用组件库：将组件抽象成可组合的原子与模块，减少重复实现。",{"type":19,"tag":27,"props":48,"children":50},{"id":49},"协作流程",[51],{"type":24,"value":49},{"type":19,"tag":33,"props":53,"children":54},{},[55,60],{"type":19,"tag":37,"props":56,"children":57},{},[58],{"type":24,"value":59},"设计与工程对齐：通过 Storybook、设计稿与规范文档确保实现一致。",{"type":19,"tag":37,"props":61,"children":62},{},[63],{"type":24,"value":64},"变更流程：组件变更需评估向后兼容性并提供迁移指南。",{"type":19,"tag":27,"props":66,"children":68},{"id":67},"工程实践",[69],{"type":24,"value":67},{"type":19,"tag":33,"props":71,"children":72},{},[73],{"type":19,"tag":37,"props":74,"children":75},{},[76],{"type":24,"value":77},"提供可视化示例、变体和可交互文档，便于设计师与开发者联动。",{"type":19,"tag":27,"props":79,"children":81},{"id":80},"结论",[82],{"type":24,"value":80},{"type":19,"tag":20,"props":84,"children":85},{},[86],{"type":24,"value":87},"设计系统是跨团队协作的支撑，投入在初期可以节省大量长期维护成本，关键在于治理与可持续演进。",{"title":7,"searchDepth":89,"depth":89,"links":90},3,[91,92,93,94],{"id":29,"depth":89,"text":29},{"id":49,"depth":89,"text":49},{"id":67,"depth":89,"text":67},{"id":80,"depth":89,"text":80},"markdown","content:blog:design-system-building.md","content","blog/design-system-building.md","blog/design-system-building","md",[102,110,118],{"_path":103,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":104,"description":105,"keywords":106,"author":11,"date":12,"category":13,"image":14,"_type":95,"_id":107,"_source":97,"_file":108,"_stem":109,"_extension":100},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":111,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":112,"description":113,"keywords":114,"author":11,"date":12,"category":13,"image":14,"_type":95,"_id":115,"_source":97,"_file":116,"_stem":117,"_extension":100},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":119,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":120,"description":121,"keywords":122,"author":11,"date":12,"category":13,"image":14,"_type":95,"_id":123,"_source":97,"_file":124,"_stem":125,"_extension":100},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945278038]