[{"data":1,"prerenderedAt":2074},["ShallowReactive",2],{"blog-cyberpunk-design-system":3},{"id":4,"title":5,"body":6,"date":2062,"description":2063,"extension":2064,"meta":2065,"navigation":688,"path":2066,"seo":2067,"stem":2068,"tags":2069,"__hash__":2073},"blogs\u002Fblogs\u002Fcyberpunk-design-system.md","Cyberpunk \u002F Glitch 赛博朋克故障风设计系统",{"type":7,"value":8,"toc":2035},"minimark",[9,13,17,21,29,32,40,43,49,59,65,68,108,111,115,119,330,333,338,368,373,511,514,524,537,543,647,650,655,802,807,879,884,901,905,911,1005,1011,1099,1105,1111,1113,1116,1119,1122,1139,1144,1150,1155,1161,1166,1172,1177,1183,1189,1195,1199,1204,1210,1216,1222,1228,1234,1237,1243,1245,1248,1258,1263,1289,1302,1307,1329,1331,1335,1340,1404,1406,1409,1415,1420,1463,1468,1775,1777,1780,1785,1813,1819,1821,1824,1830,1835,1849,1854,1874,1879,1902,1907,1918,1920,1923,1929,1934,1986,1989,1999,2001,2004,2031],[10,11,5],"h1",{"id":12},"cyberpunk-glitch-赛博朋克故障风设计系统",[14,15,16],"h2",{"id":16},"设计哲学",[18,19,20],"h3",{"id":20},"核心原则",[22,23,24,28],"p",{},[25,26,27],"strong",{},"\"高科技，低生活。\""," 这种美学是数字反乌托邦与高科技黑色现实的碰撞。它捕捉了先进技术与社会衰败之间的张力——一个地下黑客、霓虹浸透的巨型城市和腐败数据流的世界。这不是一个干净、乌托邦式的未来；它是粗糙的、不完美的、明显危险的。每个像素都应该感觉像是在东京雨巷中故障的 CRT 显示器上渲染，或是在地下掩体中的流氓终端上显示。",[18,30,31],{"id":31},"氛围感",[22,33,34,35,39],{},"危险、带电、叛逆、激进的未来复古主义。它大量借鉴 80 年代科幻视觉语言（《银翼杀手》、《阿基拉》）和黑客文化（《黑客帝国》、《攻壳机动队》）。界面应该感觉",[36,37,38],"em",{},"活着","且不稳定——充满数字能量的嗡嗡声、数据损坏的故障、原始力量的脉动。它不仅仅是一个网站；它是一个被黑掉的信号、一个被禁止的界面、一个通往城市蔓延的窗口。",[18,41,42],{"id":42},"触觉体验",[22,44,45,48],{},[25,46,47],{},"不完美的技术","：拥抱模拟到数字转换的产物。扫描线、色差（RGB 分离）和信号噪声不是 bug；它们是特性。UI 应该感觉像是在努力容纳它显示的数据。",[22,50,51,54,55,58],{},[25,52,53],{},"虚空 vs 光明","：背景不仅仅是黑暗；它是虚空。在这片绝对的黑暗中，霓虹光（青色、洋红、酸绿）不仅仅是给元素着色——它",[36,56,57],{},"照亮","了它们。光源应该感觉有形，投射出定义层次结构的光晕和阴影。",[22,60,61,64],{},[25,62,63],{},"工业粗野主义","：形状是硬朗的、有角度的、实用的。倒角（45 度切割）取代了友好的圆角矩形。边框是技术性的、精确的，类似于蓝图或 HUD（抬头显示器）示意图，而非装饰性框架。",[18,66,67],{"id":67},"令人难忘的视觉特征",[69,70,71,78,84,90,96,102],"ul",{},[72,73,74,77],"li",{},[25,75,76],{},"色差","：文本和元素上的 RGB 颜色分离（红\u002F青色偏移阴影），模拟镜头畸变或信号干扰",[72,79,80,83],{},[25,81,82],{},"扫描线","：微妙的水平线覆盖层，模仿旧 CRT 显示器的刷新率，增加纹理并统一构图",[72,85,86,89],{},[25,87,88],{},"故障效果","：通过 clip-path 动画、倾斜变换和闪烁文本实现的故意\"损坏\"，暗示不稳定连接或被黑系统",[72,91,92,95],{},[25,93,94],{},"霓虹光晕","：文本和边框的字面发光，使用强烈的多层 box-shadow\u002Ftext-shadow 堆叠，在暗背景上创造\"光剑\"或\"霓虹灯\"效果",[72,97,98,101],{},[25,99,100],{},"切角","：卡片和按钮上的倒角\u002F切割角，创造军事化、科技面板美学",[72,103,104,107],{},[25,105,106],{},"电路图案","：类似 PCB 走线或数据高速公路的装饰性 SVG 背景，暗示底层硬件",[109,110],"hr",{},[14,112,114],{"id":113},"设计-token-系统dna","设计 Token 系统（DNA）",[18,116,118],{"id":117},"颜色深色模式-强制","颜色（深色模式 - 强制）",[120,121,122,138],"table",{},[123,124,125],"thead",{},[126,127,128,132,135],"tr",{},[129,130,131],"th",{},"Token",[129,133,134],{},"色值",[129,136,137],{},"说明",[139,140,141,158,173,188,203,218,236,254,272,287,301,315],"tbody",{},[126,142,143,150,155],{},[144,145,146],"td",{},[147,148,149],"code",{},"background",[144,151,152],{},[147,153,154],{},"#0a0a0f",[144,156,157],{},"深虚空黑，带轻微蓝色底色",[126,159,160,165,170],{},[144,161,162],{},[147,163,164],{},"foreground",[144,166,167],{},[147,168,169],{},"#e0e0e0",[144,171,172],{},"主文本，非纯白（不那么刺眼）",[126,174,175,180,185],{},[144,176,177],{},[147,178,179],{},"card",[144,181,182],{},[147,183,184],{},"#12121a",[144,186,187],{},"卡片背景，深紫黑色",[126,189,190,195,200],{},[144,191,192],{},[147,193,194],{},"muted",[144,196,197],{},[147,198,199],{},"#1c1c2e",[144,201,202],{},"UI 装饰\u002F elevated 背景",[126,204,205,210,215],{},[144,206,207],{},[147,208,209],{},"mutedForeground",[144,211,212],{},[147,213,214],{},"#6b7280",[144,216,217],{},"次要文本，降低对比度",[126,219,220,225,230],{},[144,221,222],{},[147,223,224],{},"accent",[144,226,227],{},[147,228,229],{},"#00ff88",[144,231,232,235],{},[25,233,234],{},"主霓虹色"," - 电光绿（受《黑客帝国》启发）",[126,237,238,243,248],{},[144,239,240],{},[147,241,242],{},"accentSecondary",[144,244,245],{},[147,246,247],{},"#ff00ff",[144,249,250,253],{},[25,251,252],{},"次霓虹色"," - 热洋红\u002F粉色",[126,255,256,261,266],{},[144,257,258],{},[147,259,260],{},"accentTertiary",[144,262,263],{},[147,264,265],{},"#00d4ff",[144,267,268,271],{},[25,269,270],{},"第三霓虹色"," - 青色\u002F电光蓝",[126,273,274,279,284],{},[144,275,276],{},[147,277,278],{},"border",[144,280,281],{},[147,282,283],{},"#2a2a3a",[144,285,286],{},"微妙边框",[126,288,289,294,298],{},[144,290,291],{},[147,292,293],{},"input",[144,295,296],{},[147,297,184],{},[144,299,300],{},"深输入框背景",[126,302,303,308,312],{},[144,304,305],{},[147,306,307],{},"ring",[144,309,310],{},[147,311,229],{},[144,313,314],{},"聚焦环匹配强调色",[126,316,317,322,327],{},[144,318,319],{},[147,320,321],{},"destructive",[144,323,324],{},[147,325,326],{},"#ff3366",[144,328,329],{},"错误\u002F危险红粉色",[18,331,332],{"id":332},"排版",[22,334,335],{},[25,336,337],{},"字体栈：",[69,339,340,350,359],{},[72,341,342,345,346,349],{},[25,343,344],{},"标题","：",[147,347,348],{},"\"Orbitron\", \"Share Tech Mono\", monospace"," — 几何、未来感、机械化",[72,351,352,345,355,358],{},[25,353,354],{},"正文",[147,356,357],{},"\"JetBrains Mono\", \"Fira Code\", \"Consolas\", monospace"," — 干净的等宽字体，带来终端感觉",[72,360,361,345,364,367],{},[25,362,363],{},"强调\u002F标签",[147,365,366],{},"\"Share Tech Mono\", monospace"," — 用于 UI 标签、时间戳、徽章",[22,369,370],{},[25,371,372],{},"比例与样式：",[120,374,375,391],{},[123,376,377],{},[126,378,379,382,385,388],{},[129,380,381],{},"元素",[129,383,384],{},"大小",[129,386,387],{},"字重",[129,389,390],{},"样式",[139,392,393,421,446,468,489],{},[126,394,395,398,407,412],{},[144,396,397],{},"H1",[144,399,400,403,404],{},[147,401,402],{},"text-6xl"," 到 ",[147,405,406],{},"text-8xl",[144,408,409],{},[147,410,411],{},"font-black",[144,413,414,417,418],{},[147,415,416],{},"uppercase",", ",[147,419,420],{},"tracking-widest",[126,422,423,426,434,439],{},[144,424,425],{},"H2",[144,427,428,403,431],{},[147,429,430],{},"text-4xl",[147,432,433],{},"text-5xl",[144,435,436],{},[147,437,438],{},"font-bold",[144,440,441,417,443],{},[147,442,416],{},[147,444,445],{},"tracking-wide",[126,447,448,451,459,464],{},[144,449,450],{},"H3",[144,452,453,403,456],{},[147,454,455],{},"text-xl",[147,457,458],{},"text-2xl",[144,460,461],{},[147,462,463],{},"font-semibold",[144,465,466],{},[147,467,416],{},[126,469,470,472,477,482],{},[144,471,354],{},[144,473,474],{},[147,475,476],{},"text-base",[144,478,479],{},[147,480,481],{},"font-normal",[144,483,484,417,486],{},[147,485,445],{},[147,487,488],{},"leading-relaxed",[126,490,491,494,499,504],{},[144,492,493],{},"代码\u002F标签",[144,495,496],{},[147,497,498],{},"text-sm",[144,500,501],{},[147,502,503],{},"font-mono",[144,505,506,417,508],{},[147,507,416],{},[147,509,510],{},"tracking-[0.2em]",[18,512,513],{"id":513},"圆角与边框",[515,516,521],"pre",{"className":517,"code":519,"language":520},[518],"language-text","radius.none:     0px        \u002F\u002F 锐利切割是默认\nradius.sm:       2px        \u002F\u002F 最小柔化\nradius.base:     4px        \u002F\u002F 罕见，仅用于输入框\nradius.chamfer:  使用 clip-path 实现切角而非 border-radius\n","text",[147,522,519],{"__ignoreMap":523},"",[22,525,526,345,529,532,533,536],{},[25,527,528],{},"边框宽度",[147,530,531],{},"1px"," 默认，",[147,534,535],{},"2px"," 强调，边框通常使用渐变或光晕效果",[22,538,539,542],{},[25,540,541],{},"倒角图案","（通过 clip-path 应用）：",[515,544,548],{"className":545,"code":546,"language":547,"meta":523,"style":523},"language-css shiki shiki-themes one-dark-pro","clip-path: polygon(\n  0 10px, 10px 0,                           \u002F* 左上切 *\u002F\n  calc(100% - 10px) 0, 100% 10px,           \u002F* 右上切 *\u002F\n  100% calc(100% - 10px), calc(100% - 10px) 100%,  \u002F* 右下切 *\u002F\n  10px 100%, 0 calc(100% - 10px)            \u002F* 左下切 *\u002F\n);\n","css",[147,549,550,563,583,601,621,641],{"__ignoreMap":523},[551,552,555,559],"span",{"class":553,"line":554},"line",1,[551,556,558],{"class":557},"sVyAn","clip-path",[551,560,562],{"class":561},"seHd6",": polygon(\n",[551,564,566,569,573,576,579],{"class":553,"line":565},2,[551,567,568],{"class":561},"  0 10px",[551,570,572],{"class":571},"sn6KH",",",[551,574,575],{"class":561}," 10px 0",[551,577,578],{"class":571},",                           ",[551,580,582],{"class":581},"sV9Aq","\u002F* 左上切 *\u002F\n",[551,584,586,589,592,595,598],{"class":553,"line":585},3,[551,587,588],{"class":561},"  calc(100% - 10px",[551,590,591],{"class":571},") 0, 100% 10",[551,593,594],{"class":561},"px",[551,596,597],{"class":571},",           ",[551,599,600],{"class":581},"\u002F* 右上切 *\u002F\n",[551,602,604,607,610,613,615,618],{"class":553,"line":603},4,[551,605,606],{"class":571},"  100% ",[551,608,609],{"class":561},"calc(100% - 10px",[551,611,612],{"class":571},"), ",[551,614,609],{"class":561},[551,616,617],{"class":571},") 100%,  ",[551,619,620],{"class":581},"\u002F* 右下切 *\u002F\n",[551,622,624,627,630,632,635,638],{"class":553,"line":623},5,[551,625,626],{"class":571},"  10",[551,628,629],{"class":561},"px 100%",[551,631,572],{"class":571},[551,633,634],{"class":561}," 0 calc(100% - 10px",[551,636,637],{"class":571},")            ",[551,639,640],{"class":581},"\u002F* 左下切 *\u002F\n",[551,642,644],{"class":553,"line":643},6,[551,645,646],{"class":571},");\n",[18,648,649],{"id":649},"阴影与效果",[22,651,652,345],{},[25,653,654],{},"霓虹光晕（CSS 变量 Token）",[515,656,658],{"className":545,"code":657,"language":547,"meta":523,"style":523},"\u002F* 主霓虹光晕 - 用于悬停状态、聚焦环、高亮元素 *\u002F\n--box-shadow-neon: 0 0 5px #00ff88, 0 0 10px #00ff8840;\n\n\u002F* 小霓虹光晕 - 微妙强调 *\u002F\n--box-shadow-neon-sm: 0 0 3px #00ff88, 0 0 6px #00ff8830;\n\n\u002F* 大霓虹光晕 - 强调状态、hero 元素 *\u002F\n--box-shadow-neon-lg: 0 0 10px #00ff88, 0 0 20px #00ff8860, 0 0 40px #00ff8830;\n\n\u002F* 次霓虹（洋红） *\u002F\n--box-shadow-neon-secondary: 0 0 5px #ff00ff, 0 0 20px #ff00ff60;\n\n\u002F* 第三霓虹（青色） *\u002F\n--box-shadow-neon-tertiary: 0 0 5px #00d4ff, 0 0 20px #00d4ff60;\n",[147,659,660,665,684,690,695,712,716,722,747,752,758,774,779,785],{"__ignoreMap":523},[551,661,662],{"class":553,"line":554},[551,663,664],{"class":581},"\u002F* 主霓虹光晕 - 用于悬停状态、聚焦环、高亮元素 *\u002F\n",[551,666,667,670,673,675,678,681],{"class":553,"line":565},[551,668,669],{"class":561},"--box-shadow-neon: 0 0 5px ",[551,671,229],{"class":672},"sLaUg",[551,674,572],{"class":571},[551,676,677],{"class":561}," 0 0 10px ",[551,679,680],{"class":672},"#00ff8840",[551,682,683],{"class":561},";\n",[551,685,686],{"class":553,"line":585},[551,687,689],{"emptyLinePlaceholder":688},true,"\n",[551,691,692],{"class":553,"line":603},[551,693,694],{"class":581},"\u002F* 小霓虹光晕 - 微妙强调 *\u002F\n",[551,696,697,700,702,704,707,710],{"class":553,"line":623},[551,698,699],{"class":561},"--box-shadow-neon-sm: 0 0 3px ",[551,701,229],{"class":672},[551,703,572],{"class":571},[551,705,706],{"class":561}," 0 0 6px ",[551,708,709],{"class":672},"#00ff8830",[551,711,683],{"class":561},[551,713,714],{"class":553,"line":643},[551,715,689],{"emptyLinePlaceholder":688},[551,717,719],{"class":553,"line":718},7,[551,720,721],{"class":581},"\u002F* 大霓虹光晕 - 强调状态、hero 元素 *\u002F\n",[551,723,725,728,730,732,735,738,740,743,745],{"class":553,"line":724},8,[551,726,727],{"class":561},"--box-shadow-neon-lg: 0 0 10px ",[551,729,229],{"class":672},[551,731,572],{"class":571},[551,733,734],{"class":561}," 0 0 20px ",[551,736,737],{"class":672},"#00ff8860",[551,739,572],{"class":571},[551,741,742],{"class":561}," 0 0 40px ",[551,744,709],{"class":672},[551,746,683],{"class":561},[551,748,750],{"class":553,"line":749},9,[551,751,689],{"emptyLinePlaceholder":688},[551,753,755],{"class":553,"line":754},10,[551,756,757],{"class":581},"\u002F* 次霓虹（洋红） *\u002F\n",[551,759,761,764,767,769,771],{"class":553,"line":760},11,[551,762,763],{"class":561},"--box-shadow-neon-secondary: 0 0 5px ",[551,765,247],{"class":766},"sVbv2",[551,768,572],{"class":571},[551,770,734],{"class":561},[551,772,773],{"class":672},"#ff00ff60;\n",[551,775,777],{"class":553,"line":776},12,[551,778,689],{"emptyLinePlaceholder":688},[551,780,782],{"class":553,"line":781},13,[551,783,784],{"class":581},"\u002F* 第三霓虹（青色） *\u002F\n",[551,786,788,791,793,795,797,800],{"class":553,"line":787},14,[551,789,790],{"class":561},"--box-shadow-neon-tertiary: 0 0 5px ",[551,792,265],{"class":672},[551,794,572],{"class":571},[551,796,734],{"class":561},[551,798,799],{"class":672},"#00d4ff60",[551,801,683],{"class":561},[22,803,804,345],{},[25,805,806],{},"文本阴影深度",[515,808,810],{"className":545,"code":809,"language":547,"meta":523,"style":523},"\u002F* 故障效果文本阴影（用于 hero 标题） *\u002F\ndrop-shadow: 0 0 10px rgba(0, 255, 136, 0.5);\n\n\u002F* 渐变文本光晕 *\u002F\ndrop-shadow: 0 0 20px rgba(0, 255, 136, 0.3);\n",[147,811,812,817,846,850,855],{"__ignoreMap":523},[551,813,814],{"class":553,"line":554},[551,815,816],{"class":581},"\u002F* 故障效果文本阴影（用于 hero 标题） *\u002F\n",[551,818,819,822,825,827,830,832,835,837,840,844],{"class":553,"line":565},[551,820,821],{"class":557},"drop-shadow",[551,823,824],{"class":561},": 0 0 10px rgba(0",[551,826,572],{"class":571},[551,828,829],{"class":561}," 255",[551,831,572],{"class":571},[551,833,834],{"class":561}," 136",[551,836,572],{"class":571},[551,838,839],{"class":561}," 0",[551,841,843],{"class":842},"sVC51",".5",[551,845,646],{"class":571},[551,847,848],{"class":553,"line":585},[551,849,689],{"emptyLinePlaceholder":688},[551,851,852],{"class":553,"line":603},[551,853,854],{"class":581},"\u002F* 渐变文本光晕 *\u002F\n",[551,856,857,859,862,864,866,868,870,872,874,877],{"class":553,"line":623},[551,858,821],{"class":557},[551,860,861],{"class":561},": 0 0 20px rgba(0",[551,863,572],{"class":571},[551,865,829],{"class":561},[551,867,572],{"class":571},[551,869,834],{"class":561},[551,871,572],{"class":571},[551,873,839],{"class":561},[551,875,876],{"class":842},".3",[551,878,646],{"class":571},[22,880,881,883],{},[25,882,76],{},"（通过 .cyber-glitch 上的 CSS 动画实现）：\n通过 ::before 和 ::after 伪元素实现：",[69,885,886,892,898],{},[72,887,888,891],{},[147,889,890],{},"text-shadow: -1px 0 #ff00ff","（洋红左）",[72,893,894,897],{},[147,895,896],{},"text-shadow: -1px 0 #00d4ff","（青色右）",[72,899,900],{},"clip-path 动画实现故障效果",[18,902,904],{"id":903},"纹理与图案深度关键","纹理与图案（深度关键）",[22,906,907,910],{},[25,908,909],{},"1. 扫描线覆盖层","（CSS 伪元素）：",[515,912,914],{"className":545,"code":913,"language":547,"meta":523,"style":523},"background: repeating-linear-gradient(\n  0deg,\n  transparent,\n  transparent 2px,\n  rgba(0, 0, 0, 0.3) 2px,\n  rgba(0, 0, 0, 0.3) 4px\n);\npointer-events: none;\n",[147,915,916,921,929,936,943,969,993,997],{"__ignoreMap":523},[551,917,918],{"class":553,"line":554},[551,919,920],{"class":561},"background: repeating-linear-gradient(\n",[551,922,923,926],{"class":553,"line":565},[551,924,925],{"class":561},"  0deg",[551,927,928],{"class":571},",\n",[551,930,931,934],{"class":553,"line":585},[551,932,933],{"class":561},"  transparent",[551,935,928],{"class":571},[551,937,938,941],{"class":553,"line":603},[551,939,940],{"class":561},"  transparent 2px",[551,942,928],{"class":571},[551,944,945,948,950,952,954,956,958,960,962,965,967],{"class":553,"line":623},[551,946,947],{"class":561},"  rgba(0",[551,949,572],{"class":571},[551,951,839],{"class":561},[551,953,572],{"class":571},[551,955,839],{"class":561},[551,957,572],{"class":571},[551,959,839],{"class":561},[551,961,876],{"class":842},[551,963,964],{"class":571},") 2",[551,966,594],{"class":561},[551,968,928],{"class":571},[551,970,971,973,975,977,979,981,983,985,987,990],{"class":553,"line":643},[551,972,947],{"class":561},[551,974,572],{"class":571},[551,976,839],{"class":561},[551,978,572],{"class":571},[551,980,839],{"class":561},[551,982,572],{"class":571},[551,984,839],{"class":561},[551,986,876],{"class":842},[551,988,989],{"class":571},") 4",[551,991,992],{"class":561},"px\n",[551,994,995],{"class":553,"line":718},[551,996,646],{"class":571},[551,998,999,1002],{"class":553,"line":724},[551,1000,1001],{"class":557},"pointer-events",[551,1003,1004],{"class":561},": none;\n",[22,1006,1007,1010],{},[25,1008,1009],{},"2. 网格\u002F电路图案","（微妙背景）：",[515,1012,1014],{"className":545,"code":1013,"language":547,"meta":523,"style":523},"background-image:\n  linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),\n  linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);\nbackground-size: 50px 50px;\n",[147,1015,1016,1024,1057,1091],{"__ignoreMap":523},[551,1017,1018,1021],{"class":553,"line":554},[551,1019,1020],{"class":557},"background-image",[551,1022,1023],{"class":561},":\n",[551,1025,1026,1029,1031,1033,1035,1037,1039,1041,1044,1047,1049,1051,1054],{"class":553,"line":565},[551,1027,1028],{"class":561},"  linear-gradient(rgba(0",[551,1030,572],{"class":571},[551,1032,829],{"class":561},[551,1034,572],{"class":571},[551,1036,834],{"class":561},[551,1038,572],{"class":571},[551,1040,839],{"class":561},[551,1042,1043],{"class":842},".03",[551,1045,1046],{"class":571},") 1",[551,1048,594],{"class":561},[551,1050,572],{"class":571},[551,1052,1053],{"class":561}," transparent 1px",[551,1055,1056],{"class":571},"),\n",[551,1058,1059,1062,1064,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089],{"class":553,"line":585},[551,1060,1061],{"class":561},"  linear-gradient(90deg",[551,1063,572],{"class":571},[551,1065,1066],{"class":561}," rgba(0",[551,1068,572],{"class":571},[551,1070,829],{"class":561},[551,1072,572],{"class":571},[551,1074,834],{"class":561},[551,1076,572],{"class":571},[551,1078,839],{"class":561},[551,1080,1043],{"class":842},[551,1082,1046],{"class":571},[551,1084,594],{"class":561},[551,1086,572],{"class":571},[551,1088,1053],{"class":561},[551,1090,646],{"class":571},[551,1092,1093,1096],{"class":553,"line":603},[551,1094,1095],{"class":557},"background-size",[551,1097,1098],{"class":561},": 50px 50px;\n",[22,1100,1101,1104],{},[25,1102,1103],{},"3. 噪点纹理","：应用微妙的 CSS 噪点滤镜或 5-10% 不透明度的 SVG 噪点覆盖层",[22,1106,1107,1110],{},[25,1108,1109],{},"4. 渐变网格","：角落处极低不透明度的强调色径向渐变",[109,1112],{},[14,1114,1115],{"id":1115},"组件样式",[18,1117,1118],{"id":1118},"按钮",[22,1120,1121],{},"所有按钮使用：",[69,1123,1124,1127,1130,1133,1136],{},[72,1125,1126],{},"字体：monospace",[72,1128,1129],{},"文本转换：uppercase",[72,1131,1132],{},"字间距：wider",[72,1134,1135],{},"过渡：all 实现平滑效果",[72,1137,1138],{},"聚焦环：2px 强调色",[22,1140,1141,345],{},[25,1142,1143],{},"默认变体",[515,1145,1148],{"className":1146,"code":1147,"language":520},[518],"- 背景：transparent\n- 边框：2px solid accent (#00ff88)\n- 文本：accent 颜色\n- Clip-path: .cyber-chamfer-sm（较小倒角）\n- 悬停：背景填充 accent，文本变为背景色，霓虹光晕阴影\n",[147,1149,1147],{"__ignoreMap":523},[22,1151,1152,345],{},[25,1153,1154],{},"次要变体",[515,1156,1159],{"className":1157,"code":1158,"language":520},[518],"- 边框：2px solid accentSecondary (#ff00ff)\n- 文本：accentSecondary\n- 悬停：填充洋红，neon-secondary 光晕\n",[147,1160,1158],{"__ignoreMap":523},[22,1162,1163,345],{},[25,1164,1165],{},"轮廓变体",[515,1167,1170],{"className":1168,"code":1169,"language":520},[518],"- 边框：1px solid border (#2a2a3a)\n- 背景：transparent\n- 悬停：边框变为 accent，文本变为 accent，霓虹光晕出现\n",[147,1171,1169],{"__ignoreMap":523},[22,1173,1174,345],{},[25,1175,1176],{},"幽灵变体",[515,1178,1181],{"className":1179,"code":1180,"language":520},[518],"- 无边框\n- 悬停：背景 accent\u002F10 不透明度，文本变为 accent\n",[147,1182,1180],{"__ignoreMap":523},[22,1184,1185,1188],{},[25,1186,1187],{},"故障变体","（CTA）：",[515,1190,1193],{"className":1191,"code":1192,"language":520},[518],"- 背景：solid accent (#00ff88)\n- 文本：背景色（高对比度）\n- 使用 .cyber-glitch 类实现色差效果\n- 悬停：亮度增加（filter: brightness(1.1)）\n",[147,1194,1192],{"__ignoreMap":523},[18,1196,1198],{"id":1197},"卡片容器","卡片\u002F容器",[22,1200,1201,345],{},[25,1202,1203],{},"默认卡片变体",[515,1205,1208],{"className":1206,"code":1207,"language":520},[518],"- 背景：card (#12121a)\n- 边框：1px solid border (#2a2a3a)\n- Clip-path: 通过 .cyber-chamfer 类实现倒角\n- 过渡：all 300ms 实现平滑交互\n- 悬停：translateY(-1px)，边框变为 accent，霓虹光晕出现（如果 hoverEffect 属性）\n",[147,1209,1207],{"__ignoreMap":523},[22,1211,1212,1215],{},[25,1213,1214],{},"终端变体"," (variant=\"terminal\")：",[515,1217,1220],{"className":1218,"code":1219,"language":520},[518],"- 背景：background (#0a0a0f) 而非 card\n- 边框：1px solid border\n- 自动装饰标题栏带红绿灯点（红\u002F黄\u002F绿）\n- 内容 padding-top 以容纳标题栏\n- Clip-path: 倒角\n- 用于：博客卡片、FAQ 项、某些定价层级\n",[147,1221,1219],{"__ignoreMap":523},[22,1223,1224,1227],{},[25,1225,1226],{},"全息变体"," (variant=\"holographic\")：",[515,1229,1232],{"className":1230,"code":1231,"language":520},[518],"- 背景：muted (#1c1c2e) 30% 不透明度\n- 边框：1px solid accent 30% 不透明度\n- Box-shadow: 霓虹光晕\n- Backdrop-filter: blur 实现玻璃态效果\n- 角落装饰：卡片边缘的 4 个小边框角使用绝对定位\n- 用于：产品详情卡片、hero HUD 面板\n",[147,1233,1231],{"__ignoreMap":523},[18,1235,1236],{"id":1236},"输入框",[515,1238,1241],{"className":1239,"code":1240,"language":520},[518],"- 包装器：相对定位用于前缀图标\n- 前缀：\">\" 符号，强调色，绝对定位左侧\n- 背景：input (#12121a)\n- 边框：1px solid border (#2a2a3a)\n- Clip-path: .cyber-chamfer-sm\n- 文本：monospace，accent 颜色\n- Padding-left: 8（容纳前缀）\n- Placeholder：mutedForeground，样式化为终端提示符\n- 聚焦：边框变为 accent，霓虹光晕阴影，outline 移除\n- 过渡：all 200ms\n",[147,1242,1240],{"__ignoreMap":523},[109,1244],{},[14,1246,1247],{"id":1247},"布局策略",[22,1249,1250,1253,1254,1257],{},[25,1251,1252],{},"最大宽度","：主内容 ",[147,1255,1256],{},"max-w-7xl","，全出血区块内部内容受限",[22,1259,1260,345],{},[25,1261,1262],{},"网格模式",[69,1264,1265,1275,1282],{},[72,1266,1267,1268,1271,1272],{},"特性：",[147,1269,1270],{},"grid-cols-1 md:grid-cols-2 lg:grid-cols-3","，容器带 ",[147,1273,1274],{},"-skew-y-1",[72,1276,1277,1278,1281],{},"定价：",[147,1279,1280],{},"grid-cols-1 md:grid-cols-3","，中间卡片放大",[72,1283,1284,1285,1288],{},"统计：带 ",[147,1286,1287],{},"divide-x divide-border"," 的水平 flex",[22,1290,1291,1294,1295,403,1298,1301],{},[25,1292,1293],{},"间距","：8px 基础网格。宽裕的内边距（区块 ",[147,1296,1297],{},"py-24",[147,1299,1300],{},"py-32","）。密集的内部组件间距。",[22,1303,1304,345],{},[25,1305,1306],{},"不对称要求",[69,1308,1309,1312,1315,1326],{},[72,1310,1311],{},"Hero：最小 60\u002F40 分割",[72,1313,1314],{},"至少一个区块有重叠元素（负边距）",[72,1316,1317,1318,1321,1322,1325],{},"区块容器使用 ",[147,1319,1320],{},"rotate-1"," 或 ",[147,1323,1324],{},"skew-y-1"," 变换",[72,1327,1328],{},"内容允许时网格中交错卡片高度",[109,1330],{},[14,1332,1334],{"id":1333},"非通用性大胆因素","非通用性（大胆因素）",[22,1336,1337,345],{},[25,1338,1339],{},"强制大胆选择",[1341,1342,1343,1353,1359,1365,1371,1376,1392,1398],"ol",{},[72,1344,1345,1348,1349,1352],{},[25,1346,1347],{},"故障标题","：Hero h1 必须有",[25,1350,1351],{},"色差文本阴影","和偶尔\"故障\"的 CSS 动画（随机倾斜\u002F位移闪烁）",[72,1354,1355,1358],{},[25,1356,1357],{},"扫描线覆盖层","：整个页面有微妙的扫描线覆盖层（通过 body 或 main 上的 ::after）",[72,1360,1361,1364],{},[25,1362,1363],{},"终端美学","：至少一个区块必须感觉像终端（等宽、> 前缀、闪烁光标动画）",[72,1366,1367,1370],{},[25,1368,1369],{},"真正发光的霓虹边框","：不仅仅是彩色边框 - 堆叠的 box-shadows 创造真正的光晕效果",[72,1372,1373,1375],{},[25,1374,100],{},"：卡片使用 clip-path 实现倒角\u002F切割角，而非圆角",[72,1377,1378,345,1381],{},[25,1379,1380],{},"动画元素",[69,1382,1383,1386,1389],{},[72,1384,1385],{},"闪烁光标（animation: blink 1s step-end infinite）",[72,1387,1388],{},"微妙的悬停故障效果",[72,1390,1391],{},"渐变边框动画（色相旋转）",[72,1393,1394,1397],{},[25,1395,1396],{},"电路\u002F网格背景","：至少一个区块背景中可见科技图案",[72,1399,1400,1403],{},[25,1401,1402],{},"打字\u002F打字机效果","：考虑在副标题上或至少样式为正在输入中（尾随光标）",[109,1405],{},[14,1407,1408],{"id":1408},"效果与动画",[22,1410,1411,1414],{},[25,1412,1413],{},"运动感觉","：锐利、数字化、略带机械感。快速弹跳而非平滑缓动。",[22,1416,1417,345],{},[25,1418,1419],{},"过渡",[515,1421,1423],{"className":545,"code":1422,"language":547,"meta":523,"style":523},"transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n\u002F* 或更数字化的感觉： *\u002F\ntransition: all 100ms steps(4);\n",[147,1424,1425,1451,1456],{"__ignoreMap":523},[551,1426,1427,1430,1433,1435,1437,1439,1441,1444,1446,1449],{"class":553,"line":554},[551,1428,1429],{"class":561},"transition: all 150ms cubic-bezier(0",[551,1431,1432],{"class":842},".4",[551,1434,572],{"class":571},[551,1436,839],{"class":561},[551,1438,572],{"class":571},[551,1440,839],{"class":561},[551,1442,1443],{"class":842},".2",[551,1445,572],{"class":571},[551,1447,1448],{"class":561}," 1",[551,1450,646],{"class":571},[551,1452,1453],{"class":553,"line":565},[551,1454,1455],{"class":581},"\u002F* 或更数字化的感觉： *\u002F\n",[551,1457,1458,1461],{"class":553,"line":585},[551,1459,1460],{"class":561},"transition: all 100ms steps(4",[551,1462,646],{"class":571},[22,1464,1465,345],{},[25,1466,1467],{},"关键帧动画",[515,1469,1471],{"className":545,"code":1470,"language":547,"meta":523,"style":523},"\u002F* 闪烁光标 *\u002F\n@keyframes blink {\n  50% { opacity: 0; }\n}\n\n\u002F* 故障效果 *\u002F\n@keyframes glitch {\n  0%, 100% { transform: translate(0); }\n  20% { transform: translate(-2px, 2px); }\n  40% { transform: translate(2px, -2px); }\n  60% { transform: translate(-1px, -1px); }\n  80% { transform: translate(1px, 1px); }\n}\n\n\u002F* 扫描线滚动 *\u002F\n@keyframes scanline {\n  0% { transform: translateY(-100%); }\n  100% { transform: translateY(100vh); }\n}\n\n\u002F* RGB 偏移\u002F色差脉冲 *\u002F\n@keyframes rgbShift {\n  0%, 100% { text-shadow: -2px 0 #ff00ff, 2px 0 #00d4ff; }\n  50% { text-shadow: 2px 0 #ff00ff, -2px 0 #00d4ff; }\n}\n",[147,1472,1473,1478,1490,1501,1506,1510,1515,1524,1541,1564,1585,1607,1629,1633,1637,1643,1653,1672,1690,1695,1700,1706,1716,1744,1770],{"__ignoreMap":523},[551,1474,1475],{"class":553,"line":554},[551,1476,1477],{"class":581},"\u002F* 闪烁光标 *\u002F\n",[551,1479,1480,1483,1487],{"class":553,"line":565},[551,1481,1482],{"class":561},"@keyframes",[551,1484,1486],{"class":1485},"s_ZVi"," blink",[551,1488,1489],{"class":571}," {\n",[551,1491,1492,1495,1498],{"class":553,"line":585},[551,1493,1494],{"class":571},"  50% { opacity: ",[551,1496,1497],{"class":842},"0",[551,1499,1500],{"class":571},"; }\n",[551,1502,1503],{"class":553,"line":603},[551,1504,1505],{"class":571},"}\n",[551,1507,1508],{"class":553,"line":623},[551,1509,689],{"emptyLinePlaceholder":688},[551,1511,1512],{"class":553,"line":643},[551,1513,1514],{"class":581},"\u002F* 故障效果 *\u002F\n",[551,1516,1517,1519,1522],{"class":553,"line":718},[551,1518,1482],{"class":561},[551,1520,1521],{"class":1485}," glitch",[551,1523,1489],{"class":571},[551,1525,1526,1529,1533,1536,1538],{"class":553,"line":724},[551,1527,1528],{"class":571},"  0%, 100% { transform: ",[551,1530,1532],{"class":1531},"sjrmR","translate",[551,1534,1535],{"class":571},"(",[551,1537,1497],{"class":842},[551,1539,1540],{"class":571},"); }\n",[551,1542,1543,1546,1548,1550,1553,1555,1557,1560,1562],{"class":553,"line":749},[551,1544,1545],{"class":571},"  20% { transform: ",[551,1547,1532],{"class":1531},[551,1549,1535],{"class":571},[551,1551,1552],{"class":842},"-2",[551,1554,594],{"class":557},[551,1556,417],{"class":571},[551,1558,1559],{"class":842},"2",[551,1561,594],{"class":557},[551,1563,1540],{"class":571},[551,1565,1566,1569,1571,1573,1575,1577,1579,1581,1583],{"class":553,"line":754},[551,1567,1568],{"class":571},"  40% { transform: ",[551,1570,1532],{"class":1531},[551,1572,1535],{"class":571},[551,1574,1559],{"class":842},[551,1576,594],{"class":557},[551,1578,417],{"class":571},[551,1580,1552],{"class":842},[551,1582,594],{"class":557},[551,1584,1540],{"class":571},[551,1586,1587,1590,1592,1594,1597,1599,1601,1603,1605],{"class":553,"line":760},[551,1588,1589],{"class":571},"  60% { transform: ",[551,1591,1532],{"class":1531},[551,1593,1535],{"class":571},[551,1595,1596],{"class":842},"-1",[551,1598,594],{"class":557},[551,1600,417],{"class":571},[551,1602,1596],{"class":842},[551,1604,594],{"class":557},[551,1606,1540],{"class":571},[551,1608,1609,1612,1614,1616,1619,1621,1623,1625,1627],{"class":553,"line":776},[551,1610,1611],{"class":571},"  80% { transform: ",[551,1613,1532],{"class":1531},[551,1615,1535],{"class":571},[551,1617,1618],{"class":842},"1",[551,1620,594],{"class":557},[551,1622,417],{"class":571},[551,1624,1618],{"class":842},[551,1626,594],{"class":557},[551,1628,1540],{"class":571},[551,1630,1631],{"class":553,"line":781},[551,1632,1505],{"class":571},[551,1634,1635],{"class":553,"line":787},[551,1636,689],{"emptyLinePlaceholder":688},[551,1638,1640],{"class":553,"line":1639},15,[551,1641,1642],{"class":581},"\u002F* 扫描线滚动 *\u002F\n",[551,1644,1646,1648,1651],{"class":553,"line":1645},16,[551,1647,1482],{"class":561},[551,1649,1650],{"class":1485}," scanline",[551,1652,1489],{"class":571},[551,1654,1656,1659,1662,1664,1667,1670],{"class":553,"line":1655},17,[551,1657,1658],{"class":571},"  0% { transform: ",[551,1660,1661],{"class":1531},"translateY",[551,1663,1535],{"class":571},[551,1665,1666],{"class":842},"-100",[551,1668,1669],{"class":557},"%",[551,1671,1540],{"class":571},[551,1673,1675,1678,1680,1682,1685,1688],{"class":553,"line":1674},18,[551,1676,1677],{"class":571},"  100% { transform: ",[551,1679,1661],{"class":1531},[551,1681,1535],{"class":571},[551,1683,1684],{"class":842},"100",[551,1686,1687],{"class":557},"vh",[551,1689,1540],{"class":571},[551,1691,1693],{"class":553,"line":1692},19,[551,1694,1505],{"class":571},[551,1696,1698],{"class":553,"line":1697},20,[551,1699,689],{"emptyLinePlaceholder":688},[551,1701,1703],{"class":553,"line":1702},21,[551,1704,1705],{"class":581},"\u002F* RGB 偏移\u002F色差脉冲 *\u002F\n",[551,1707,1709,1711,1714],{"class":553,"line":1708},22,[551,1710,1482],{"class":561},[551,1712,1713],{"class":1485}," rgbShift",[551,1715,1489],{"class":571},[551,1717,1719,1722,1724,1726,1728,1731,1733,1735,1737,1739,1742],{"class":553,"line":1718},23,[551,1720,1721],{"class":571},"  0%, 100% { text-shadow: ",[551,1723,1552],{"class":842},[551,1725,594],{"class":557},[551,1727,839],{"class":842},[551,1729,1730],{"class":842}," #ff00ff",[551,1732,417],{"class":571},[551,1734,1559],{"class":842},[551,1736,594],{"class":557},[551,1738,839],{"class":842},[551,1740,1741],{"class":842}," #00d4ff",[551,1743,1500],{"class":571},[551,1745,1747,1750,1752,1754,1756,1758,1760,1762,1764,1766,1768],{"class":553,"line":1746},24,[551,1748,1749],{"class":571},"  50% { text-shadow: ",[551,1751,1559],{"class":842},[551,1753,594],{"class":557},[551,1755,839],{"class":842},[551,1757,1730],{"class":842},[551,1759,417],{"class":571},[551,1761,1552],{"class":842},[551,1763,594],{"class":557},[551,1765,839],{"class":842},[551,1767,1741],{"class":842},[551,1769,1500],{"class":571},[551,1771,1773],{"class":553,"line":1772},25,[551,1774,1505],{"class":571},[109,1776],{},[14,1778,1779],{"id":1779},"图标",[22,1781,1782,345],{},[25,1783,1784],{},"Lucide 图标配置",[69,1786,1787,1794,1803,1806],{},[72,1788,1789,1790,1793],{},"描边宽度：",[147,1791,1792],{},"1.5px","（细、技术感）",[72,1795,1796,1797,1321,1800],{},"大小：通常 ",[147,1798,1799],{},"h-5 w-5",[147,1801,1802],{},"h-6 w-6",[72,1804,1805],{},"颜色：继承文本（通常是 accent 或 foreground）",[72,1807,1808,1809,1812],{},"样式：悬停时通过 filter: ",[147,1810,1811],{},"drop-shadow(0 0 4px currentColor)"," 添加微妙光晕",[22,1814,1815,1818],{},[25,1816,1817],{},"图标容器","：将图标放置在带光晕效果的边框正方形\u002F六边形内",[109,1820],{},[14,1822,1823],{"id":1823},"响应式策略",[22,1825,1826,1829],{},[25,1827,1828],{},"移动端适配","（移动优先）：",[22,1831,1832,345],{},[25,1833,1834],{},"排版缩放",[69,1836,1837,1840,1843,1846],{},[72,1838,1839],{},"Hero h1：text-5xl（移动端）→ text-7xl（md）→ text-8xl（lg）",[72,1841,1842],{},"副标题：text-base → text-lg → text-xl",[72,1844,1845],{},"区块标题：text-4xl → text-5xl",[72,1847,1848],{},"所有尺寸保持 uppercase 和 tracking",[22,1850,1851,345],{},[25,1852,1853],{},"布局变化",[69,1855,1856,1859,1862,1865,1868,1871],{},[72,1857,1858],{},"导航：\u003C lg 隐藏导航链接，\u003C sm 显示缩写 CTA 文本",[72,1860,1861],{},"统计：前 2 项仅顶部边框（移动端）→ 4 列垂直边框（桌面端）",[72,1863,1864],{},"所有特性\u002F博客\u002F推荐网格：单列 → 2 列（md）→ 3 列（lg）",[72,1866,1867],{},"定价：垂直堆叠 → 3 列网格，高亮卡片仅在 md+ 上缩放",[72,1869,1870],{},"Hero HUD：移动端隐藏（lg:block）",[72,1872,1873],{},"页脚：堆叠为单列 → 4 列网格",[22,1875,1876,345],{},[25,1877,1878],{},"保持元素",[69,1880,1881,1884,1887,1890,1893,1896,1899],{},[72,1882,1883],{},"扫描线覆盖层（整页）",[72,1885,1886],{},"所有卡片的倒角",[72,1888,1889],{},"霓虹光晕效果（移动端可降低强度以提升性能）",[72,1891,1892],{},"网格\u002F电路背景",[72,1894,1895],{},"等宽排版",[72,1897,1898],{},"终端美学（>、$、前缀）",[72,1900,1901],{},"深色配色方案",[22,1903,1904,345],{},[25,1905,1906],{},"触控目标",[69,1908,1909,1912,1915],{},[72,1910,1911],{},"所有交互元素最小 44px 高度",[72,1913,1914],{},"可点击项之间充足间距",[72,1916,1917],{},"FAQ 手风琴全宽点击区域",[109,1919],{},[14,1921,1922],{"id":1922},"无障碍",[22,1924,1925,1928],{},[25,1926,1927],{},"对比度","：所有文本满足 WCAG AA（暗背景上的 accent 绿 = 7.5:1 比例 - 优秀）",[22,1930,1931,345],{},[25,1932,1933],{},"聚焦状态",[515,1935,1937],{"className":545,"code":1936,"language":547,"meta":523,"style":523},"focus-visible:outline-none\nfocus-visible:ring-2\nfocus-visible:ring-accent\nfocus-visible:ring-offset-2\nfocus-visible:ring-offset-background\n",[147,1938,1939,1950,1959,1968,1977],{"__ignoreMap":523},[551,1940,1941,1944,1947],{"class":553,"line":554},[551,1942,1943],{"class":557},"focus-visible",[551,1945,1946],{"class":561},":",[551,1948,1949],{"class":557},"outline-none\n",[551,1951,1952,1954,1956],{"class":553,"line":565},[551,1953,1943],{"class":557},[551,1955,1946],{"class":561},[551,1957,1958],{"class":557},"ring-2\n",[551,1960,1961,1963,1965],{"class":553,"line":585},[551,1962,1943],{"class":557},[551,1964,1946],{"class":561},[551,1966,1967],{"class":557},"ring-accent\n",[551,1969,1970,1972,1974],{"class":553,"line":603},[551,1971,1943],{"class":557},[551,1973,1946],{"class":561},[551,1975,1976],{"class":557},"ring-offset-2\n",[551,1978,1979,1981,1983],{"class":553,"line":623},[551,1980,1943],{"class":557},[551,1982,1946],{"class":561},[551,1984,1985],{"class":557},"ring-offset-background\n",[22,1987,1988],{},"外加匹配霓虹美学的光晕效果。",[22,1990,1991,1994,1995,1998],{},[25,1992,1993],{},"减少动画","：尊重 ",[147,1996,1997],{},"prefers-reduced-motion"," - 禁用故障动画，保留静态色差",[109,2000],{},[14,2002,2003],{"id":2003},"实现注意事项",[69,2005,2006,2013,2016,2019,2022,2025],{},[72,2007,2008,2009,2012],{},"大量使用 Tailwind 任意值 ",[147,2010,2011],{},"[...]"," 自定义阴影和 clip-path",[72,2014,2015],{},"颜色使用 CSS 变量便于主题切换",[72,2017,2018],{},"扫描线通过 CSS 实现，非图片",[72,2020,2021],{},"故障动画应微妙且不频繁（不分散注意力）",[72,2023,2024],{},"在不同屏幕上测试光晕效果（在低对比度显示器上可能看起来褪色）",[72,2026,2027,2028],{},"考虑多 box-shadow 的 GPU 性能 - 谨慎使用 ",[147,2029,2030],{},"will-change: transform",[2032,2033,2034],"style",{},"html pre.shiki code .sVyAn, html code.shiki .sVyAn{--shiki-default:#E06C75}html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sV9Aq, html code.shiki .sV9Aq{--shiki-default:#7F848E;--shiki-default-font-style:italic}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 pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}html pre.shiki code .s_ZVi, html code.shiki .s_ZVi{--shiki-default:#E06C75;--shiki-default-font-style:italic}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}",{"title":523,"searchDepth":585,"depth":585,"links":2036},[2037,2043,2050,2055,2056,2057,2058,2059,2060,2061],{"id":16,"depth":565,"text":16,"children":2038},[2039,2040,2041,2042],{"id":20,"depth":585,"text":20},{"id":31,"depth":585,"text":31},{"id":42,"depth":585,"text":42},{"id":67,"depth":585,"text":67},{"id":113,"depth":565,"text":114,"children":2044},[2045,2046,2047,2048,2049],{"id":117,"depth":585,"text":118},{"id":332,"depth":585,"text":332},{"id":513,"depth":585,"text":513},{"id":649,"depth":585,"text":649},{"id":903,"depth":585,"text":904},{"id":1115,"depth":565,"text":1115,"children":2051},[2052,2053,2054],{"id":1118,"depth":585,"text":1118},{"id":1197,"depth":585,"text":1198},{"id":1236,"depth":585,"text":1236},{"id":1247,"depth":565,"text":1247},{"id":1333,"depth":565,"text":1334},{"id":1408,"depth":565,"text":1408},{"id":1779,"depth":565,"text":1779},{"id":1823,"depth":565,"text":1823},{"id":1922,"depth":565,"text":1922},{"id":2003,"depth":565,"text":2003},"2026-04-15","高对比度的霓虹灯效果搭配黑色背景，故障动画，终端\u002F等宽字体，以科技为主题的装饰。一种受 80 年代科幻和黑客文化启发的反乌托邦数字美学。","md",{},"\u002Fblogs\u002Fcyberpunk-design-system",{"title":5,"description":2063},"blogs\u002Fcyberpunk-design-system",[2070,2071,2072],"UI设计","提示词","赛博朋克","f2ID-BNx7dpjfQwxZBUK1mF9eVKUL3JiZ1v5RfC_Kwg",1780651451850]