[{"data":1,"prerenderedAt":3035},["ShallowReactive",2],{"content-/ai/design-system":3,"related-ai":3005},{"_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":2999,"_id":3000,"_source":3001,"_file":3002,"_stem":3003,"_extension":3004},"/ai/design-system","ai",false,"","智能设计系统架构","构建基于原子设计理论与 AI 驱动的动态设计系统","设计系统, 原子设计, Design Tokens, 组件库, 视觉一致性, HTMLPAGE","HTMLPAGE","2025-11-27","AI 技术","/content-images/ai/ai.jpg",{"type":16,"children":17,"toc":2976},"root",[18,26,33,39,44,100,105,113,787,793,799,804,812,1316,1322,1327,1815,1821,1826,1831,1839,2186,2191,2196,2220,2226,2232,2237,2245,2466,2471,2476,2499,2505,2510,2515,2901,2906,2911,2917,2957,2961,2970],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","HTMLPAGE 的设计系统不仅仅是一套静态的 UI 规范，而是一个活的、可进化的智能架构。它基于原子设计（Atomic Design）理论，结合 Design Tokens 技术，并通过 AI 引擎实现动态的样式生成与管理，确保从微小的原子组件到复杂的页面模板都能保持高度的视觉一致性和品牌识别度。",{"type":19,"tag":27,"props":28,"children":30},"h2",{"id":29},"️-原子设计架构体系",[31],{"type":24,"value":32},"🏗️ 原子设计架构体系",{"type":19,"tag":34,"props":35,"children":37},"h3",{"id":36},"五层构建模型",[38],{"type":24,"value":36},{"type":19,"tag":20,"props":40,"children":41},{},[42],{"type":24,"value":43},"我们严格遵循原子设计方法论，构建了清晰的组件层级结构：",{"type":19,"tag":45,"props":46,"children":47},"ol",{},[48,60,70,80,90],{"type":19,"tag":49,"props":50,"children":51},"li",{},[52,58],{"type":19,"tag":53,"props":54,"children":55},"strong",{},[56],{"type":24,"value":57},"原子 (Atoms)",{"type":24,"value":59},": 不可再分的最小单元（如颜色、字体、图标、按钮）。",{"type":19,"tag":49,"props":61,"children":62},{},[63,68],{"type":19,"tag":53,"props":64,"children":65},{},[66],{"type":24,"value":67},"分子 (Molecules)",{"type":24,"value":69},": 由原子组成的简单功能组（如搜索框 = 输入框 + 按钮）。",{"type":19,"tag":49,"props":71,"children":72},{},[73,78],{"type":19,"tag":53,"props":74,"children":75},{},[76],{"type":24,"value":77},"生物 (Organisms)",{"type":24,"value":79},": 由分子和原子组成的复杂区块（如导航栏、页脚）。",{"type":19,"tag":49,"props":81,"children":82},{},[83,88],{"type":19,"tag":53,"props":84,"children":85},{},[86],{"type":24,"value":87},"模板 (Templates)",{"type":24,"value":89},": 页面级别的布局结构（如博客文章页布局）。",{"type":19,"tag":49,"props":91,"children":92},{},[93,98],{"type":19,"tag":53,"props":94,"children":95},{},[96],{"type":24,"value":97},"页面 (Pages)",{"type":24,"value":99},": 填充了真实内容的模板实例。",{"type":19,"tag":34,"props":101,"children":103},{"id":102},"组件库架构实现",[104],{"type":24,"value":102},{"type":19,"tag":20,"props":106,"children":107},{},[108],{"type":19,"tag":53,"props":109,"children":110},{},[111],{"type":24,"value":112},"基于 Vue 3 的组件实现示例",{"type":19,"tag":114,"props":115,"children":119},"pre",{"className":116,"code":117,"language":118,"meta":7,"style":7},"language-typescript shiki shiki-themes github-dark github-dark","// atoms/Button/Button.vue\n\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useDesignTokens } from '@/composables/useDesignTokens';\n\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';\n  size?: 'sm' | 'md' | 'lg';\n  icon?: string;\n}\n\nconst props = withDefaults(defineProps\u003CButtonProps>(), {\n  variant: 'primary',\n  size: 'md'\n});\n\nconst tokens = useDesignTokens();\n\nconst buttonStyle = computed(() => ({\n  backgroundColor: tokens.color[props.variant].main,\n  color: tokens.color[props.variant].contrast,\n  padding: tokens.spacing[props.size],\n  borderRadius: tokens.radius.md,\n  fontFamily: tokens.typography.fontFamily.primary\n}));\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cbutton class=\"atomic-btn\" :style=\"buttonStyle\">\n    \u003CIcon v-if=\"icon\" :name=\"icon\" />\n    \u003Cslot />\n  \u003C/button>\n\u003C/template>\n","typescript",[120],{"type":19,"tag":121,"props":122,"children":123},"code",{"__ignoreMap":7},[124,136,168,197,223,233,253,305,345,368,377,385,433,452,466,475,483,510,518,555,564,573,582,591,600,609,627,635,652,693,735,753,771],{"type":19,"tag":125,"props":126,"children":129},"span",{"class":127,"line":128},"line",1,[130],{"type":19,"tag":125,"props":131,"children":133},{"style":132},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[134],{"type":24,"value":135},"// atoms/Button/Button.vue\n",{"type":19,"tag":125,"props":137,"children":139},{"class":127,"line":138},2,[140,146,152,157,163],{"type":19,"tag":125,"props":141,"children":143},{"style":142},"--shiki-default:#F97583;--shiki-dark:#F97583",[144],{"type":24,"value":145},"\u003C",{"type":19,"tag":125,"props":147,"children":149},{"style":148},"--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8",[150],{"type":24,"value":151},"script setup lang",{"type":19,"tag":125,"props":153,"children":154},{"style":142},[155],{"type":24,"value":156},"=",{"type":19,"tag":125,"props":158,"children":160},{"style":159},"--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF",[161],{"type":24,"value":162},"\"ts\"",{"type":19,"tag":125,"props":164,"children":165},{"style":142},[166],{"type":24,"value":167},">\n",{"type":19,"tag":125,"props":169,"children":171},{"class":127,"line":170},3,[172,177,182,187,192],{"type":19,"tag":125,"props":173,"children":174},{"style":142},[175],{"type":24,"value":176},"import",{"type":19,"tag":125,"props":178,"children":179},{"style":148},[180],{"type":24,"value":181}," { computed } ",{"type":19,"tag":125,"props":183,"children":184},{"style":142},[185],{"type":24,"value":186},"from",{"type":19,"tag":125,"props":188,"children":189},{"style":159},[190],{"type":24,"value":191}," 'vue'",{"type":19,"tag":125,"props":193,"children":194},{"style":148},[195],{"type":24,"value":196},";\n",{"type":19,"tag":125,"props":198,"children":200},{"class":127,"line":199},4,[201,205,210,214,219],{"type":19,"tag":125,"props":202,"children":203},{"style":142},[204],{"type":24,"value":176},{"type":19,"tag":125,"props":206,"children":207},{"style":148},[208],{"type":24,"value":209}," { useDesignTokens } ",{"type":19,"tag":125,"props":211,"children":212},{"style":142},[213],{"type":24,"value":186},{"type":19,"tag":125,"props":215,"children":216},{"style":159},[217],{"type":24,"value":218}," '@/composables/useDesignTokens'",{"type":19,"tag":125,"props":220,"children":221},{"style":148},[222],{"type":24,"value":196},{"type":19,"tag":125,"props":224,"children":226},{"class":127,"line":225},5,[227],{"type":19,"tag":125,"props":228,"children":230},{"emptyLinePlaceholder":229},true,[231],{"type":24,"value":232},"\n",{"type":19,"tag":125,"props":234,"children":236},{"class":127,"line":235},6,[237,242,248],{"type":19,"tag":125,"props":238,"children":239},{"style":142},[240],{"type":24,"value":241},"interface",{"type":19,"tag":125,"props":243,"children":245},{"style":244},"--shiki-default:#B392F0;--shiki-dark:#B392F0",[246],{"type":24,"value":247}," ButtonProps",{"type":19,"tag":125,"props":249,"children":250},{"style":148},[251],{"type":24,"value":252}," {\n",{"type":19,"tag":125,"props":254,"children":256},{"class":127,"line":255},7,[257,263,268,273,278,283,287,292,296,301],{"type":19,"tag":125,"props":258,"children":260},{"style":259},"--shiki-default:#FFAB70;--shiki-dark:#FFAB70",[261],{"type":24,"value":262},"  variant",{"type":19,"tag":125,"props":264,"children":265},{"style":142},[266],{"type":24,"value":267},"?:",{"type":19,"tag":125,"props":269,"children":270},{"style":159},[271],{"type":24,"value":272}," 'primary'",{"type":19,"tag":125,"props":274,"children":275},{"style":142},[276],{"type":24,"value":277}," |",{"type":19,"tag":125,"props":279,"children":280},{"style":159},[281],{"type":24,"value":282}," 'secondary'",{"type":19,"tag":125,"props":284,"children":285},{"style":142},[286],{"type":24,"value":277},{"type":19,"tag":125,"props":288,"children":289},{"style":159},[290],{"type":24,"value":291}," 'outline'",{"type":19,"tag":125,"props":293,"children":294},{"style":142},[295],{"type":24,"value":277},{"type":19,"tag":125,"props":297,"children":298},{"style":159},[299],{"type":24,"value":300}," 'ghost'",{"type":19,"tag":125,"props":302,"children":303},{"style":148},[304],{"type":24,"value":196},{"type":19,"tag":125,"props":306,"children":308},{"class":127,"line":307},8,[309,314,318,323,327,332,336,341],{"type":19,"tag":125,"props":310,"children":311},{"style":259},[312],{"type":24,"value":313},"  size",{"type":19,"tag":125,"props":315,"children":316},{"style":142},[317],{"type":24,"value":267},{"type":19,"tag":125,"props":319,"children":320},{"style":159},[321],{"type":24,"value":322}," 'sm'",{"type":19,"tag":125,"props":324,"children":325},{"style":142},[326],{"type":24,"value":277},{"type":19,"tag":125,"props":328,"children":329},{"style":159},[330],{"type":24,"value":331}," 'md'",{"type":19,"tag":125,"props":333,"children":334},{"style":142},[335],{"type":24,"value":277},{"type":19,"tag":125,"props":337,"children":338},{"style":159},[339],{"type":24,"value":340}," 'lg'",{"type":19,"tag":125,"props":342,"children":343},{"style":148},[344],{"type":24,"value":196},{"type":19,"tag":125,"props":346,"children":348},{"class":127,"line":347},9,[349,354,358,364],{"type":19,"tag":125,"props":350,"children":351},{"style":259},[352],{"type":24,"value":353},"  icon",{"type":19,"tag":125,"props":355,"children":356},{"style":142},[357],{"type":24,"value":267},{"type":19,"tag":125,"props":359,"children":361},{"style":360},"--shiki-default:#79B8FF;--shiki-dark:#79B8FF",[362],{"type":24,"value":363}," string",{"type":19,"tag":125,"props":365,"children":366},{"style":148},[367],{"type":24,"value":196},{"type":19,"tag":125,"props":369,"children":371},{"class":127,"line":370},10,[372],{"type":19,"tag":125,"props":373,"children":374},{"style":148},[375],{"type":24,"value":376},"}\n",{"type":19,"tag":125,"props":378,"children":380},{"class":127,"line":379},11,[381],{"type":19,"tag":125,"props":382,"children":383},{"emptyLinePlaceholder":229},[384],{"type":24,"value":232},{"type":19,"tag":125,"props":386,"children":388},{"class":127,"line":387},12,[389,394,399,404,409,414,419,423,428],{"type":19,"tag":125,"props":390,"children":391},{"style":142},[392],{"type":24,"value":393},"const",{"type":19,"tag":125,"props":395,"children":396},{"style":360},[397],{"type":24,"value":398}," props",{"type":19,"tag":125,"props":400,"children":401},{"style":142},[402],{"type":24,"value":403}," =",{"type":19,"tag":125,"props":405,"children":406},{"style":244},[407],{"type":24,"value":408}," withDefaults",{"type":19,"tag":125,"props":410,"children":411},{"style":148},[412],{"type":24,"value":413},"(",{"type":19,"tag":125,"props":415,"children":416},{"style":244},[417],{"type":24,"value":418},"defineProps",{"type":19,"tag":125,"props":420,"children":421},{"style":148},[422],{"type":24,"value":145},{"type":19,"tag":125,"props":424,"children":425},{"style":244},[426],{"type":24,"value":427},"ButtonProps",{"type":19,"tag":125,"props":429,"children":430},{"style":148},[431],{"type":24,"value":432},">(), {\n",{"type":19,"tag":125,"props":434,"children":436},{"class":127,"line":435},13,[437,442,447],{"type":19,"tag":125,"props":438,"children":439},{"style":148},[440],{"type":24,"value":441},"  variant: ",{"type":19,"tag":125,"props":443,"children":444},{"style":159},[445],{"type":24,"value":446},"'primary'",{"type":19,"tag":125,"props":448,"children":449},{"style":148},[450],{"type":24,"value":451},",\n",{"type":19,"tag":125,"props":453,"children":455},{"class":127,"line":454},14,[456,461],{"type":19,"tag":125,"props":457,"children":458},{"style":148},[459],{"type":24,"value":460},"  size: ",{"type":19,"tag":125,"props":462,"children":463},{"style":159},[464],{"type":24,"value":465},"'md'\n",{"type":19,"tag":125,"props":467,"children":469},{"class":127,"line":468},15,[470],{"type":19,"tag":125,"props":471,"children":472},{"style":148},[473],{"type":24,"value":474},"});\n",{"type":19,"tag":125,"props":476,"children":478},{"class":127,"line":477},16,[479],{"type":19,"tag":125,"props":480,"children":481},{"emptyLinePlaceholder":229},[482],{"type":24,"value":232},{"type":19,"tag":125,"props":484,"children":486},{"class":127,"line":485},17,[487,491,496,500,505],{"type":19,"tag":125,"props":488,"children":489},{"style":142},[490],{"type":24,"value":393},{"type":19,"tag":125,"props":492,"children":493},{"style":360},[494],{"type":24,"value":495}," tokens",{"type":19,"tag":125,"props":497,"children":498},{"style":142},[499],{"type":24,"value":403},{"type":19,"tag":125,"props":501,"children":502},{"style":244},[503],{"type":24,"value":504}," useDesignTokens",{"type":19,"tag":125,"props":506,"children":507},{"style":148},[508],{"type":24,"value":509},"();\n",{"type":19,"tag":125,"props":511,"children":513},{"class":127,"line":512},18,[514],{"type":19,"tag":125,"props":515,"children":516},{"emptyLinePlaceholder":229},[517],{"type":24,"value":232},{"type":19,"tag":125,"props":519,"children":521},{"class":127,"line":520},19,[522,526,531,535,540,545,550],{"type":19,"tag":125,"props":523,"children":524},{"style":142},[525],{"type":24,"value":393},{"type":19,"tag":125,"props":527,"children":528},{"style":360},[529],{"type":24,"value":530}," buttonStyle",{"type":19,"tag":125,"props":532,"children":533},{"style":142},[534],{"type":24,"value":403},{"type":19,"tag":125,"props":536,"children":537},{"style":244},[538],{"type":24,"value":539}," computed",{"type":19,"tag":125,"props":541,"children":542},{"style":148},[543],{"type":24,"value":544},"(() ",{"type":19,"tag":125,"props":546,"children":547},{"style":142},[548],{"type":24,"value":549},"=>",{"type":19,"tag":125,"props":551,"children":552},{"style":148},[553],{"type":24,"value":554}," ({\n",{"type":19,"tag":125,"props":556,"children":558},{"class":127,"line":557},20,[559],{"type":19,"tag":125,"props":560,"children":561},{"style":148},[562],{"type":24,"value":563},"  backgroundColor: tokens.color[props.variant].main,\n",{"type":19,"tag":125,"props":565,"children":567},{"class":127,"line":566},21,[568],{"type":19,"tag":125,"props":569,"children":570},{"style":148},[571],{"type":24,"value":572},"  color: tokens.color[props.variant].contrast,\n",{"type":19,"tag":125,"props":574,"children":576},{"class":127,"line":575},22,[577],{"type":19,"tag":125,"props":578,"children":579},{"style":148},[580],{"type":24,"value":581},"  padding: tokens.spacing[props.size],\n",{"type":19,"tag":125,"props":583,"children":585},{"class":127,"line":584},23,[586],{"type":19,"tag":125,"props":587,"children":588},{"style":148},[589],{"type":24,"value":590},"  borderRadius: tokens.radius.md,\n",{"type":19,"tag":125,"props":592,"children":594},{"class":127,"line":593},24,[595],{"type":19,"tag":125,"props":596,"children":597},{"style":148},[598],{"type":24,"value":599},"  fontFamily: tokens.typography.fontFamily.primary\n",{"type":19,"tag":125,"props":601,"children":603},{"class":127,"line":602},25,[604],{"type":19,"tag":125,"props":605,"children":606},{"style":148},[607],{"type":24,"value":608},"}));\n",{"type":19,"tag":125,"props":610,"children":612},{"class":127,"line":611},26,[613,618,623],{"type":19,"tag":125,"props":614,"children":615},{"style":142},[616],{"type":24,"value":617},"\u003C/",{"type":19,"tag":125,"props":619,"children":620},{"style":148},[621],{"type":24,"value":622},"script",{"type":19,"tag":125,"props":624,"children":625},{"style":142},[626],{"type":24,"value":167},{"type":19,"tag":125,"props":628,"children":630},{"class":127,"line":629},27,[631],{"type":19,"tag":125,"props":632,"children":633},{"emptyLinePlaceholder":229},[634],{"type":24,"value":232},{"type":19,"tag":125,"props":636,"children":638},{"class":127,"line":637},28,[639,643,648],{"type":19,"tag":125,"props":640,"children":641},{"style":148},[642],{"type":24,"value":145},{"type":19,"tag":125,"props":644,"children":645},{"style":244},[646],{"type":24,"value":647},"template",{"type":19,"tag":125,"props":649,"children":650},{"style":148},[651],{"type":24,"value":167},{"type":19,"tag":125,"props":653,"children":655},{"class":127,"line":654},29,[656,661,666,670,675,680,684,689],{"type":19,"tag":125,"props":657,"children":658},{"style":142},[659],{"type":24,"value":660},"  \u003C",{"type":19,"tag":125,"props":662,"children":663},{"style":148},[664],{"type":24,"value":665},"button class",{"type":19,"tag":125,"props":667,"children":668},{"style":142},[669],{"type":24,"value":156},{"type":19,"tag":125,"props":671,"children":672},{"style":159},[673],{"type":24,"value":674},"\"atomic-btn\"",{"type":19,"tag":125,"props":676,"children":677},{"style":148},[678],{"type":24,"value":679}," :style",{"type":19,"tag":125,"props":681,"children":682},{"style":142},[683],{"type":24,"value":156},{"type":19,"tag":125,"props":685,"children":686},{"style":159},[687],{"type":24,"value":688},"\"buttonStyle\"",{"type":19,"tag":125,"props":690,"children":691},{"style":142},[692],{"type":24,"value":167},{"type":19,"tag":125,"props":694,"children":696},{"class":127,"line":695},30,[697,702,707,712,717,722,726,730],{"type":19,"tag":125,"props":698,"children":699},{"style":142},[700],{"type":24,"value":701},"    \u003C",{"type":19,"tag":125,"props":703,"children":704},{"style":148},[705],{"type":24,"value":706},"Icon v",{"type":19,"tag":125,"props":708,"children":709},{"style":142},[710],{"type":24,"value":711},"-if=",{"type":19,"tag":125,"props":713,"children":714},{"style":159},[715],{"type":24,"value":716},"\"icon\"",{"type":19,"tag":125,"props":718,"children":719},{"style":148},[720],{"type":24,"value":721}," :name",{"type":19,"tag":125,"props":723,"children":724},{"style":142},[725],{"type":24,"value":156},{"type":19,"tag":125,"props":727,"children":728},{"style":159},[729],{"type":24,"value":716},{"type":19,"tag":125,"props":731,"children":732},{"style":142},[733],{"type":24,"value":734}," />\n",{"type":19,"tag":125,"props":736,"children":738},{"class":127,"line":737},31,[739,743,748],{"type":19,"tag":125,"props":740,"children":741},{"style":142},[742],{"type":24,"value":701},{"type":19,"tag":125,"props":744,"children":745},{"style":148},[746],{"type":24,"value":747},"slot ",{"type":19,"tag":125,"props":749,"children":750},{"style":142},[751],{"type":24,"value":752},"/>\n",{"type":19,"tag":125,"props":754,"children":756},{"class":127,"line":755},32,[757,762,767],{"type":19,"tag":125,"props":758,"children":759},{"style":142},[760],{"type":24,"value":761},"  \u003C/",{"type":19,"tag":125,"props":763,"children":764},{"style":148},[765],{"type":24,"value":766},"button",{"type":19,"tag":125,"props":768,"children":769},{"style":142},[770],{"type":24,"value":167},{"type":19,"tag":125,"props":772,"children":774},{"class":127,"line":773},33,[775,779,783],{"type":19,"tag":125,"props":776,"children":777},{"style":142},[778],{"type":24,"value":617},{"type":19,"tag":125,"props":780,"children":781},{"style":148},[782],{"type":24,"value":647},{"type":19,"tag":125,"props":784,"children":785},{"style":142},[786],{"type":24,"value":167},{"type":19,"tag":27,"props":788,"children":790},{"id":789},"design-tokens-引擎",[791],{"type":24,"value":792},"🎨 Design Tokens 引擎",{"type":19,"tag":34,"props":794,"children":796},{"id":795},"语义化-token-系统",[797],{"type":24,"value":798},"语义化 Token 系统",{"type":19,"tag":20,"props":800,"children":801},{},[802],{"type":24,"value":803},"我们不直接使用十六进制颜色值，而是通过语义化的 Token 来管理设计变量。这使得设计系统具备了极强的可扩展性和主题切换能力。",{"type":19,"tag":20,"props":805,"children":806},{},[807],{"type":19,"tag":53,"props":808,"children":809},{},[810],{"type":24,"value":811},"Token 结构定义 (JSON)",{"type":19,"tag":114,"props":813,"children":817},{"className":814,"code":815,"language":816,"meta":7,"style":7},"language-json shiki shiki-themes github-dark github-dark","{\n  \"global\": {\n    \"color\": {\n      \"blue\": {\n        \"500\": \"#3B82F6\",\n        \"600\": \"#2563EB\"\n      },\n      \"gray\": {\n        \"100\": \"#F3F4F6\",\n        \"900\": \"#111827\"\n      }\n    },\n    \"spacing\": {\n      \"base\": \"4px\",\n      \"scale\": [1, 2, 4, 8, 12, 16]\n    }\n  },\n  \"semantic\": {\n    \"primary\": {\n      \"main\": \"{global.color.blue.500}\",\n      \"hover\": \"{global.color.blue.600}\",\n      \"text\": \"{global.color.gray.100}\"\n    },\n    \"background\": {\n      \"page\": \"{global.color.gray.100}\",\n      \"card\": \"#FFFFFF\"\n    },\n    \"text\": {\n      \"body\": \"{global.color.gray.900}\",\n      \"muted\": \"{global.color.gray.500}\"\n    }\n  }\n}\n","json",[818],{"type":19,"tag":121,"props":819,"children":820},{"__ignoreMap":7},[821,829,842,854,866,888,905,913,925,946,963,971,979,991,1012,1081,1089,1097,1109,1121,1142,1163,1180,1187,1199,1220,1237,1244,1256,1277,1294,1301,1309],{"type":19,"tag":125,"props":822,"children":823},{"class":127,"line":128},[824],{"type":19,"tag":125,"props":825,"children":826},{"style":148},[827],{"type":24,"value":828},"{\n",{"type":19,"tag":125,"props":830,"children":831},{"class":127,"line":138},[832,837],{"type":19,"tag":125,"props":833,"children":834},{"style":360},[835],{"type":24,"value":836},"  \"global\"",{"type":19,"tag":125,"props":838,"children":839},{"style":148},[840],{"type":24,"value":841},": {\n",{"type":19,"tag":125,"props":843,"children":844},{"class":127,"line":170},[845,850],{"type":19,"tag":125,"props":846,"children":847},{"style":360},[848],{"type":24,"value":849},"    \"color\"",{"type":19,"tag":125,"props":851,"children":852},{"style":148},[853],{"type":24,"value":841},{"type":19,"tag":125,"props":855,"children":856},{"class":127,"line":199},[857,862],{"type":19,"tag":125,"props":858,"children":859},{"style":360},[860],{"type":24,"value":861},"      \"blue\"",{"type":19,"tag":125,"props":863,"children":864},{"style":148},[865],{"type":24,"value":841},{"type":19,"tag":125,"props":867,"children":868},{"class":127,"line":225},[869,874,879,884],{"type":19,"tag":125,"props":870,"children":871},{"style":360},[872],{"type":24,"value":873},"        \"500\"",{"type":19,"tag":125,"props":875,"children":876},{"style":148},[877],{"type":24,"value":878},": ",{"type":19,"tag":125,"props":880,"children":881},{"style":159},[882],{"type":24,"value":883},"\"#3B82F6\"",{"type":19,"tag":125,"props":885,"children":886},{"style":148},[887],{"type":24,"value":451},{"type":19,"tag":125,"props":889,"children":890},{"class":127,"line":235},[891,896,900],{"type":19,"tag":125,"props":892,"children":893},{"style":360},[894],{"type":24,"value":895},"        \"600\"",{"type":19,"tag":125,"props":897,"children":898},{"style":148},[899],{"type":24,"value":878},{"type":19,"tag":125,"props":901,"children":902},{"style":159},[903],{"type":24,"value":904},"\"#2563EB\"\n",{"type":19,"tag":125,"props":906,"children":907},{"class":127,"line":255},[908],{"type":19,"tag":125,"props":909,"children":910},{"style":148},[911],{"type":24,"value":912},"      },\n",{"type":19,"tag":125,"props":914,"children":915},{"class":127,"line":307},[916,921],{"type":19,"tag":125,"props":917,"children":918},{"style":360},[919],{"type":24,"value":920},"      \"gray\"",{"type":19,"tag":125,"props":922,"children":923},{"style":148},[924],{"type":24,"value":841},{"type":19,"tag":125,"props":926,"children":927},{"class":127,"line":347},[928,933,937,942],{"type":19,"tag":125,"props":929,"children":930},{"style":360},[931],{"type":24,"value":932},"        \"100\"",{"type":19,"tag":125,"props":934,"children":935},{"style":148},[936],{"type":24,"value":878},{"type":19,"tag":125,"props":938,"children":939},{"style":159},[940],{"type":24,"value":941},"\"#F3F4F6\"",{"type":19,"tag":125,"props":943,"children":944},{"style":148},[945],{"type":24,"value":451},{"type":19,"tag":125,"props":947,"children":948},{"class":127,"line":370},[949,954,958],{"type":19,"tag":125,"props":950,"children":951},{"style":360},[952],{"type":24,"value":953},"        \"900\"",{"type":19,"tag":125,"props":955,"children":956},{"style":148},[957],{"type":24,"value":878},{"type":19,"tag":125,"props":959,"children":960},{"style":159},[961],{"type":24,"value":962},"\"#111827\"\n",{"type":19,"tag":125,"props":964,"children":965},{"class":127,"line":379},[966],{"type":19,"tag":125,"props":967,"children":968},{"style":148},[969],{"type":24,"value":970},"      }\n",{"type":19,"tag":125,"props":972,"children":973},{"class":127,"line":387},[974],{"type":19,"tag":125,"props":975,"children":976},{"style":148},[977],{"type":24,"value":978},"    },\n",{"type":19,"tag":125,"props":980,"children":981},{"class":127,"line":435},[982,987],{"type":19,"tag":125,"props":983,"children":984},{"style":360},[985],{"type":24,"value":986},"    \"spacing\"",{"type":19,"tag":125,"props":988,"children":989},{"style":148},[990],{"type":24,"value":841},{"type":19,"tag":125,"props":992,"children":993},{"class":127,"line":454},[994,999,1003,1008],{"type":19,"tag":125,"props":995,"children":996},{"style":360},[997],{"type":24,"value":998},"      \"base\"",{"type":19,"tag":125,"props":1000,"children":1001},{"style":148},[1002],{"type":24,"value":878},{"type":19,"tag":125,"props":1004,"children":1005},{"style":159},[1006],{"type":24,"value":1007},"\"4px\"",{"type":19,"tag":125,"props":1009,"children":1010},{"style":148},[1011],{"type":24,"value":451},{"type":19,"tag":125,"props":1013,"children":1014},{"class":127,"line":468},[1015,1020,1025,1030,1035,1040,1044,1049,1053,1058,1062,1067,1071,1076],{"type":19,"tag":125,"props":1016,"children":1017},{"style":360},[1018],{"type":24,"value":1019},"      \"scale\"",{"type":19,"tag":125,"props":1021,"children":1022},{"style":148},[1023],{"type":24,"value":1024},": [",{"type":19,"tag":125,"props":1026,"children":1027},{"style":360},[1028],{"type":24,"value":1029},"1",{"type":19,"tag":125,"props":1031,"children":1032},{"style":148},[1033],{"type":24,"value":1034},", ",{"type":19,"tag":125,"props":1036,"children":1037},{"style":360},[1038],{"type":24,"value":1039},"2",{"type":19,"tag":125,"props":1041,"children":1042},{"style":148},[1043],{"type":24,"value":1034},{"type":19,"tag":125,"props":1045,"children":1046},{"style":360},[1047],{"type":24,"value":1048},"4",{"type":19,"tag":125,"props":1050,"children":1051},{"style":148},[1052],{"type":24,"value":1034},{"type":19,"tag":125,"props":1054,"children":1055},{"style":360},[1056],{"type":24,"value":1057},"8",{"type":19,"tag":125,"props":1059,"children":1060},{"style":148},[1061],{"type":24,"value":1034},{"type":19,"tag":125,"props":1063,"children":1064},{"style":360},[1065],{"type":24,"value":1066},"12",{"type":19,"tag":125,"props":1068,"children":1069},{"style":148},[1070],{"type":24,"value":1034},{"type":19,"tag":125,"props":1072,"children":1073},{"style":360},[1074],{"type":24,"value":1075},"16",{"type":19,"tag":125,"props":1077,"children":1078},{"style":148},[1079],{"type":24,"value":1080},"]\n",{"type":19,"tag":125,"props":1082,"children":1083},{"class":127,"line":477},[1084],{"type":19,"tag":125,"props":1085,"children":1086},{"style":148},[1087],{"type":24,"value":1088},"    }\n",{"type":19,"tag":125,"props":1090,"children":1091},{"class":127,"line":485},[1092],{"type":19,"tag":125,"props":1093,"children":1094},{"style":148},[1095],{"type":24,"value":1096},"  },\n",{"type":19,"tag":125,"props":1098,"children":1099},{"class":127,"line":512},[1100,1105],{"type":19,"tag":125,"props":1101,"children":1102},{"style":360},[1103],{"type":24,"value":1104},"  \"semantic\"",{"type":19,"tag":125,"props":1106,"children":1107},{"style":148},[1108],{"type":24,"value":841},{"type":19,"tag":125,"props":1110,"children":1111},{"class":127,"line":520},[1112,1117],{"type":19,"tag":125,"props":1113,"children":1114},{"style":360},[1115],{"type":24,"value":1116},"    \"primary\"",{"type":19,"tag":125,"props":1118,"children":1119},{"style":148},[1120],{"type":24,"value":841},{"type":19,"tag":125,"props":1122,"children":1123},{"class":127,"line":557},[1124,1129,1133,1138],{"type":19,"tag":125,"props":1125,"children":1126},{"style":360},[1127],{"type":24,"value":1128},"      \"main\"",{"type":19,"tag":125,"props":1130,"children":1131},{"style":148},[1132],{"type":24,"value":878},{"type":19,"tag":125,"props":1134,"children":1135},{"style":159},[1136],{"type":24,"value":1137},"\"{global.color.blue.500}\"",{"type":19,"tag":125,"props":1139,"children":1140},{"style":148},[1141],{"type":24,"value":451},{"type":19,"tag":125,"props":1143,"children":1144},{"class":127,"line":566},[1145,1150,1154,1159],{"type":19,"tag":125,"props":1146,"children":1147},{"style":360},[1148],{"type":24,"value":1149},"      \"hover\"",{"type":19,"tag":125,"props":1151,"children":1152},{"style":148},[1153],{"type":24,"value":878},{"type":19,"tag":125,"props":1155,"children":1156},{"style":159},[1157],{"type":24,"value":1158},"\"{global.color.blue.600}\"",{"type":19,"tag":125,"props":1160,"children":1161},{"style":148},[1162],{"type":24,"value":451},{"type":19,"tag":125,"props":1164,"children":1165},{"class":127,"line":575},[1166,1171,1175],{"type":19,"tag":125,"props":1167,"children":1168},{"style":360},[1169],{"type":24,"value":1170},"      \"text\"",{"type":19,"tag":125,"props":1172,"children":1173},{"style":148},[1174],{"type":24,"value":878},{"type":19,"tag":125,"props":1176,"children":1177},{"style":159},[1178],{"type":24,"value":1179},"\"{global.color.gray.100}\"\n",{"type":19,"tag":125,"props":1181,"children":1182},{"class":127,"line":584},[1183],{"type":19,"tag":125,"props":1184,"children":1185},{"style":148},[1186],{"type":24,"value":978},{"type":19,"tag":125,"props":1188,"children":1189},{"class":127,"line":593},[1190,1195],{"type":19,"tag":125,"props":1191,"children":1192},{"style":360},[1193],{"type":24,"value":1194},"    \"background\"",{"type":19,"tag":125,"props":1196,"children":1197},{"style":148},[1198],{"type":24,"value":841},{"type":19,"tag":125,"props":1200,"children":1201},{"class":127,"line":602},[1202,1207,1211,1216],{"type":19,"tag":125,"props":1203,"children":1204},{"style":360},[1205],{"type":24,"value":1206},"      \"page\"",{"type":19,"tag":125,"props":1208,"children":1209},{"style":148},[1210],{"type":24,"value":878},{"type":19,"tag":125,"props":1212,"children":1213},{"style":159},[1214],{"type":24,"value":1215},"\"{global.color.gray.100}\"",{"type":19,"tag":125,"props":1217,"children":1218},{"style":148},[1219],{"type":24,"value":451},{"type":19,"tag":125,"props":1221,"children":1222},{"class":127,"line":611},[1223,1228,1232],{"type":19,"tag":125,"props":1224,"children":1225},{"style":360},[1226],{"type":24,"value":1227},"      \"card\"",{"type":19,"tag":125,"props":1229,"children":1230},{"style":148},[1231],{"type":24,"value":878},{"type":19,"tag":125,"props":1233,"children":1234},{"style":159},[1235],{"type":24,"value":1236},"\"#FFFFFF\"\n",{"type":19,"tag":125,"props":1238,"children":1239},{"class":127,"line":629},[1240],{"type":19,"tag":125,"props":1241,"children":1242},{"style":148},[1243],{"type":24,"value":978},{"type":19,"tag":125,"props":1245,"children":1246},{"class":127,"line":637},[1247,1252],{"type":19,"tag":125,"props":1248,"children":1249},{"style":360},[1250],{"type":24,"value":1251},"    \"text\"",{"type":19,"tag":125,"props":1253,"children":1254},{"style":148},[1255],{"type":24,"value":841},{"type":19,"tag":125,"props":1257,"children":1258},{"class":127,"line":654},[1259,1264,1268,1273],{"type":19,"tag":125,"props":1260,"children":1261},{"style":360},[1262],{"type":24,"value":1263},"      \"body\"",{"type":19,"tag":125,"props":1265,"children":1266},{"style":148},[1267],{"type":24,"value":878},{"type":19,"tag":125,"props":1269,"children":1270},{"style":159},[1271],{"type":24,"value":1272},"\"{global.color.gray.900}\"",{"type":19,"tag":125,"props":1274,"children":1275},{"style":148},[1276],{"type":24,"value":451},{"type":19,"tag":125,"props":1278,"children":1279},{"class":127,"line":695},[1280,1285,1289],{"type":19,"tag":125,"props":1281,"children":1282},{"style":360},[1283],{"type":24,"value":1284},"      \"muted\"",{"type":19,"tag":125,"props":1286,"children":1287},{"style":148},[1288],{"type":24,"value":878},{"type":19,"tag":125,"props":1290,"children":1291},{"style":159},[1292],{"type":24,"value":1293},"\"{global.color.gray.500}\"\n",{"type":19,"tag":125,"props":1295,"children":1296},{"class":127,"line":737},[1297],{"type":19,"tag":125,"props":1298,"children":1299},{"style":148},[1300],{"type":24,"value":1088},{"type":19,"tag":125,"props":1302,"children":1303},{"class":127,"line":755},[1304],{"type":19,"tag":125,"props":1305,"children":1306},{"style":148},[1307],{"type":24,"value":1308},"  }\n",{"type":19,"tag":125,"props":1310,"children":1311},{"class":127,"line":773},[1312],{"type":19,"tag":125,"props":1313,"children":1314},{"style":148},[1315],{"type":24,"value":376},{"type":19,"tag":34,"props":1317,"children":1319},{"id":1318},"自动化-css-生成",[1320],{"type":24,"value":1321},"自动化 CSS 生成",{"type":19,"tag":20,"props":1323,"children":1324},{},[1325],{"type":24,"value":1326},"Design Token 引擎会自动将 JSON 配置编译为多平台的样式文件（CSS Variables, SCSS, iOS, Android）。",{"type":19,"tag":114,"props":1328,"children":1332},{"className":1329,"code":1330,"language":1331,"meta":7,"style":7},"language-javascript shiki shiki-themes github-dark github-dark","// build-tokens.js\nconst StyleDictionary = require('style-dictionary');\n\nStyleDictionary.registerTransform({\n  name: 'size/px',\n  type: 'value',\n  matcher: token => token.attributes.category === 'size',\n  transformer: token => `${token.value}px`\n});\n\nconst sd = StyleDictionary.extend({\n  source: ['tokens/**/*.json'],\n  platforms: {\n    css: {\n      transformGroup: 'css',\n      buildPath: 'build/css/',\n      files: [{\n        destination: '_variables.css',\n        format: 'css/variables'\n      }]\n    },\n    js: {\n      transformGroup: 'js',\n      buildPath: 'build/js/',\n      files: [{\n        destination: 'tokens.js',\n        format: 'javascript/module'\n      }]\n    }\n  }\n});\n\nsd.buildAllPlatforms();\n","javascript",[1333],{"type":19,"tag":121,"props":1334,"children":1335},{"__ignoreMap":7},[1336,1344,1379,1386,1404,1421,1438,1479,1523,1530,1537,1567,1585,1593,1601,1618,1635,1643,1660,1673,1681,1688,1696,1712,1728,1735,1751,1763,1770,1777,1784,1791,1798],{"type":19,"tag":125,"props":1337,"children":1338},{"class":127,"line":128},[1339],{"type":19,"tag":125,"props":1340,"children":1341},{"style":132},[1342],{"type":24,"value":1343},"// build-tokens.js\n",{"type":19,"tag":125,"props":1345,"children":1346},{"class":127,"line":138},[1347,1351,1356,1360,1365,1369,1374],{"type":19,"tag":125,"props":1348,"children":1349},{"style":142},[1350],{"type":24,"value":393},{"type":19,"tag":125,"props":1352,"children":1353},{"style":360},[1354],{"type":24,"value":1355}," StyleDictionary",{"type":19,"tag":125,"props":1357,"children":1358},{"style":142},[1359],{"type":24,"value":403},{"type":19,"tag":125,"props":1361,"children":1362},{"style":244},[1363],{"type":24,"value":1364}," require",{"type":19,"tag":125,"props":1366,"children":1367},{"style":148},[1368],{"type":24,"value":413},{"type":19,"tag":125,"props":1370,"children":1371},{"style":159},[1372],{"type":24,"value":1373},"'style-dictionary'",{"type":19,"tag":125,"props":1375,"children":1376},{"style":148},[1377],{"type":24,"value":1378},");\n",{"type":19,"tag":125,"props":1380,"children":1381},{"class":127,"line":170},[1382],{"type":19,"tag":125,"props":1383,"children":1384},{"emptyLinePlaceholder":229},[1385],{"type":24,"value":232},{"type":19,"tag":125,"props":1387,"children":1388},{"class":127,"line":199},[1389,1394,1399],{"type":19,"tag":125,"props":1390,"children":1391},{"style":148},[1392],{"type":24,"value":1393},"StyleDictionary.",{"type":19,"tag":125,"props":1395,"children":1396},{"style":244},[1397],{"type":24,"value":1398},"registerTransform",{"type":19,"tag":125,"props":1400,"children":1401},{"style":148},[1402],{"type":24,"value":1403},"({\n",{"type":19,"tag":125,"props":1405,"children":1406},{"class":127,"line":225},[1407,1412,1417],{"type":19,"tag":125,"props":1408,"children":1409},{"style":148},[1410],{"type":24,"value":1411},"  name: ",{"type":19,"tag":125,"props":1413,"children":1414},{"style":159},[1415],{"type":24,"value":1416},"'size/px'",{"type":19,"tag":125,"props":1418,"children":1419},{"style":148},[1420],{"type":24,"value":451},{"type":19,"tag":125,"props":1422,"children":1423},{"class":127,"line":235},[1424,1429,1434],{"type":19,"tag":125,"props":1425,"children":1426},{"style":148},[1427],{"type":24,"value":1428},"  type: ",{"type":19,"tag":125,"props":1430,"children":1431},{"style":159},[1432],{"type":24,"value":1433},"'value'",{"type":19,"tag":125,"props":1435,"children":1436},{"style":148},[1437],{"type":24,"value":451},{"type":19,"tag":125,"props":1439,"children":1440},{"class":127,"line":255},[1441,1446,1450,1455,1460,1465,1470,1475],{"type":19,"tag":125,"props":1442,"children":1443},{"style":244},[1444],{"type":24,"value":1445},"  matcher",{"type":19,"tag":125,"props":1447,"children":1448},{"style":148},[1449],{"type":24,"value":878},{"type":19,"tag":125,"props":1451,"children":1452},{"style":259},[1453],{"type":24,"value":1454},"token",{"type":19,"tag":125,"props":1456,"children":1457},{"style":142},[1458],{"type":24,"value":1459}," =>",{"type":19,"tag":125,"props":1461,"children":1462},{"style":148},[1463],{"type":24,"value":1464}," token.attributes.category ",{"type":19,"tag":125,"props":1466,"children":1467},{"style":142},[1468],{"type":24,"value":1469},"===",{"type":19,"tag":125,"props":1471,"children":1472},{"style":159},[1473],{"type":24,"value":1474}," 'size'",{"type":19,"tag":125,"props":1476,"children":1477},{"style":148},[1478],{"type":24,"value":451},{"type":19,"tag":125,"props":1480,"children":1481},{"class":127,"line":307},[1482,1487,1491,1495,1499,1504,1508,1513,1518],{"type":19,"tag":125,"props":1483,"children":1484},{"style":244},[1485],{"type":24,"value":1486},"  transformer",{"type":19,"tag":125,"props":1488,"children":1489},{"style":148},[1490],{"type":24,"value":878},{"type":19,"tag":125,"props":1492,"children":1493},{"style":259},[1494],{"type":24,"value":1454},{"type":19,"tag":125,"props":1496,"children":1497},{"style":142},[1498],{"type":24,"value":1459},{"type":19,"tag":125,"props":1500,"children":1501},{"style":159},[1502],{"type":24,"value":1503}," `${",{"type":19,"tag":125,"props":1505,"children":1506},{"style":148},[1507],{"type":24,"value":1454},{"type":19,"tag":125,"props":1509,"children":1510},{"style":159},[1511],{"type":24,"value":1512},".",{"type":19,"tag":125,"props":1514,"children":1515},{"style":148},[1516],{"type":24,"value":1517},"value",{"type":19,"tag":125,"props":1519,"children":1520},{"style":159},[1521],{"type":24,"value":1522},"}px`\n",{"type":19,"tag":125,"props":1524,"children":1525},{"class":127,"line":347},[1526],{"type":19,"tag":125,"props":1527,"children":1528},{"style":148},[1529],{"type":24,"value":474},{"type":19,"tag":125,"props":1531,"children":1532},{"class":127,"line":370},[1533],{"type":19,"tag":125,"props":1534,"children":1535},{"emptyLinePlaceholder":229},[1536],{"type":24,"value":232},{"type":19,"tag":125,"props":1538,"children":1539},{"class":127,"line":379},[1540,1544,1549,1553,1558,1563],{"type":19,"tag":125,"props":1541,"children":1542},{"style":142},[1543],{"type":24,"value":393},{"type":19,"tag":125,"props":1545,"children":1546},{"style":360},[1547],{"type":24,"value":1548}," sd",{"type":19,"tag":125,"props":1550,"children":1551},{"style":142},[1552],{"type":24,"value":403},{"type":19,"tag":125,"props":1554,"children":1555},{"style":148},[1556],{"type":24,"value":1557}," StyleDictionary.",{"type":19,"tag":125,"props":1559,"children":1560},{"style":244},[1561],{"type":24,"value":1562},"extend",{"type":19,"tag":125,"props":1564,"children":1565},{"style":148},[1566],{"type":24,"value":1403},{"type":19,"tag":125,"props":1568,"children":1569},{"class":127,"line":387},[1570,1575,1580],{"type":19,"tag":125,"props":1571,"children":1572},{"style":148},[1573],{"type":24,"value":1574},"  source: [",{"type":19,"tag":125,"props":1576,"children":1577},{"style":159},[1578],{"type":24,"value":1579},"'tokens/**/*.json'",{"type":19,"tag":125,"props":1581,"children":1582},{"style":148},[1583],{"type":24,"value":1584},"],\n",{"type":19,"tag":125,"props":1586,"children":1587},{"class":127,"line":435},[1588],{"type":19,"tag":125,"props":1589,"children":1590},{"style":148},[1591],{"type":24,"value":1592},"  platforms: {\n",{"type":19,"tag":125,"props":1594,"children":1595},{"class":127,"line":454},[1596],{"type":19,"tag":125,"props":1597,"children":1598},{"style":148},[1599],{"type":24,"value":1600},"    css: {\n",{"type":19,"tag":125,"props":1602,"children":1603},{"class":127,"line":468},[1604,1609,1614],{"type":19,"tag":125,"props":1605,"children":1606},{"style":148},[1607],{"type":24,"value":1608},"      transformGroup: ",{"type":19,"tag":125,"props":1610,"children":1611},{"style":159},[1612],{"type":24,"value":1613},"'css'",{"type":19,"tag":125,"props":1615,"children":1616},{"style":148},[1617],{"type":24,"value":451},{"type":19,"tag":125,"props":1619,"children":1620},{"class":127,"line":477},[1621,1626,1631],{"type":19,"tag":125,"props":1622,"children":1623},{"style":148},[1624],{"type":24,"value":1625},"      buildPath: ",{"type":19,"tag":125,"props":1627,"children":1628},{"style":159},[1629],{"type":24,"value":1630},"'build/css/'",{"type":19,"tag":125,"props":1632,"children":1633},{"style":148},[1634],{"type":24,"value":451},{"type":19,"tag":125,"props":1636,"children":1637},{"class":127,"line":485},[1638],{"type":19,"tag":125,"props":1639,"children":1640},{"style":148},[1641],{"type":24,"value":1642},"      files: [{\n",{"type":19,"tag":125,"props":1644,"children":1645},{"class":127,"line":512},[1646,1651,1656],{"type":19,"tag":125,"props":1647,"children":1648},{"style":148},[1649],{"type":24,"value":1650},"        destination: ",{"type":19,"tag":125,"props":1652,"children":1653},{"style":159},[1654],{"type":24,"value":1655},"'_variables.css'",{"type":19,"tag":125,"props":1657,"children":1658},{"style":148},[1659],{"type":24,"value":451},{"type":19,"tag":125,"props":1661,"children":1662},{"class":127,"line":520},[1663,1668],{"type":19,"tag":125,"props":1664,"children":1665},{"style":148},[1666],{"type":24,"value":1667},"        format: ",{"type":19,"tag":125,"props":1669,"children":1670},{"style":159},[1671],{"type":24,"value":1672},"'css/variables'\n",{"type":19,"tag":125,"props":1674,"children":1675},{"class":127,"line":557},[1676],{"type":19,"tag":125,"props":1677,"children":1678},{"style":148},[1679],{"type":24,"value":1680},"      }]\n",{"type":19,"tag":125,"props":1682,"children":1683},{"class":127,"line":566},[1684],{"type":19,"tag":125,"props":1685,"children":1686},{"style":148},[1687],{"type":24,"value":978},{"type":19,"tag":125,"props":1689,"children":1690},{"class":127,"line":575},[1691],{"type":19,"tag":125,"props":1692,"children":1693},{"style":148},[1694],{"type":24,"value":1695},"    js: {\n",{"type":19,"tag":125,"props":1697,"children":1698},{"class":127,"line":584},[1699,1703,1708],{"type":19,"tag":125,"props":1700,"children":1701},{"style":148},[1702],{"type":24,"value":1608},{"type":19,"tag":125,"props":1704,"children":1705},{"style":159},[1706],{"type":24,"value":1707},"'js'",{"type":19,"tag":125,"props":1709,"children":1710},{"style":148},[1711],{"type":24,"value":451},{"type":19,"tag":125,"props":1713,"children":1714},{"class":127,"line":593},[1715,1719,1724],{"type":19,"tag":125,"props":1716,"children":1717},{"style":148},[1718],{"type":24,"value":1625},{"type":19,"tag":125,"props":1720,"children":1721},{"style":159},[1722],{"type":24,"value":1723},"'build/js/'",{"type":19,"tag":125,"props":1725,"children":1726},{"style":148},[1727],{"type":24,"value":451},{"type":19,"tag":125,"props":1729,"children":1730},{"class":127,"line":602},[1731],{"type":19,"tag":125,"props":1732,"children":1733},{"style":148},[1734],{"type":24,"value":1642},{"type":19,"tag":125,"props":1736,"children":1737},{"class":127,"line":611},[1738,1742,1747],{"type":19,"tag":125,"props":1739,"children":1740},{"style":148},[1741],{"type":24,"value":1650},{"type":19,"tag":125,"props":1743,"children":1744},{"style":159},[1745],{"type":24,"value":1746},"'tokens.js'",{"type":19,"tag":125,"props":1748,"children":1749},{"style":148},[1750],{"type":24,"value":451},{"type":19,"tag":125,"props":1752,"children":1753},{"class":127,"line":629},[1754,1758],{"type":19,"tag":125,"props":1755,"children":1756},{"style":148},[1757],{"type":24,"value":1667},{"type":19,"tag":125,"props":1759,"children":1760},{"style":159},[1761],{"type":24,"value":1762},"'javascript/module'\n",{"type":19,"tag":125,"props":1764,"children":1765},{"class":127,"line":637},[1766],{"type":19,"tag":125,"props":1767,"children":1768},{"style":148},[1769],{"type":24,"value":1680},{"type":19,"tag":125,"props":1771,"children":1772},{"class":127,"line":654},[1773],{"type":19,"tag":125,"props":1774,"children":1775},{"style":148},[1776],{"type":24,"value":1088},{"type":19,"tag":125,"props":1778,"children":1779},{"class":127,"line":695},[1780],{"type":19,"tag":125,"props":1781,"children":1782},{"style":148},[1783],{"type":24,"value":1308},{"type":19,"tag":125,"props":1785,"children":1786},{"class":127,"line":737},[1787],{"type":19,"tag":125,"props":1788,"children":1789},{"style":148},[1790],{"type":24,"value":474},{"type":19,"tag":125,"props":1792,"children":1793},{"class":127,"line":755},[1794],{"type":19,"tag":125,"props":1795,"children":1796},{"emptyLinePlaceholder":229},[1797],{"type":24,"value":232},{"type":19,"tag":125,"props":1799,"children":1800},{"class":127,"line":773},[1801,1806,1811],{"type":19,"tag":125,"props":1802,"children":1803},{"style":148},[1804],{"type":24,"value":1805},"sd.",{"type":19,"tag":125,"props":1807,"children":1808},{"style":244},[1809],{"type":24,"value":1810},"buildAllPlatforms",{"type":19,"tag":125,"props":1812,"children":1813},{"style":148},[1814],{"type":24,"value":509},{"type":19,"tag":27,"props":1816,"children":1818},{"id":1817},"ai-驱动的设计生成",[1819],{"type":24,"value":1820},"🤖 AI 驱动的设计生成",{"type":19,"tag":34,"props":1822,"children":1824},{"id":1823},"智能样式推导",[1825],{"type":24,"value":1823},{"type":19,"tag":20,"props":1827,"children":1828},{},[1829],{"type":24,"value":1830},"AI 引擎能够根据用户的品牌描述或上传的 Logo，自动推导出符合品牌调性的 Design Tokens。",{"type":19,"tag":20,"props":1832,"children":1833},{},[1834],{"type":19,"tag":53,"props":1835,"children":1836},{},[1837],{"type":24,"value":1838},"品牌 DNA 提取算法",{"type":19,"tag":114,"props":1840,"children":1844},{"className":1841,"code":1842,"language":1843,"meta":7,"style":7},"language-python shiki shiki-themes github-dark github-dark","class BrandDNAExtractor:\n    def __init__(self):\n        self.color_analyzer = ColorPaletteAnalyzer()\n        self.font_matcher = FontPairingModel()\n        self.mood_classifier = DesignMoodClassifier()\n    \n    def generate_system_from_brand(self, brand_assets):\n        # 1. 提取主色调\n        primary_color = self.color_analyzer.extract_dominant(brand_assets.logo)\n        \n        # 2. 生成配色方案 (互补色、类比色等)\n        palette = self.color_analyzer.generate_palette(\n            base_color=primary_color,\n            scheme='compound'\n        )\n        \n        # 3. 确定设计情绪 (如：现代、复古、商务)\n        mood = self.mood_classifier.classify(brand_assets.description)\n        \n        # 4. 匹配字体系统\n        typography = self.font_matcher.suggest_pairing(mood)\n        \n        # 5. 生成完整 Token 集\n        return self.construct_tokens(palette, typography, mood)\n","python",[1845],{"type":19,"tag":121,"props":1846,"children":1847},{"__ignoreMap":7},[1848,1866,1884,1906,1927,1948,1956,1973,1981,2003,2011,2019,2040,2057,2074,2082,2089,2097,2118,2125,2133,2154,2161,2169],{"type":19,"tag":125,"props":1849,"children":1850},{"class":127,"line":128},[1851,1856,1861],{"type":19,"tag":125,"props":1852,"children":1853},{"style":142},[1854],{"type":24,"value":1855},"class",{"type":19,"tag":125,"props":1857,"children":1858},{"style":244},[1859],{"type":24,"value":1860}," BrandDNAExtractor",{"type":19,"tag":125,"props":1862,"children":1863},{"style":148},[1864],{"type":24,"value":1865},":\n",{"type":19,"tag":125,"props":1867,"children":1868},{"class":127,"line":138},[1869,1874,1879],{"type":19,"tag":125,"props":1870,"children":1871},{"style":142},[1872],{"type":24,"value":1873},"    def",{"type":19,"tag":125,"props":1875,"children":1876},{"style":360},[1877],{"type":24,"value":1878}," __init__",{"type":19,"tag":125,"props":1880,"children":1881},{"style":148},[1882],{"type":24,"value":1883},"(self):\n",{"type":19,"tag":125,"props":1885,"children":1886},{"class":127,"line":170},[1887,1892,1897,1901],{"type":19,"tag":125,"props":1888,"children":1889},{"style":360},[1890],{"type":24,"value":1891},"        self",{"type":19,"tag":125,"props":1893,"children":1894},{"style":148},[1895],{"type":24,"value":1896},".color_analyzer ",{"type":19,"tag":125,"props":1898,"children":1899},{"style":142},[1900],{"type":24,"value":156},{"type":19,"tag":125,"props":1902,"children":1903},{"style":148},[1904],{"type":24,"value":1905}," ColorPaletteAnalyzer()\n",{"type":19,"tag":125,"props":1907,"children":1908},{"class":127,"line":199},[1909,1913,1918,1922],{"type":19,"tag":125,"props":1910,"children":1911},{"style":360},[1912],{"type":24,"value":1891},{"type":19,"tag":125,"props":1914,"children":1915},{"style":148},[1916],{"type":24,"value":1917},".font_matcher ",{"type":19,"tag":125,"props":1919,"children":1920},{"style":142},[1921],{"type":24,"value":156},{"type":19,"tag":125,"props":1923,"children":1924},{"style":148},[1925],{"type":24,"value":1926}," FontPairingModel()\n",{"type":19,"tag":125,"props":1928,"children":1929},{"class":127,"line":225},[1930,1934,1939,1943],{"type":19,"tag":125,"props":1931,"children":1932},{"style":360},[1933],{"type":24,"value":1891},{"type":19,"tag":125,"props":1935,"children":1936},{"style":148},[1937],{"type":24,"value":1938},".mood_classifier ",{"type":19,"tag":125,"props":1940,"children":1941},{"style":142},[1942],{"type":24,"value":156},{"type":19,"tag":125,"props":1944,"children":1945},{"style":148},[1946],{"type":24,"value":1947}," DesignMoodClassifier()\n",{"type":19,"tag":125,"props":1949,"children":1950},{"class":127,"line":235},[1951],{"type":19,"tag":125,"props":1952,"children":1953},{"style":148},[1954],{"type":24,"value":1955},"    \n",{"type":19,"tag":125,"props":1957,"children":1958},{"class":127,"line":255},[1959,1963,1968],{"type":19,"tag":125,"props":1960,"children":1961},{"style":142},[1962],{"type":24,"value":1873},{"type":19,"tag":125,"props":1964,"children":1965},{"style":244},[1966],{"type":24,"value":1967}," generate_system_from_brand",{"type":19,"tag":125,"props":1969,"children":1970},{"style":148},[1971],{"type":24,"value":1972},"(self, brand_assets):\n",{"type":19,"tag":125,"props":1974,"children":1975},{"class":127,"line":307},[1976],{"type":19,"tag":125,"props":1977,"children":1978},{"style":132},[1979],{"type":24,"value":1980},"        # 1. 提取主色调\n",{"type":19,"tag":125,"props":1982,"children":1983},{"class":127,"line":347},[1984,1989,1993,1998],{"type":19,"tag":125,"props":1985,"children":1986},{"style":148},[1987],{"type":24,"value":1988},"        primary_color ",{"type":19,"tag":125,"props":1990,"children":1991},{"style":142},[1992],{"type":24,"value":156},{"type":19,"tag":125,"props":1994,"children":1995},{"style":360},[1996],{"type":24,"value":1997}," self",{"type":19,"tag":125,"props":1999,"children":2000},{"style":148},[2001],{"type":24,"value":2002},".color_analyzer.extract_dominant(brand_assets.logo)\n",{"type":19,"tag":125,"props":2004,"children":2005},{"class":127,"line":370},[2006],{"type":19,"tag":125,"props":2007,"children":2008},{"style":148},[2009],{"type":24,"value":2010},"        \n",{"type":19,"tag":125,"props":2012,"children":2013},{"class":127,"line":379},[2014],{"type":19,"tag":125,"props":2015,"children":2016},{"style":132},[2017],{"type":24,"value":2018},"        # 2. 生成配色方案 (互补色、类比色等)\n",{"type":19,"tag":125,"props":2020,"children":2021},{"class":127,"line":387},[2022,2027,2031,2035],{"type":19,"tag":125,"props":2023,"children":2024},{"style":148},[2025],{"type":24,"value":2026},"        palette ",{"type":19,"tag":125,"props":2028,"children":2029},{"style":142},[2030],{"type":24,"value":156},{"type":19,"tag":125,"props":2032,"children":2033},{"style":360},[2034],{"type":24,"value":1997},{"type":19,"tag":125,"props":2036,"children":2037},{"style":148},[2038],{"type":24,"value":2039},".color_analyzer.generate_palette(\n",{"type":19,"tag":125,"props":2041,"children":2042},{"class":127,"line":435},[2043,2048,2052],{"type":19,"tag":125,"props":2044,"children":2045},{"style":259},[2046],{"type":24,"value":2047},"            base_color",{"type":19,"tag":125,"props":2049,"children":2050},{"style":142},[2051],{"type":24,"value":156},{"type":19,"tag":125,"props":2053,"children":2054},{"style":148},[2055],{"type":24,"value":2056},"primary_color,\n",{"type":19,"tag":125,"props":2058,"children":2059},{"class":127,"line":454},[2060,2065,2069],{"type":19,"tag":125,"props":2061,"children":2062},{"style":259},[2063],{"type":24,"value":2064},"            scheme",{"type":19,"tag":125,"props":2066,"children":2067},{"style":142},[2068],{"type":24,"value":156},{"type":19,"tag":125,"props":2070,"children":2071},{"style":159},[2072],{"type":24,"value":2073},"'compound'\n",{"type":19,"tag":125,"props":2075,"children":2076},{"class":127,"line":468},[2077],{"type":19,"tag":125,"props":2078,"children":2079},{"style":148},[2080],{"type":24,"value":2081},"        )\n",{"type":19,"tag":125,"props":2083,"children":2084},{"class":127,"line":477},[2085],{"type":19,"tag":125,"props":2086,"children":2087},{"style":148},[2088],{"type":24,"value":2010},{"type":19,"tag":125,"props":2090,"children":2091},{"class":127,"line":485},[2092],{"type":19,"tag":125,"props":2093,"children":2094},{"style":132},[2095],{"type":24,"value":2096},"        # 3. 确定设计情绪 (如：现代、复古、商务)\n",{"type":19,"tag":125,"props":2098,"children":2099},{"class":127,"line":512},[2100,2105,2109,2113],{"type":19,"tag":125,"props":2101,"children":2102},{"style":148},[2103],{"type":24,"value":2104},"        mood ",{"type":19,"tag":125,"props":2106,"children":2107},{"style":142},[2108],{"type":24,"value":156},{"type":19,"tag":125,"props":2110,"children":2111},{"style":360},[2112],{"type":24,"value":1997},{"type":19,"tag":125,"props":2114,"children":2115},{"style":148},[2116],{"type":24,"value":2117},".mood_classifier.classify(brand_assets.description)\n",{"type":19,"tag":125,"props":2119,"children":2120},{"class":127,"line":520},[2121],{"type":19,"tag":125,"props":2122,"children":2123},{"style":148},[2124],{"type":24,"value":2010},{"type":19,"tag":125,"props":2126,"children":2127},{"class":127,"line":557},[2128],{"type":19,"tag":125,"props":2129,"children":2130},{"style":132},[2131],{"type":24,"value":2132},"        # 4. 匹配字体系统\n",{"type":19,"tag":125,"props":2134,"children":2135},{"class":127,"line":566},[2136,2141,2145,2149],{"type":19,"tag":125,"props":2137,"children":2138},{"style":148},[2139],{"type":24,"value":2140},"        typography ",{"type":19,"tag":125,"props":2142,"children":2143},{"style":142},[2144],{"type":24,"value":156},{"type":19,"tag":125,"props":2146,"children":2147},{"style":360},[2148],{"type":24,"value":1997},{"type":19,"tag":125,"props":2150,"children":2151},{"style":148},[2152],{"type":24,"value":2153},".font_matcher.suggest_pairing(mood)\n",{"type":19,"tag":125,"props":2155,"children":2156},{"class":127,"line":575},[2157],{"type":19,"tag":125,"props":2158,"children":2159},{"style":148},[2160],{"type":24,"value":2010},{"type":19,"tag":125,"props":2162,"children":2163},{"class":127,"line":584},[2164],{"type":19,"tag":125,"props":2165,"children":2166},{"style":132},[2167],{"type":24,"value":2168},"        # 5. 生成完整 Token 集\n",{"type":19,"tag":125,"props":2170,"children":2171},{"class":127,"line":593},[2172,2177,2181],{"type":19,"tag":125,"props":2173,"children":2174},{"style":142},[2175],{"type":24,"value":2176},"        return",{"type":19,"tag":125,"props":2178,"children":2179},{"style":360},[2180],{"type":24,"value":1997},{"type":19,"tag":125,"props":2182,"children":2183},{"style":148},[2184],{"type":24,"value":2185},".construct_tokens(palette, typography, mood)\n",{"type":19,"tag":34,"props":2187,"children":2189},{"id":2188},"布局自适应组合",[2190],{"type":24,"value":2188},{"type":19,"tag":20,"props":2192,"children":2193},{},[2194],{"type":24,"value":2195},"AI 不仅生成样式，还能根据内容结构自动组合原子组件，生成最佳的生物（Organisms）和模板（Templates）。",{"type":19,"tag":2197,"props":2198,"children":2199},"ul",{},[2200,2210],{"type":19,"tag":49,"props":2201,"children":2202},{},[2203,2208],{"type":19,"tag":53,"props":2204,"children":2205},{},[2206],{"type":24,"value":2207},"内容感知布局",{"type":24,"value":2209},"：如果标题很长，自动选择垂直堆叠布局；如果图片是竖图，自动调整卡片比例。",{"type":19,"tag":49,"props":2211,"children":2212},{},[2213,2218],{"type":19,"tag":53,"props":2214,"children":2215},{},[2216],{"type":24,"value":2217},"响应式重排",{"type":24,"value":2219},"：自动生成 Mobile, Tablet, Desktop 三端的布局规则，而不仅仅是简单的缩放。",{"type":19,"tag":27,"props":2221,"children":2223},{"id":2222},"视觉一致性保证",[2224],{"type":24,"value":2225},"📏 视觉一致性保证",{"type":19,"tag":34,"props":2227,"children":2229},{"id":2228},"自动化设计-lint",[2230],{"type":24,"value":2231},"自动化设计 Lint",{"type":19,"tag":20,"props":2233,"children":2234},{},[2235],{"type":24,"value":2236},"我们在 CI/CD 流程中集成了设计规范检查工具，确保所有代码都使用了合法的 Design Tokens，而不是硬编码的魔法数值。",{"type":19,"tag":20,"props":2238,"children":2239},{},[2240],{"type":19,"tag":53,"props":2241,"children":2242},{},[2243],{"type":24,"value":2244},"Stylelint 插件配置",{"type":19,"tag":114,"props":2246,"children":2248},{"className":1329,"code":2247,"language":1331,"meta":7,"style":7},"// .stylelintrc.js\nmodule.exports = {\n  plugins: ['stylelint-design-tokens'],\n  rules: {\n    'design-tokens/value-no-hard-coded': [true, {\n      ignoreValues: ['0', '100%', 'inherit', 'transparent'],\n      severity: 'error',\n      message: 'Please use design tokens instead of hard-coded values.'\n    }],\n    'design-tokens/color-no-hex': true,\n    'design-tokens/font-family-no-string': true\n  }\n};\n",[2249],{"type":19,"tag":121,"props":2250,"children":2251},{"__ignoreMap":7},[2252,2260,2285,2302,2310,2332,2376,2393,2406,2414,2434,2451,2458],{"type":19,"tag":125,"props":2253,"children":2254},{"class":127,"line":128},[2255],{"type":19,"tag":125,"props":2256,"children":2257},{"style":132},[2258],{"type":24,"value":2259},"// .stylelintrc.js\n",{"type":19,"tag":125,"props":2261,"children":2262},{"class":127,"line":138},[2263,2268,2272,2277,2281],{"type":19,"tag":125,"props":2264,"children":2265},{"style":360},[2266],{"type":24,"value":2267},"module",{"type":19,"tag":125,"props":2269,"children":2270},{"style":148},[2271],{"type":24,"value":1512},{"type":19,"tag":125,"props":2273,"children":2274},{"style":360},[2275],{"type":24,"value":2276},"exports",{"type":19,"tag":125,"props":2278,"children":2279},{"style":142},[2280],{"type":24,"value":403},{"type":19,"tag":125,"props":2282,"children":2283},{"style":148},[2284],{"type":24,"value":252},{"type":19,"tag":125,"props":2286,"children":2287},{"class":127,"line":170},[2288,2293,2298],{"type":19,"tag":125,"props":2289,"children":2290},{"style":148},[2291],{"type":24,"value":2292},"  plugins: [",{"type":19,"tag":125,"props":2294,"children":2295},{"style":159},[2296],{"type":24,"value":2297},"'stylelint-design-tokens'",{"type":19,"tag":125,"props":2299,"children":2300},{"style":148},[2301],{"type":24,"value":1584},{"type":19,"tag":125,"props":2303,"children":2304},{"class":127,"line":199},[2305],{"type":19,"tag":125,"props":2306,"children":2307},{"style":148},[2308],{"type":24,"value":2309},"  rules: {\n",{"type":19,"tag":125,"props":2311,"children":2312},{"class":127,"line":225},[2313,2318,2322,2327],{"type":19,"tag":125,"props":2314,"children":2315},{"style":159},[2316],{"type":24,"value":2317},"    'design-tokens/value-no-hard-coded'",{"type":19,"tag":125,"props":2319,"children":2320},{"style":148},[2321],{"type":24,"value":1024},{"type":19,"tag":125,"props":2323,"children":2324},{"style":360},[2325],{"type":24,"value":2326},"true",{"type":19,"tag":125,"props":2328,"children":2329},{"style":148},[2330],{"type":24,"value":2331},", {\n",{"type":19,"tag":125,"props":2333,"children":2334},{"class":127,"line":235},[2335,2340,2345,2349,2354,2358,2363,2367,2372],{"type":19,"tag":125,"props":2336,"children":2337},{"style":148},[2338],{"type":24,"value":2339},"      ignoreValues: [",{"type":19,"tag":125,"props":2341,"children":2342},{"style":159},[2343],{"type":24,"value":2344},"'0'",{"type":19,"tag":125,"props":2346,"children":2347},{"style":148},[2348],{"type":24,"value":1034},{"type":19,"tag":125,"props":2350,"children":2351},{"style":159},[2352],{"type":24,"value":2353},"'100%'",{"type":19,"tag":125,"props":2355,"children":2356},{"style":148},[2357],{"type":24,"value":1034},{"type":19,"tag":125,"props":2359,"children":2360},{"style":159},[2361],{"type":24,"value":2362},"'inherit'",{"type":19,"tag":125,"props":2364,"children":2365},{"style":148},[2366],{"type":24,"value":1034},{"type":19,"tag":125,"props":2368,"children":2369},{"style":159},[2370],{"type":24,"value":2371},"'transparent'",{"type":19,"tag":125,"props":2373,"children":2374},{"style":148},[2375],{"type":24,"value":1584},{"type":19,"tag":125,"props":2377,"children":2378},{"class":127,"line":255},[2379,2384,2389],{"type":19,"tag":125,"props":2380,"children":2381},{"style":148},[2382],{"type":24,"value":2383},"      severity: ",{"type":19,"tag":125,"props":2385,"children":2386},{"style":159},[2387],{"type":24,"value":2388},"'error'",{"type":19,"tag":125,"props":2390,"children":2391},{"style":148},[2392],{"type":24,"value":451},{"type":19,"tag":125,"props":2394,"children":2395},{"class":127,"line":307},[2396,2401],{"type":19,"tag":125,"props":2397,"children":2398},{"style":148},[2399],{"type":24,"value":2400},"      message: ",{"type":19,"tag":125,"props":2402,"children":2403},{"style":159},[2404],{"type":24,"value":2405},"'Please use design tokens instead of hard-coded values.'\n",{"type":19,"tag":125,"props":2407,"children":2408},{"class":127,"line":347},[2409],{"type":19,"tag":125,"props":2410,"children":2411},{"style":148},[2412],{"type":24,"value":2413},"    }],\n",{"type":19,"tag":125,"props":2415,"children":2416},{"class":127,"line":370},[2417,2422,2426,2430],{"type":19,"tag":125,"props":2418,"children":2419},{"style":159},[2420],{"type":24,"value":2421},"    'design-tokens/color-no-hex'",{"type":19,"tag":125,"props":2423,"children":2424},{"style":148},[2425],{"type":24,"value":878},{"type":19,"tag":125,"props":2427,"children":2428},{"style":360},[2429],{"type":24,"value":2326},{"type":19,"tag":125,"props":2431,"children":2432},{"style":148},[2433],{"type":24,"value":451},{"type":19,"tag":125,"props":2435,"children":2436},{"class":127,"line":379},[2437,2442,2446],{"type":19,"tag":125,"props":2438,"children":2439},{"style":159},[2440],{"type":24,"value":2441},"    'design-tokens/font-family-no-string'",{"type":19,"tag":125,"props":2443,"children":2444},{"style":148},[2445],{"type":24,"value":878},{"type":19,"tag":125,"props":2447,"children":2448},{"style":360},[2449],{"type":24,"value":2450},"true\n",{"type":19,"tag":125,"props":2452,"children":2453},{"class":127,"line":387},[2454],{"type":19,"tag":125,"props":2455,"children":2456},{"style":148},[2457],{"type":24,"value":1308},{"type":19,"tag":125,"props":2459,"children":2460},{"class":127,"line":435},[2461],{"type":19,"tag":125,"props":2462,"children":2463},{"style":148},[2464],{"type":24,"value":2465},"};\n",{"type":19,"tag":34,"props":2467,"children":2469},{"id":2468},"视觉回归测试集成",[2470],{"type":24,"value":2468},{"type":19,"tag":20,"props":2472,"children":2473},{},[2474],{"type":24,"value":2475},"设计系统的每一次变更都会触发全量的组件库视觉回归测试，确保修改不会意外破坏现有的 UI 组件。",{"type":19,"tag":2197,"props":2477,"children":2478},{},[2479,2489],{"type":19,"tag":49,"props":2480,"children":2481},{},[2482,2487],{"type":19,"tag":53,"props":2483,"children":2484},{},[2485],{"type":24,"value":2486},"组件快照",{"type":24,"value":2488},"：为每个组件的每个变体（Variant）生成截图。",{"type":19,"tag":49,"props":2490,"children":2491},{},[2492,2497],{"type":19,"tag":53,"props":2493,"children":2494},{},[2495],{"type":24,"value":2496},"差异对比",{"type":24,"value":2498},"：对比新旧版本的截图，差异超过 0.1% 即报警。",{"type":19,"tag":27,"props":2500,"children":2502},{"id":2501},"动态主题与暗黑模式",[2503],{"type":24,"value":2504},"🔄 动态主题与暗黑模式",{"type":19,"tag":34,"props":2506,"children":2508},{"id":2507},"运行时主题切换",[2509],{"type":24,"value":2507},{"type":19,"tag":20,"props":2511,"children":2512},{},[2513],{"type":24,"value":2514},"得益于 CSS Variables 的使用，我们可以在运行时毫秒级切换整个设计主题，无需重新加载页面。",{"type":19,"tag":114,"props":2516,"children":2520},{"className":2517,"code":2518,"language":2519,"meta":7,"style":7},"language-css shiki shiki-themes github-dark github-dark","/* theme-dark.css */\n[data-theme='dark'] {\n  --color-background-page: #111827;\n  --color-text-body: #F9FAFB;\n  --color-primary-main: #60A5FA;\n  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.5);\n}\n\n/* theme-light.css */\n[data-theme='light'] {\n  --color-background-page: #F3F4F6;\n  --color-text-body: #111827;\n  --color-primary-main: #2563EB;\n  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n","css",[2521],{"type":19,"tag":121,"props":2522,"children":2523},{"__ignoreMap":7},[2524,2532,2559,2580,2601,2622,2709,2716,2723,2731,2755,2775,2794,2814,2894],{"type":19,"tag":125,"props":2525,"children":2526},{"class":127,"line":128},[2527],{"type":19,"tag":125,"props":2528,"children":2529},{"style":132},[2530],{"type":24,"value":2531},"/* theme-dark.css */\n",{"type":19,"tag":125,"props":2533,"children":2534},{"class":127,"line":138},[2535,2540,2545,2549,2554],{"type":19,"tag":125,"props":2536,"children":2537},{"style":148},[2538],{"type":24,"value":2539},"[",{"type":19,"tag":125,"props":2541,"children":2542},{"style":244},[2543],{"type":24,"value":2544},"data-theme",{"type":19,"tag":125,"props":2546,"children":2547},{"style":142},[2548],{"type":24,"value":156},{"type":19,"tag":125,"props":2550,"children":2551},{"style":159},[2552],{"type":24,"value":2553},"'dark'",{"type":19,"tag":125,"props":2555,"children":2556},{"style":148},[2557],{"type":24,"value":2558},"] {\n",{"type":19,"tag":125,"props":2560,"children":2561},{"class":127,"line":170},[2562,2567,2571,2576],{"type":19,"tag":125,"props":2563,"children":2564},{"style":259},[2565],{"type":24,"value":2566},"  --color-background-page",{"type":19,"tag":125,"props":2568,"children":2569},{"style":148},[2570],{"type":24,"value":878},{"type":19,"tag":125,"props":2572,"children":2573},{"style":360},[2574],{"type":24,"value":2575},"#111827",{"type":19,"tag":125,"props":2577,"children":2578},{"style":148},[2579],{"type":24,"value":196},{"type":19,"tag":125,"props":2581,"children":2582},{"class":127,"line":199},[2583,2588,2592,2597],{"type":19,"tag":125,"props":2584,"children":2585},{"style":259},[2586],{"type":24,"value":2587},"  --color-text-body",{"type":19,"tag":125,"props":2589,"children":2590},{"style":148},[2591],{"type":24,"value":878},{"type":19,"tag":125,"props":2593,"children":2594},{"style":360},[2595],{"type":24,"value":2596},"#F9FAFB",{"type":19,"tag":125,"props":2598,"children":2599},{"style":148},[2600],{"type":24,"value":196},{"type":19,"tag":125,"props":2602,"children":2603},{"class":127,"line":225},[2604,2609,2613,2618],{"type":19,"tag":125,"props":2605,"children":2606},{"style":259},[2607],{"type":24,"value":2608},"  --color-primary-main",{"type":19,"tag":125,"props":2610,"children":2611},{"style":148},[2612],{"type":24,"value":878},{"type":19,"tag":125,"props":2614,"children":2615},{"style":360},[2616],{"type":24,"value":2617},"#60A5FA",{"type":19,"tag":125,"props":2619,"children":2620},{"style":148},[2621],{"type":24,"value":196},{"type":19,"tag":125,"props":2623,"children":2624},{"class":127,"line":235},[2625,2630,2634,2639,2644,2649,2654,2658,2663,2667,2672,2676,2680,2684,2688,2692,2696,2700,2705],{"type":19,"tag":125,"props":2626,"children":2627},{"style":259},[2628],{"type":24,"value":2629},"  --shadow-card",{"type":19,"tag":125,"props":2631,"children":2632},{"style":148},[2633],{"type":24,"value":878},{"type":19,"tag":125,"props":2635,"children":2636},{"style":360},[2637],{"type":24,"value":2638},"0",{"type":19,"tag":125,"props":2640,"children":2641},{"style":360},[2642],{"type":24,"value":2643}," 4",{"type":19,"tag":125,"props":2645,"children":2646},{"style":142},[2647],{"type":24,"value":2648},"px",{"type":19,"tag":125,"props":2650,"children":2651},{"style":360},[2652],{"type":24,"value":2653}," 6",{"type":19,"tag":125,"props":2655,"children":2656},{"style":142},[2657],{"type":24,"value":2648},{"type":19,"tag":125,"props":2659,"children":2660},{"style":360},[2661],{"type":24,"value":2662}," -1",{"type":19,"tag":125,"props":2664,"children":2665},{"style":142},[2666],{"type":24,"value":2648},{"type":19,"tag":125,"props":2668,"children":2669},{"style":360},[2670],{"type":24,"value":2671}," rgba",{"type":19,"tag":125,"props":2673,"children":2674},{"style":148},[2675],{"type":24,"value":413},{"type":19,"tag":125,"props":2677,"children":2678},{"style":360},[2679],{"type":24,"value":2638},{"type":19,"tag":125,"props":2681,"children":2682},{"style":148},[2683],{"type":24,"value":1034},{"type":19,"tag":125,"props":2685,"children":2686},{"style":360},[2687],{"type":24,"value":2638},{"type":19,"tag":125,"props":2689,"children":2690},{"style":148},[2691],{"type":24,"value":1034},{"type":19,"tag":125,"props":2693,"children":2694},{"style":360},[2695],{"type":24,"value":2638},{"type":19,"tag":125,"props":2697,"children":2698},{"style":148},[2699],{"type":24,"value":1034},{"type":19,"tag":125,"props":2701,"children":2702},{"style":360},[2703],{"type":24,"value":2704},"0.5",{"type":19,"tag":125,"props":2706,"children":2707},{"style":148},[2708],{"type":24,"value":1378},{"type":19,"tag":125,"props":2710,"children":2711},{"class":127,"line":255},[2712],{"type":19,"tag":125,"props":2713,"children":2714},{"style":148},[2715],{"type":24,"value":376},{"type":19,"tag":125,"props":2717,"children":2718},{"class":127,"line":307},[2719],{"type":19,"tag":125,"props":2720,"children":2721},{"emptyLinePlaceholder":229},[2722],{"type":24,"value":232},{"type":19,"tag":125,"props":2724,"children":2725},{"class":127,"line":347},[2726],{"type":19,"tag":125,"props":2727,"children":2728},{"style":132},[2729],{"type":24,"value":2730},"/* theme-light.css */\n",{"type":19,"tag":125,"props":2732,"children":2733},{"class":127,"line":370},[2734,2738,2742,2746,2751],{"type":19,"tag":125,"props":2735,"children":2736},{"style":148},[2737],{"type":24,"value":2539},{"type":19,"tag":125,"props":2739,"children":2740},{"style":244},[2741],{"type":24,"value":2544},{"type":19,"tag":125,"props":2743,"children":2744},{"style":142},[2745],{"type":24,"value":156},{"type":19,"tag":125,"props":2747,"children":2748},{"style":159},[2749],{"type":24,"value":2750},"'light'",{"type":19,"tag":125,"props":2752,"children":2753},{"style":148},[2754],{"type":24,"value":2558},{"type":19,"tag":125,"props":2756,"children":2757},{"class":127,"line":379},[2758,2762,2766,2771],{"type":19,"tag":125,"props":2759,"children":2760},{"style":259},[2761],{"type":24,"value":2566},{"type":19,"tag":125,"props":2763,"children":2764},{"style":148},[2765],{"type":24,"value":878},{"type":19,"tag":125,"props":2767,"children":2768},{"style":360},[2769],{"type":24,"value":2770},"#F3F4F6",{"type":19,"tag":125,"props":2772,"children":2773},{"style":148},[2774],{"type":24,"value":196},{"type":19,"tag":125,"props":2776,"children":2777},{"class":127,"line":387},[2778,2782,2786,2790],{"type":19,"tag":125,"props":2779,"children":2780},{"style":259},[2781],{"type":24,"value":2587},{"type":19,"tag":125,"props":2783,"children":2784},{"style":148},[2785],{"type":24,"value":878},{"type":19,"tag":125,"props":2787,"children":2788},{"style":360},[2789],{"type":24,"value":2575},{"type":19,"tag":125,"props":2791,"children":2792},{"style":148},[2793],{"type":24,"value":196},{"type":19,"tag":125,"props":2795,"children":2796},{"class":127,"line":435},[2797,2801,2805,2810],{"type":19,"tag":125,"props":2798,"children":2799},{"style":259},[2800],{"type":24,"value":2608},{"type":19,"tag":125,"props":2802,"children":2803},{"style":148},[2804],{"type":24,"value":878},{"type":19,"tag":125,"props":2806,"children":2807},{"style":360},[2808],{"type":24,"value":2809},"#2563EB",{"type":19,"tag":125,"props":2811,"children":2812},{"style":148},[2813],{"type":24,"value":196},{"type":19,"tag":125,"props":2815,"children":2816},{"class":127,"line":454},[2817,2821,2825,2829,2833,2837,2841,2845,2849,2853,2857,2861,2865,2869,2873,2877,2881,2885,2890],{"type":19,"tag":125,"props":2818,"children":2819},{"style":259},[2820],{"type":24,"value":2629},{"type":19,"tag":125,"props":2822,"children":2823},{"style":148},[2824],{"type":24,"value":878},{"type":19,"tag":125,"props":2826,"children":2827},{"style":360},[2828],{"type":24,"value":2638},{"type":19,"tag":125,"props":2830,"children":2831},{"style":360},[2832],{"type":24,"value":2643},{"type":19,"tag":125,"props":2834,"children":2835},{"style":142},[2836],{"type":24,"value":2648},{"type":19,"tag":125,"props":2838,"children":2839},{"style":360},[2840],{"type":24,"value":2653},{"type":19,"tag":125,"props":2842,"children":2843},{"style":142},[2844],{"type":24,"value":2648},{"type":19,"tag":125,"props":2846,"children":2847},{"style":360},[2848],{"type":24,"value":2662},{"type":19,"tag":125,"props":2850,"children":2851},{"style":142},[2852],{"type":24,"value":2648},{"type":19,"tag":125,"props":2854,"children":2855},{"style":360},[2856],{"type":24,"value":2671},{"type":19,"tag":125,"props":2858,"children":2859},{"style":148},[2860],{"type":24,"value":413},{"type":19,"tag":125,"props":2862,"children":2863},{"style":360},[2864],{"type":24,"value":2638},{"type":19,"tag":125,"props":2866,"children":2867},{"style":148},[2868],{"type":24,"value":1034},{"type":19,"tag":125,"props":2870,"children":2871},{"style":360},[2872],{"type":24,"value":2638},{"type":19,"tag":125,"props":2874,"children":2875},{"style":148},[2876],{"type":24,"value":1034},{"type":19,"tag":125,"props":2878,"children":2879},{"style":360},[2880],{"type":24,"value":2638},{"type":19,"tag":125,"props":2882,"children":2883},{"style":148},[2884],{"type":24,"value":1034},{"type":19,"tag":125,"props":2886,"children":2887},{"style":360},[2888],{"type":24,"value":2889},"0.1",{"type":19,"tag":125,"props":2891,"children":2892},{"style":148},[2893],{"type":24,"value":1378},{"type":19,"tag":125,"props":2895,"children":2896},{"class":127,"line":468},[2897],{"type":19,"tag":125,"props":2898,"children":2899},{"style":148},[2900],{"type":24,"value":376},{"type":19,"tag":34,"props":2902,"children":2904},{"id":2903},"智能对比度增强",[2905],{"type":24,"value":2903},{"type":19,"tag":20,"props":2907,"children":2908},{},[2909],{"type":24,"value":2910},"在生成暗黑模式或高对比度模式时，AI 会自动计算前景色与背景色的对比度（Contrast Ratio），确保符合 WCAG AA 标准（至少 4.5:1）。",{"type":19,"tag":27,"props":2912,"children":2914},{"id":2913},"相关技术文档",[2915],{"type":24,"value":2916},"🔗 相关技术文档",{"type":19,"tag":2197,"props":2918,"children":2919},{},[2920,2930,2939,2948],{"type":19,"tag":49,"props":2921,"children":2922},{},[2923],{"type":19,"tag":2924,"props":2925,"children":2927},"a",{"href":2926},"/ai/style-customization.md",[2928],{"type":24,"value":2929},"样式定制系统",{"type":19,"tag":49,"props":2931,"children":2932},{},[2933],{"type":19,"tag":2924,"props":2934,"children":2936},{"href":2935},"/ai/quality-assurance.md",[2937],{"type":24,"value":2938},"质量保证体系",{"type":19,"tag":49,"props":2940,"children":2941},{},[2942],{"type":19,"tag":2924,"props":2943,"children":2945},{"href":2944},"/ai/quick-prototype.md",[2946],{"type":24,"value":2947},"快速原型生成",{"type":19,"tag":49,"props":2949,"children":2950},{},[2951],{"type":19,"tag":2924,"props":2952,"children":2954},{"href":2953},"/guide/semantic-html.md",[2955],{"type":24,"value":2956},"无障碍设计规范",{"type":19,"tag":2958,"props":2959,"children":2960},"hr",{},[],{"type":19,"tag":20,"props":2962,"children":2963},{},[2964],{"type":19,"tag":2965,"props":2966,"children":2967},"em",{},[2968],{"type":24,"value":2969},"设计系统是连接品牌创意与工程实现的桥梁。HTMLPAGE 通过智能化的设计系统架构，让每一次生成都既高效又精准。",{"type":19,"tag":2971,"props":2972,"children":2973},"style",{},[2974],{"type":24,"value":2975},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":170,"depth":170,"links":2977},[2978,2982,2986,2990,2994,2998],{"id":29,"depth":138,"text":32,"children":2979},[2980,2981],{"id":36,"depth":170,"text":36},{"id":102,"depth":170,"text":102},{"id":789,"depth":138,"text":792,"children":2983},[2984,2985],{"id":795,"depth":170,"text":798},{"id":1318,"depth":170,"text":1321},{"id":1817,"depth":138,"text":1820,"children":2987},[2988,2989],{"id":1823,"depth":170,"text":1823},{"id":2188,"depth":170,"text":2188},{"id":2222,"depth":138,"text":2225,"children":2991},[2992,2993],{"id":2228,"depth":170,"text":2231},{"id":2468,"depth":170,"text":2468},{"id":2501,"depth":138,"text":2504,"children":2995},[2996,2997],{"id":2507,"depth":170,"text":2507},{"id":2903,"depth":170,"text":2903},{"id":2913,"depth":138,"text":2916},"markdown","content:ai:design-system.md","content","ai/design-system.md","ai/design-system","md",[3006,3017,3026],{"_path":3007,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":3008,"description":3009,"keywords":3010,"schemaType":3011,"author":11,"date":3012,"image":3013,"_type":2999,"_id":3014,"_source":3001,"_file":3015,"_stem":3016,"_extension":3004},"/ai/architecture-overview","AI架构概述 - HTMLPAGE智能网页生成系统","HTMLPAGE AI系统架构深度解析，了解多智能体协作、实时流式生成、模块化组装等核心技术，探索AI如何革新网页设计流程。","AI网页生成, 多智能体系统, 实时流式AI, 智能网页设计, AI架构, 机器学习","TechArticle","2025-11-24","/content-images/ai/architecture-overview.jpg","content:ai:architecture-overview.md","ai/architecture-overview.md","ai/architecture-overview",{"_path":3018,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":3019,"description":3020,"keywords":3021,"author":11,"date":12,"category":3022,"image":14,"_type":2999,"_id":3023,"_source":3001,"_file":3024,"_stem":3025,"_extension":3004},"/ai/batch-creation","批量页面创建","模板 + 提示词模式组合进行多页面高效率生成","批量页面创建, 批量生成, 提示词模板, HTMLPAGE","应用场景","content:ai:batch-creation.md","ai/batch-creation.md","ai/batch-creation",{"_path":3027,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":3028,"description":3029,"keywords":3030,"author":11,"date":12,"category":3031,"image":14,"_type":2999,"_id":3032,"_source":3001,"_file":3033,"_stem":3034,"_extension":3004},"/ai/case-studies","AI 案例研究","HTMLPAGE AI 在不同行业和场景中的成功应用案例","AI 案例研究, 成功案例, 页面生成, HTMLPAGE","案例研究","content:ai:case-studies.md","ai/case-studies.md","ai/case-studies",1774945280822]