[{"data":1,"prerenderedAt":990},["ShallowReactive",2],{"doc-page:\u002Fdocs\u002Fdesign-resources":3},{"doc":4,"prev":949,"next":956,"resolvedType":8,"readingMinutes":266,"audience":963,"checklist":967,"related":971},{"path":5,"title":6,"description":7,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":12,"publishedAt":12,"icon":13,"body":14},"\u002Fdocs\u002Fdesign-resources","设计资源与工具","配色工具、UI 组件库、设计灵感、免费素材与原型工具","article",null,"online-tools","在线工具","2026-02-28","i-carbon-tool-box",{"type":15,"value":16,"toc":924},"minimark",[17,20,24,28,107,110,113,204,209,317,321,325,397,401,449,452,522,525,528,585,588,648,651,708,712,784,787,790,805,808,811,815,818,829,832,836,839,850,854,857,868,871,891,894,920],[18,19,6],"h1",{"id":6},[21,22,23],"p",{},"这页适合作为“设计与前端视觉工作流的资源导航”。重点不是把工具全收藏一遍，而是按任务选择：你现在是要找配色、找组件、找灵感、找素材，还是直接做原型。",[25,26,27],"h2",{"id":27},"先按任务选",[29,30,31,50,65,79,93],"ul",{},[32,33,34,38,39,43,44,43,47],"li",{},[35,36,37],"strong",{},"要快速做出一套顺眼配色","：先看 ",[40,41,42],"code",{},"Realtime Colors","、",[40,45,46],{},"Coolors",[40,48,49],{},"Happy Hues",[32,51,52,55,56,43,59,43,62],{},[35,53,54],{},"要找现成组件和设计系统","：优先 ",[40,57,58],{},"Radix",[40,60,61],{},"shadcn",[40,63,64],{},"Nuxt UI",[32,66,67,55,70,43,73,43,76],{},[35,68,69],{},"要找灵感和参考案例",[40,71,72],{},"Mobbin",[40,74,75],{},"Godly",[40,77,78],{},"Awwwards",[32,80,81,55,84,43,87,43,90],{},[35,82,83],{},"要找免版权素材",[40,85,86],{},"Unsplash",[40,88,89],{},"Pexels",[40,91,92],{},"unDraw",[32,94,95,55,98,43,101,43,104],{},[35,96,97],{},"要做协作原型或线框图",[40,99,100],{},"Figma",[40,102,103],{},"Penpot",[40,105,106],{},"Excalidraw",[21,108,109],{},"先明确任务，再选工具，效率会高很多。",[25,111,112],{"id":112},"配色",[114,115,116,129],"table",{},[117,118,119],"thead",{},[120,121,122,126],"tr",{},[123,124,125],"th",{},"工具",[123,127,128],{},"说明",[130,131,132,146,157,168,180,192],"tbody",{},[120,133,134,143],{},[135,136,137],"td",{},[138,139,42],"a",{"href":140,"rel":141},"https:\u002F\u002Fwww.realtimecolors.com\u002F",[142],"nofollow",[135,144,145],{},"实时预览网站配色",[120,147,148,154],{},[135,149,150],{},[138,151,46],{"href":152,"rel":153},"https:\u002F\u002Fcoolors.co\u002F",[142],[135,155,156],{},"配色方案生成器",[120,158,159,165],{},[135,160,161],{},[138,162,49],{"href":163,"rel":164},"https:\u002F\u002Fwww.happyhues.co\u002F",[142],[135,166,167],{},"配色灵感与预览",[120,169,170,177],{},[135,171,172],{},[138,173,176],{"href":174,"rel":175},"https:\u002F\u002Fcolorhunt.co\u002F",[142],"ColorHunt",[135,178,179],{},"配色方案集合",[120,181,182,189],{},[135,183,184],{},[138,185,188],{"href":186,"rel":187},"https:\u002F\u002Fwww.radix-ui.com\u002Fcolors",[142],"Radix Colors",[135,190,191],{},"无障碍配色系统",[120,193,194,201],{},[135,195,196],{},[138,197,200],{"href":198,"rel":199},"https:\u002F\u002Fyeun.github.io\u002Fopen-color\u002F",[142],"Open Color",[135,202,203],{},"开源配色方案",[205,206,208],"h3",{"id":207},"css-变量配色","CSS 变量配色",[210,211,216],"pre",{"className":212,"code":213,"language":214,"meta":215,"style":215},"language-css shiki shiki-themes github-light github-dark",":root {\n  --primary: oklch(65% 0.15 250);\n  --primary-light: oklch(80% 0.1 250);\n  --primary-dark: oklch(45% 0.15 250);\n}\n","css","",[40,217,218,231,264,288,311],{"__ignoreMap":215},[219,220,223,227],"span",{"class":221,"line":222},"line",1,[219,224,226],{"class":225},"sScJk",":root",[219,228,230],{"class":229},"sVt8B"," {\n",[219,232,234,238,241,245,248,251,255,258,261],{"class":221,"line":233},2,[219,235,237],{"class":236},"s4XuR","  --primary",[219,239,240],{"class":229},": ",[219,242,244],{"class":243},"sj4cs","oklch",[219,246,247],{"class":229},"(",[219,249,250],{"class":243},"65",[219,252,254],{"class":253},"szBVR","%",[219,256,257],{"class":243}," 0.15",[219,259,260],{"class":243}," 250",[219,262,263],{"class":229},");\n",[219,265,267,270,272,274,276,279,281,284,286],{"class":221,"line":266},3,[219,268,269],{"class":236},"  --primary-light",[219,271,240],{"class":229},[219,273,244],{"class":243},[219,275,247],{"class":229},[219,277,278],{"class":243},"80",[219,280,254],{"class":253},[219,282,283],{"class":243}," 0.1",[219,285,260],{"class":243},[219,287,263],{"class":229},[219,289,291,294,296,298,300,303,305,307,309],{"class":221,"line":290},4,[219,292,293],{"class":236},"  --primary-dark",[219,295,240],{"class":229},[219,297,244],{"class":243},[219,299,247],{"class":229},[219,301,302],{"class":243},"45",[219,304,254],{"class":253},[219,306,257],{"class":243},[219,308,260],{"class":243},[219,310,263],{"class":229},[219,312,314],{"class":221,"line":313},5,[219,315,316],{"class":229},"}\n",[25,318,320],{"id":319},"ui-组件库","UI 组件库",[205,322,324],{"id":323},"vue","Vue",[114,326,327,336],{},[117,328,329],{},[120,330,331,334],{},[123,332,333],{},"库",[123,335,128],{},[130,337,338,350,362,373,385],{},[120,339,340,347],{},[135,341,342],{},[138,343,346],{"href":344,"rel":345},"https:\u002F\u002Fwww.radix-vue.com\u002F",[142],"Radix Vue",[135,348,349],{},"无样式，无障碍",[120,351,352,359],{},[135,353,354],{},[138,355,358],{"href":356,"rel":357},"https:\u002F\u002Fwww.shadcn-vue.com\u002F",[142],"Shadcn Vue",[135,360,361],{},"可复制的组件",[120,363,364,370],{},[135,365,366],{},[138,367,64],{"href":368,"rel":369},"https:\u002F\u002Fui.nuxt.com\u002F",[142],[135,371,372],{},"Nuxt 官方 UI",[120,374,375,382],{},[135,376,377],{},[138,378,381],{"href":379,"rel":380},"https:\u002F\u002Fprimevue.org\u002F",[142],"PrimeVue",[135,383,384],{},"功能丰富",[120,386,387,394],{},[135,388,389],{},[138,390,393],{"href":391,"rel":392},"https:\u002F\u002Felement-plus.org\u002F",[142],"Element Plus",[135,395,396],{},"企业级",[205,398,400],{"id":399},"react","React",[114,402,403,411],{},[117,404,405],{},[120,406,407,409],{},[123,408,333],{},[123,410,128],{},[130,412,413,425,437],{},[120,414,415,422],{},[135,416,417],{},[138,418,421],{"href":419,"rel":420},"https:\u002F\u002Fui.shadcn.com\u002F",[142],"shadcn\u002Fui",[135,423,424],{},"最流行，可复制",[120,426,427,434],{},[135,428,429],{},[138,430,433],{"href":431,"rel":432},"https:\u002F\u002Fwww.radix-ui.com\u002F",[142],"Radix UI",[135,435,436],{},"无样式原语",[120,438,439,446],{},[135,440,441],{},[138,442,445],{"href":443,"rel":444},"https:\u002F\u002Fark-ui.com\u002F",[142],"Ark UI",[135,447,448],{},"跨框架",[25,450,451],{"id":451},"设计灵感",[114,453,454,463],{},[117,455,456],{},[120,457,458,461],{},[123,459,460],{},"网站",[123,462,128],{},[130,464,465,477,488,499,510],{},[120,466,467,474],{},[135,468,469],{},[138,470,473],{"href":471,"rel":472},"https:\u002F\u002Fdribbble.com\u002F",[142],"Dribbble",[135,475,476],{},"设计作品展示",[120,478,479,485],{},[135,480,481],{},[138,482,72],{"href":483,"rel":484},"https:\u002F\u002Fmobbin.com\u002F",[142],[135,486,487],{},"移动端 UI 参考",[120,489,490,496],{},[135,491,492],{},[138,493,75],{"href":494,"rel":495},"https:\u002F\u002Fgodly.website\u002F",[142],[135,497,498],{},"优秀网站集合",[120,500,501,507],{},[135,502,503],{},[138,504,78],{"href":505,"rel":506},"https:\u002F\u002Fwww.awwwards.com\u002F",[142],[135,508,509],{},"获奖网站",[120,511,512,519],{},[135,513,514],{},[138,515,518],{"href":516,"rel":517},"https:\u002F\u002Fwww.darkmodedesign.com\u002F",[142],"Dark Mode Design",[135,520,521],{},"暗色模式参考",[25,523,524],{"id":524},"免费素材",[205,526,527],{"id":527},"图片",[114,529,530,538],{},[117,531,532],{},[120,533,534,536],{},[123,535,460],{},[123,537,128],{},[130,539,540,551,562,573],{},[120,541,542,548],{},[135,543,544],{},[138,545,86],{"href":546,"rel":547},"https:\u002F\u002Funsplash.com\u002F",[142],[135,549,550],{},"高质量免费照片",[120,552,553,559],{},[135,554,555],{},[138,556,89],{"href":557,"rel":558},"https:\u002F\u002Fwww.pexels.com\u002F",[142],[135,560,561],{},"免费照片和视频",[120,563,564,570],{},[135,565,566],{},[138,567,92],{"href":568,"rel":569},"https:\u002F\u002Fundraw.co\u002F",[142],[135,571,572],{},"开源 SVG 插画",[120,574,575,582],{},[135,576,577],{},[138,578,581],{"href":579,"rel":580},"https:\u002F\u002Fstoryset.com\u002F",[142],"Storyset",[135,583,584],{},"可定制插画",[205,586,587],{"id":587},"背景与纹理",[114,589,590,598],{},[117,591,592],{},[120,593,594,596],{},[123,595,125],{},[123,597,128],{},[130,599,600,612,624,636],{},[120,601,602,609],{},[135,603,604],{},[138,605,608],{"href":606,"rel":607},"https:\u002F\u002Fwww.svgbackgrounds.com\u002F",[142],"SVG Backgrounds",[135,610,611],{},"SVG 背景生成",[120,613,614,621],{},[135,615,616],{},[138,617,620],{"href":618,"rel":619},"https:\u002F\u002Fhaikei.app\u002F",[142],"Haikei",[135,622,623],{},"SVG 形状生成",[120,625,626,633],{},[135,627,628],{},[138,629,632],{"href":630,"rel":631},"https:\u002F\u002Fpattern.monster\u002F",[142],"Pattern Monster",[135,634,635],{},"图案生成器",[120,637,638,645],{},[135,639,640],{},[138,641,644],{"href":642,"rel":643},"https:\u002F\u002Fmeshgradient.in\u002F",[142],"Mesh Gradient",[135,646,647],{},"网格渐变生成",[25,649,650],{"id":650},"原型与设计工具",[114,652,653,661],{},[117,654,655],{},[120,656,657,659],{},[123,658,125],{},[123,660,128],{},[130,662,663,674,685,696],{},[120,664,665,671],{},[135,666,667],{},[138,668,100],{"href":669,"rel":670},"https:\u002F\u002Fwww.figma.com\u002F",[142],[135,672,673],{},"协作设计工具",[120,675,676,682],{},[135,677,678],{},[138,679,103],{"href":680,"rel":681},"https:\u002F\u002Fpenpot.app\u002F",[142],[135,683,684],{},"开源设计工具",[120,686,687,693],{},[135,688,689],{},[138,690,106],{"href":691,"rel":692},"https:\u002F\u002Fexcalidraw.com\u002F",[142],[135,694,695],{},"手绘风格白板",[120,697,698,705],{},[135,699,700],{},[138,701,704],{"href":702,"rel":703},"https:\u002F\u002Fwww.tldraw.com\u002F",[142],"tldraw",[135,706,707],{},"在线白板",[25,709,711],{"id":710},"css-工具","CSS 工具",[114,713,714,722],{},[117,715,716],{},[120,717,718,720],{},[123,719,125],{},[123,721,128],{},[130,723,724,736,748,760,772],{},[120,725,726,733],{},[135,727,728],{},[138,729,732],{"href":730,"rel":731},"https:\u002F\u002Fcssgrid-generator.netlify.app\u002F",[142],"CSS Grid Generator",[135,734,735],{},"Grid 布局生成",[120,737,738,745],{},[135,739,740],{},[138,741,744],{"href":742,"rel":743},"https:\u002F\u002Fflexboxfroggy.com\u002F",[142],"Flexbox Froggy",[135,746,747],{},"Flexbox 学习游戏",[120,749,750,757],{},[135,751,752],{},[138,753,756],{"href":754,"rel":755},"https:\u002F\u002Fanimista.net\u002F",[142],"Animista",[135,758,759],{},"CSS 动画生成",[120,761,762,769],{},[135,763,764],{},[138,765,768],{"href":766,"rel":767},"https:\u002F\u002Fneumorphism.io\u002F",[142],"Neumorphism",[135,770,771],{},"新拟态生成器",[120,773,774,781],{},[135,775,776],{},[138,777,780],{"href":778,"rel":779},"https:\u002F\u002Fhype4.academy\u002Ftools\u002Fglassmorphism-generator",[142],"Glassmorphism",[135,782,783],{},"毛玻璃生成",[25,785,786],{"id":786},"推荐使用顺序",[21,788,789],{},"如果你是在做一个新的页面或产品，比较顺的流程通常是：",[791,792,793,796,799,802],"ol",{},[32,794,795],{},"先找参考和信息架构方向",[32,797,798],{},"再确定配色和视觉基调",[32,800,801],{},"选择合适的组件体系",[32,803,804],{},"最后再补插画、背景、动效和细节质感",[21,806,807],{},"不要一开始就先堆炫酷效果。大多数页面质量问题，更多来自层级、留白、对比度和一致性，而不是“没加毛玻璃”。",[25,809,810],{"id":810},"常见问题",[205,812,814],{"id":813},"收藏很多真正落地很少","收藏很多，真正落地很少",[21,816,817],{},"建议给资源分成几类：",[29,819,820,823,826],{},[32,821,822],{},"常用主力工具",[32,824,825],{},"备用参考网站",[32,827,828],{},"偶尔启发型资源",[21,830,831],{},"不然收藏夹会越来越长，但实际工作时还是找不到最顺手的那几个。",[205,833,835],{"id":834},"参考过多成品反而不统一","参考过多，成品反而不统一",[21,837,838],{},"灵感网站适合看方向，不适合把多个风格直接拼起来。一个页面最好尽量保持：",[29,840,841,844,847],{},[32,842,843],{},"统一色彩语言",[32,845,846],{},"统一圆角、阴影、边框逻辑",[32,848,849],{},"统一组件交互节奏",[205,851,853],{"id":852},"素材虽免费但使用边界不清楚","素材虽免费，但使用边界不清楚",[21,855,856],{},"即使是免费素材，也要看清：",[29,858,859,862,865],{},[32,860,861],{},"是否允许商用",[32,863,864],{},"是否要求署名",[32,866,867],{},"是否允许再分发",[25,869,870],{"id":870},"延伸阅读",[29,872,873,879,885],{},[32,874,875],{},[138,876,878],{"href":877},"\u002Fdocs\u002Fvscode-setup","VS Code 配置指南",[32,880,881],{},[138,882,884],{"href":883},"\u002Fdocs\u002Fnuxt-vue-notes","Vue 3 \u002F Nuxt 开发笔记",[32,886,887],{},[138,888,890],{"href":889},"\u002Fdocs\u002Fimage-video-processing","图片与视频处理",[25,892,893],{"id":893},"参考链接",[29,895,896,904,912],{},[32,897,898,903],{},[138,899,902],{"href":900,"rel":901},"https:\u002F\u002Fwww.figma.com\u002Fcommunity",[142],"Figma Community"," — 免费模板",[32,905,906,911],{},[138,907,910],{"href":908,"rel":909},"https:\u002F\u002Fdesignsystemsrepo.com\u002F",[142],"Design Systems"," — 设计系统集合",[32,913,914,919],{},[138,915,918],{"href":916,"rel":917},"https:\u002F\u002Fwww.checklist.design\u002F",[142],"Checklist Design"," — UI 设计检查清单",[921,922,923],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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":215,"searchDepth":233,"depth":233,"links":925},[926,927,930,934,935,939,940,941,942,947,948],{"id":27,"depth":233,"text":27},{"id":112,"depth":233,"text":112,"children":928},[929],{"id":207,"depth":266,"text":208},{"id":319,"depth":233,"text":320,"children":931},[932,933],{"id":323,"depth":266,"text":324},{"id":399,"depth":266,"text":400},{"id":451,"depth":233,"text":451},{"id":524,"depth":233,"text":524,"children":936},[937,938],{"id":527,"depth":266,"text":527},{"id":587,"depth":266,"text":587},{"id":650,"depth":233,"text":650},{"id":710,"depth":233,"text":711},{"id":786,"depth":233,"text":786},{"id":810,"depth":233,"text":810,"children":943},[944,945,946],{"id":813,"depth":266,"text":814},{"id":834,"depth":266,"text":835},{"id":852,"depth":266,"text":853},{"id":870,"depth":233,"text":870},{"id":893,"depth":233,"text":893},{"path":950,"title":951,"description":952,"docType":8,"resourceKind":9,"categoryId":953,"categoryLabel":954,"updatedAt":12,"publishedAt":12,"icon":955},"\u002Fdocs\u002Fjapan-media","日本媒体平台","TVer、Nico、ABEMA、SHOWROOM 等日本视频与直播平台及偶像资源","entertainment-resources","娱乐与资源","i-carbon-game-console",{"path":957,"title":958,"description":959,"docType":8,"resourceKind":9,"categoryId":960,"categoryLabel":961,"updatedAt":12,"publishedAt":12,"icon":962},"\u002Fdocs\u002Fnetwork-tools","网络诊断工具","ping、traceroute、nslookup、tcpdump、Wireshark 等网络排查工具","network-security","网络与安全","i-carbon-network-4",[964,965,966],"希望把零散经验整理成长期可复用工作流的人","希望快速筛选在线服务并减少信息噪音的人","希望阅读时顺手建立自己的操作清单或收藏体系的人",[968,969,970],"先浏览标题、摘要和目录，带着问题阅读会更高效","确认要上传的数据是否敏感，并优先使用临时数据做首次验证","如果页面里提到相关文档，尽量一起打开对照，效果通常更完整",[972,977,982,986],{"path":973,"title":974,"description":975,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":976,"publishedAt":976,"icon":13},"\u002Fdocs\u002Fbrowser-extensions","浏览器扩展推荐","开发调试、效率提升、隐私安全与阅读增强场景下的浏览器扩展选择建议","2026-03-10",{"path":978,"title":979,"description":980,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":981,"publishedAt":981,"icon":13},"\u002Fdocs\u002Fweb-scraping","网页抓取与自动化","Puppeteer、Playwright、curl 抓取技巧与反爬应对","2026-02-27",{"path":983,"title":984,"description":985,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":981,"publishedAt":981,"icon":13},"\u002Fdocs\u002Fregex-cheatsheet","正则表达式速查","正则表达式语法速查、常用模式、在线测试工具与各语言示例",{"path":987,"title":988,"description":989,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":981,"publishedAt":981,"icon":13},"\u002Fdocs\u002Ffont-icon-resources","字体与图标资源","开发常用字体、图标库、Web 字体加载优化与自托管方案",1776215712531]