[{"data":1,"prerenderedAt":1121},["ShallowReactive",2],{"guide-frontend-prototyping-workflow":3},{"id":4,"title":5,"body":6,"date":1113,"description":1114,"extension":1115,"meta":1116,"navigation":474,"path":1117,"readingTime":181,"seo":1118,"stem":1119,"__hash__":1120},"guides\u002Fguides\u002Ffrontend-prototyping-workflow.md","Frontend Prototyping Workflow",{"type":7,"value":8,"toc":1092},"minimark",[9,14,18,22,25,32,37,50,54,76,364,373,387,391,398,555,559,567,570,623,627,638,642,645,743,750,754,757,843,851,855,858,900,907,911,914,970,984,988,1018,1022,1025,1035,1039,1059,1063,1066,1088],[10,11,13],"h2",{"id":12},"prototyping-should-be-fast","Prototyping Should Be Fast",[15,16,17],"p",{},"A frontend prototype lets you validate ideas before writing production code. The faster you move from concept to clickable preview, the sooner you get real feedback. This guide walks you through a repeatable five-step workflow — from blank canvas to polished, responsive mockup — using free online tools at every stage.",[10,19,21],{"id":20},"step-1-capture-the-idea","Step 1: Capture the Idea",[15,23,24],{},"Start with a rough mental model. Sketch on paper or jot a bullet list of sections — hero, features, footer. You do not need pixel-perfect wireframes. A 60-second sketch is enough to define layout priorities.",[15,26,27,31],{},[28,29,30],"strong",{},"Key principle:"," Prototype the layout first; decorative details come later. Getting the structure right saves hours of rework.",[33,34,36],"h3",{"id":35},"quick-tips","Quick Tips",[38,39,40,44,47],"ul",{},[41,42,43],"li",{},"List every section top-to-bottom before touching code",[41,45,46],{},"Mark which sections need images, forms, or interactive elements",[41,48,49],{},"Decide mobile vs. desktop priority now — it affects every subsequent step",[10,51,53],{"id":52},"step-2-build-the-html-skeleton","Step 2: Build the HTML Skeleton",[15,55,56,57,61,62,61,65,61,68,71,72,75],{},"Translate your sketch into semantic HTML. Focus on structure, not styling. Use ",[58,59,60],"code",{},"\u003Cheader>",", ",[58,63,64],{},"\u003Cmain>",[58,66,67],{},"\u003Csection>",[58,69,70],{},"\u003Carticle>",", and ",[58,73,74],{},"\u003Cfooter>"," to establish a readable document outline.",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-html shiki shiki-themes github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Prototype\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cheader>\n    \u003Cnav>\u003C!-- Logo + links -->\u003C\u002Fnav>\n  \u003C\u002Fheader>\n  \u003Cmain>\n    \u003Csection class=\"hero\">\u003C!-- Hero content -->\u003C\u002Fsection>\n    \u003Csection class=\"features\">\u003C!-- Feature cards -->\u003C\u002Fsection>\n  \u003C\u002Fmain>\n  \u003Cfooter>\u003C!-- Footer links -->\u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[58,84,85,105,125,135,154,179,194,204,214,224,246,256,266,293,318,327,346,355],{"__ignoreMap":82},[86,87,90,94,98,102],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"sVt8B","\u003C!",[86,95,97],{"class":96},"s9eBZ","DOCTYPE",[86,99,101],{"class":100},"sScJk"," html",[86,103,104],{"class":92},">\n",[86,106,108,111,113,116,119,123],{"class":88,"line":107},2,[86,109,110],{"class":92},"\u003C",[86,112,81],{"class":96},[86,114,115],{"class":100}," lang",[86,117,118],{"class":92},"=",[86,120,122],{"class":121},"sZZnC","\"en\"",[86,124,104],{"class":92},[86,126,128,130,133],{"class":88,"line":127},3,[86,129,110],{"class":92},[86,131,132],{"class":96},"head",[86,134,104],{"class":92},[86,136,138,141,144,147,149,152],{"class":88,"line":137},4,[86,139,140],{"class":92},"  \u003C",[86,142,143],{"class":96},"meta",[86,145,146],{"class":100}," charset",[86,148,118],{"class":92},[86,150,151],{"class":121},"\"UTF-8\"",[86,153,104],{"class":92},[86,155,157,159,161,164,166,169,172,174,177],{"class":88,"line":156},5,[86,158,140],{"class":92},[86,160,143],{"class":96},[86,162,163],{"class":100}," name",[86,165,118],{"class":92},[86,167,168],{"class":121},"\"viewport\"",[86,170,171],{"class":100}," content",[86,173,118],{"class":92},[86,175,176],{"class":121},"\"width=device-width, initial-scale=1.0\"",[86,178,104],{"class":92},[86,180,182,184,187,190,192],{"class":88,"line":181},6,[86,183,140],{"class":92},[86,185,186],{"class":96},"title",[86,188,189],{"class":92},">Prototype\u003C\u002F",[86,191,186],{"class":96},[86,193,104],{"class":92},[86,195,197,200,202],{"class":88,"line":196},7,[86,198,199],{"class":92},"\u003C\u002F",[86,201,132],{"class":96},[86,203,104],{"class":92},[86,205,207,209,212],{"class":88,"line":206},8,[86,208,110],{"class":92},[86,210,211],{"class":96},"body",[86,213,104],{"class":92},[86,215,217,219,222],{"class":88,"line":216},9,[86,218,140],{"class":92},[86,220,221],{"class":96},"header",[86,223,104],{"class":92},[86,225,227,230,233,236,240,242,244],{"class":88,"line":226},10,[86,228,229],{"class":92},"    \u003C",[86,231,232],{"class":96},"nav",[86,234,235],{"class":92},">",[86,237,239],{"class":238},"sJ8bj","\u003C!-- Logo + links -->",[86,241,199],{"class":92},[86,243,232],{"class":96},[86,245,104],{"class":92},[86,247,249,252,254],{"class":88,"line":248},11,[86,250,251],{"class":92},"  \u003C\u002F",[86,253,221],{"class":96},[86,255,104],{"class":92},[86,257,259,261,264],{"class":88,"line":258},12,[86,260,140],{"class":92},[86,262,263],{"class":96},"main",[86,265,104],{"class":92},[86,267,269,271,274,277,279,282,284,287,289,291],{"class":88,"line":268},13,[86,270,229],{"class":92},[86,272,273],{"class":96},"section",[86,275,276],{"class":100}," class",[86,278,118],{"class":92},[86,280,281],{"class":121},"\"hero\"",[86,283,235],{"class":92},[86,285,286],{"class":238},"\u003C!-- Hero content -->",[86,288,199],{"class":92},[86,290,273],{"class":96},[86,292,104],{"class":92},[86,294,296,298,300,302,304,307,309,312,314,316],{"class":88,"line":295},14,[86,297,229],{"class":92},[86,299,273],{"class":96},[86,301,276],{"class":100},[86,303,118],{"class":92},[86,305,306],{"class":121},"\"features\"",[86,308,235],{"class":92},[86,310,311],{"class":238},"\u003C!-- Feature cards -->",[86,313,199],{"class":92},[86,315,273],{"class":96},[86,317,104],{"class":92},[86,319,321,323,325],{"class":88,"line":320},15,[86,322,251],{"class":92},[86,324,263],{"class":96},[86,326,104],{"class":92},[86,328,330,332,335,337,340,342,344],{"class":88,"line":329},16,[86,331,140],{"class":92},[86,333,334],{"class":96},"footer",[86,336,235],{"class":92},[86,338,339],{"class":238},"\u003C!-- Footer links -->",[86,341,199],{"class":92},[86,343,334],{"class":96},[86,345,104],{"class":92},[86,347,349,351,353],{"class":88,"line":348},17,[86,350,199],{"class":92},[86,352,211],{"class":96},[86,354,104],{"class":92},[86,356,358,360,362],{"class":88,"line":357},18,[86,359,199],{"class":92},[86,361,81],{"class":96},[86,363,104],{"class":92},[15,365,366,367,372],{},"Use the ",[368,369,371],"a",{"href":370},"\u002Ftools\u002Fhtml-preview","HTML Preview"," tool to render your markup instantly. Write or paste your code and see the result side-by-side — no local server, no build step.",[15,374,375,378,379,382,383,386],{},[28,376,377],{},"Keyboard shortcut:"," Press ",[58,380,381],{},"Ctrl+Enter"," (or ",[58,384,385],{},"Cmd+Enter"," on Mac) in the editor to refresh the preview panel quickly.",[10,388,390],{"id":389},"step-3-apply-css-styling","Step 3: Apply CSS Styling",[15,392,393,394,397],{},"With a solid skeleton, add layout and spacing. Start with a CSS reset or a simple ",[58,395,396],{},"box-sizing: border-box"," rule, then layer in your layout system.",[77,399,403],{"className":400,"code":401,"language":402,"meta":82,"style":82},"language-css shiki shiki-themes github-light github-dark","*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.features {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1.5rem;\n}\n","css",[58,404,405,427,442,454,465,470,476,483,495,536,551],{"__ignoreMap":82},[86,406,407,410,412,414,417,419,421,424],{"class":88,"line":89},[86,408,409],{"class":96},"*",[86,411,61],{"class":92},[86,413,409],{"class":96},[86,415,416],{"class":100},"::before",[86,418,61],{"class":92},[86,420,409],{"class":96},[86,422,423],{"class":100},"::after",[86,425,426],{"class":92}," {\n",[86,428,429,433,436,439],{"class":88,"line":107},[86,430,432],{"class":431},"sj4cs","  box-sizing",[86,434,435],{"class":92},": ",[86,437,438],{"class":431},"border-box",[86,440,441],{"class":92},";\n",[86,443,444,447,449,452],{"class":88,"line":127},[86,445,446],{"class":431},"  margin",[86,448,435],{"class":92},[86,450,451],{"class":431},"0",[86,453,441],{"class":92},[86,455,456,459,461,463],{"class":88,"line":137},[86,457,458],{"class":431},"  padding",[86,460,435],{"class":92},[86,462,451],{"class":431},[86,464,441],{"class":92},[86,466,467],{"class":88,"line":156},[86,468,469],{"class":92},"}\n",[86,471,472],{"class":88,"line":181},[86,473,475],{"emptyLinePlaceholder":474},true,"\n",[86,477,478,481],{"class":88,"line":196},[86,479,480],{"class":100},".features",[86,482,426],{"class":92},[86,484,485,488,490,493],{"class":88,"line":206},[86,486,487],{"class":431},"  display",[86,489,435],{"class":92},[86,491,492],{"class":431},"grid",[86,494,441],{"class":92},[86,496,497,500,502,505,508,511,513,516,518,521,525,527,530,533],{"class":88,"line":216},[86,498,499],{"class":431},"  grid-template-columns",[86,501,435],{"class":92},[86,503,504],{"class":431},"repeat",[86,506,507],{"class":92},"(",[86,509,510],{"class":431},"auto-fit",[86,512,61],{"class":92},[86,514,515],{"class":431},"minmax",[86,517,507],{"class":92},[86,519,520],{"class":431},"280",[86,522,524],{"class":523},"szBVR","px",[86,526,61],{"class":92},[86,528,529],{"class":431},"1",[86,531,532],{"class":523},"fr",[86,534,535],{"class":92},"));\n",[86,537,538,541,543,546,549],{"class":88,"line":226},[86,539,540],{"class":431},"  gap",[86,542,435],{"class":92},[86,544,545],{"class":431},"1.5",[86,547,548],{"class":523},"rem",[86,550,441],{"class":92},[86,552,553],{"class":88,"line":248},[86,554,469],{"class":92},[33,556,558],{"id":557},"theming-with-a-color-palette","Theming with a Color Palette",[15,560,561,562,566],{},"Pick a cohesive palette before you write color values. A 5-shade scale (50 → 900) gives you backgrounds, borders, hover states, and text colors from a single hue. Use the ",[368,563,565],{"href":564},"\u002Ftools\u002Fcolor-palette","Color Palette"," tool to generate accessible, harmonious palettes in seconds.",[15,568,569],{},"Define your palette as CSS custom properties so one change ripples across the prototype:",[77,571,573],{"className":400,"code":572,"language":402,"meta":82,"style":82},":root {\n  --color-primary-50: #eff6ff;\n  --color-primary-500: #3b82f6;\n  --color-primary-900: #1e3a8a;\n}\n",[58,574,575,582,595,607,619],{"__ignoreMap":82},[86,576,577,580],{"class":88,"line":89},[86,578,579],{"class":100},":root",[86,581,426],{"class":92},[86,583,584,588,590,593],{"class":88,"line":107},[86,585,587],{"class":586},"s4XuR","  --color-primary-50",[86,589,435],{"class":92},[86,591,592],{"class":431},"#eff6ff",[86,594,441],{"class":92},[86,596,597,600,602,605],{"class":88,"line":127},[86,598,599],{"class":586},"  --color-primary-500",[86,601,435],{"class":92},[86,603,604],{"class":431},"#3b82f6",[86,606,441],{"class":92},[86,608,609,612,614,617],{"class":88,"line":137},[86,610,611],{"class":586},"  --color-primary-900",[86,613,435],{"class":92},[86,615,616],{"class":431},"#1e3a8a",[86,618,441],{"class":92},[86,620,621],{"class":88,"line":156},[86,622,469],{"class":92},[10,624,626],{"id":625},"step-4-add-visual-polish","Step 4: Add Visual Polish",[15,628,629,630,633,634,637],{},"Flat prototypes communicate structure; polished prototypes sell the idea. Two properties do most of the heavy lifting: ",[28,631,632],{},"box shadows"," and ",[28,635,636],{},"gradients",".",[33,639,641],{"id":640},"box-shadows-for-elevation","Box Shadows for Elevation",[15,643,644],{},"Layer two shadows — one tight, one diffused — to create convincing depth:",[77,646,648],{"className":400,"code":647,"language":402,"meta":82,"style":82},".card {\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.08),\n    0 8px 24px rgba(0, 0, 0, 0.12);\n}\n",[58,649,650,657,665,703,739],{"__ignoreMap":82},[86,651,652,655],{"class":88,"line":89},[86,653,654],{"class":100},".card",[86,656,426],{"class":92},[86,658,659,662],{"class":88,"line":107},[86,660,661],{"class":431},"  box-shadow",[86,663,664],{"class":92},":\n",[86,666,667,670,673,675,678,680,683,685,687,689,691,693,695,697,700],{"class":88,"line":127},[86,668,669],{"class":431},"    0",[86,671,672],{"class":431}," 1",[86,674,524],{"class":523},[86,676,677],{"class":431}," 3",[86,679,524],{"class":523},[86,681,682],{"class":431}," rgba",[86,684,507],{"class":92},[86,686,451],{"class":431},[86,688,61],{"class":92},[86,690,451],{"class":431},[86,692,61],{"class":92},[86,694,451],{"class":431},[86,696,61],{"class":92},[86,698,699],{"class":431},"0.08",[86,701,702],{"class":92},"),\n",[86,704,705,707,710,712,715,717,719,721,723,725,727,729,731,733,736],{"class":88,"line":137},[86,706,669],{"class":431},[86,708,709],{"class":431}," 8",[86,711,524],{"class":523},[86,713,714],{"class":431}," 24",[86,716,524],{"class":523},[86,718,682],{"class":431},[86,720,507],{"class":92},[86,722,451],{"class":431},[86,724,61],{"class":92},[86,726,451],{"class":431},[86,728,61],{"class":92},[86,730,451],{"class":431},[86,732,61],{"class":92},[86,734,735],{"class":431},"0.12",[86,737,738],{"class":92},");\n",[86,740,741],{"class":88,"line":156},[86,742,469],{"class":92},[15,744,366,745,749],{},[368,746,748],{"href":747},"\u002Ftools\u002Fcss-box-shadow","CSS Box Shadow"," tool to dial in offset, blur, spread, and color interactively. Copy the generated rule straight into your stylesheet.",[33,751,753],{"id":752},"gradients-for-depth-and-energy","Gradients for Depth and Energy",[15,755,756],{},"A subtle gradient (5–15% lightness shift) adds perceived elevation. A bold gradient turns a section into a focal point:",[77,758,760],{"className":400,"code":759,"language":402,"meta":82,"style":82},"\u002F* Subtle surface depth *\u002F\n.card { background: linear-gradient(180deg, #1e293b, #0f172a); }\n\n\u002F* Bold hero accent *\u002F\n.hero { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }\n",[58,761,762,767,803,807,812],{"__ignoreMap":82},[86,763,764],{"class":88,"line":89},[86,765,766],{"class":238},"\u002F* Subtle surface depth *\u002F\n",[86,768,769,771,774,777,779,782,784,787,790,792,795,797,800],{"class":88,"line":107},[86,770,654],{"class":100},[86,772,773],{"class":92}," { ",[86,775,776],{"class":431},"background",[86,778,435],{"class":92},[86,780,781],{"class":431},"linear-gradient",[86,783,507],{"class":92},[86,785,786],{"class":431},"180",[86,788,789],{"class":523},"deg",[86,791,61],{"class":92},[86,793,794],{"class":431},"#1e293b",[86,796,61],{"class":92},[86,798,799],{"class":431},"#0f172a",[86,801,802],{"class":92},"); }\n",[86,804,805],{"class":88,"line":127},[86,806,475],{"emptyLinePlaceholder":474},[86,808,809],{"class":88,"line":137},[86,810,811],{"class":238},"\u002F* Bold hero accent *\u002F\n",[86,813,814,817,819,821,823,825,827,830,832,834,836,838,841],{"class":88,"line":156},[86,815,816],{"class":100},".hero",[86,818,773],{"class":92},[86,820,776],{"class":431},[86,822,435],{"class":92},[86,824,781],{"class":431},[86,826,507],{"class":92},[86,828,829],{"class":431},"135",[86,831,789],{"class":523},[86,833,61],{"class":92},[86,835,604],{"class":431},[86,837,61],{"class":92},[86,839,840],{"class":431},"#8b5cf6",[86,842,802],{"class":92},[15,844,845,846,850],{},"The ",[368,847,849],{"href":848},"\u002Ftools\u002Fcss-gradient","CSS Gradient"," tool lets you adjust angles, color stops, and types (linear, radial, conic) with live preview.",[33,852,854],{"id":853},"border-radius-for-softness","Border Radius for Softness",[15,856,857],{},"Sharp corners feel technical; rounded corners feel approachable. A consistent radius across cards, buttons, and inputs unifies the design:",[77,859,861],{"className":400,"code":860,"language":402,"meta":82,"style":82},".card { border-radius: 12px; }\n.btn { border-radius: 8px; }\n",[58,862,863,882],{"__ignoreMap":82},[86,864,865,867,869,872,874,877,879],{"class":88,"line":89},[86,866,654],{"class":100},[86,868,773],{"class":92},[86,870,871],{"class":431},"border-radius",[86,873,435],{"class":92},[86,875,876],{"class":431},"12",[86,878,524],{"class":523},[86,880,881],{"class":92},"; }\n",[86,883,884,887,889,891,893,896,898],{"class":88,"line":107},[86,885,886],{"class":100},".btn",[86,888,773],{"class":92},[86,890,871],{"class":431},[86,892,435],{"class":92},[86,894,895],{"class":431},"8",[86,897,524],{"class":523},[86,899,881],{"class":92},[15,901,366,902,906],{},[368,903,905],{"href":904},"\u002Ftools\u002Fborder-radius","Border Radius"," tool to experiment with uniform or per-corner values and copy the result.",[10,908,910],{"id":909},"step-5-test-responsiveness","Step 5: Test Responsiveness",[15,912,913],{},"A prototype is incomplete until you verify it at multiple breakpoints. Test these three widths as a minimum:",[915,916,917,933],"table",{},[918,919,920],"thead",{},[921,922,923,927,930],"tr",{},[924,925,926],"th",{},"Breakpoint",[924,928,929],{},"Width",[924,931,932],{},"What to Check",[934,935,936,948,959],"tbody",{},[921,937,938,942,945],{},[939,940,941],"td",{},"Mobile",[939,943,944],{},"375px",[939,946,947],{},"Single-column stack, tap targets ≥44px",[921,949,950,953,956],{},[939,951,952],{},"Tablet",[939,954,955],{},"768px",[939,957,958],{},"Two-column grids, navigation toggle",[921,960,961,964,967],{},[939,962,963],{},"Desktop",[939,965,966],{},"1280px",[939,968,969],{},"Max-width container, hover states",[15,971,972,973,975,976,979,980,983],{},"In the ",[368,974,371],{"href":370}," tool, resize the preview pane to approximate each breakpoint. Alternatively, use your browser's DevTools device toolbar (",[58,977,978],{},"Ctrl+Shift+M"," \u002F ",[58,981,982],{},"Cmd+Shift+M",").",[33,985,987],{"id":986},"common-responsive-traps","Common Responsive Traps",[38,989,990,1003,1009],{},[41,991,992,995,996,999,1000],{},[28,993,994],{},"Overflow from fixed widths"," — replace ",[58,997,998],{},"width: 300px"," with ",[58,1001,1002],{},"max-width: 300px; width: 100%",[41,1004,1005,1008],{},[28,1006,1007],{},"Tiny tap targets on mobile"," — buttons and links need at least 44×44px hit areas",[41,1010,1011,1014,1015,1017],{},[28,1012,1013],{},"Unreadable text scaling"," — use ",[58,1016,548],{}," units so users can zoom without breaking layout",[10,1019,1021],{"id":1020},"sharing-your-prototype","Sharing Your Prototype",[15,1023,1024],{},"Online tools make sharing painless. Copy the preview URL or export the HTML file and send it to stakeholders. No Git push, no deployment pipeline — just a link they can open on any device.",[15,1026,1027,1030,1031,1034],{},[28,1028,1029],{},"Pro tip:"," Add a ",[58,1032,1033],{},"?theme=dark"," query parameter (or a simple toggle button in your prototype) so reviewers can check both light and dark modes without you maintaining two files.",[10,1036,1038],{"id":1037},"key-takeaways","Key Takeaways",[38,1040,1041,1044,1047,1050,1053,1056],{},[41,1042,1043],{},"Sketch first, code second — 60 seconds of planning saves hours of rework",[41,1045,1046],{},"Build semantic HTML before adding any CSS",[41,1048,1049],{},"Use CSS custom properties for colors so one palette change updates the whole prototype",[41,1051,1052],{},"Layer two box shadows (tight + diffused) for realistic elevation",[41,1054,1055],{},"Test at 375px, 768px, and 1280px minimum before sharing",[41,1057,1058],{},"Share a live preview link instead of screenshots — stakeholders interact differently with clickable prototypes",[10,1060,1062],{"id":1061},"try-it-yourself","Try It Yourself",[15,1064,1065],{},"Put this workflow into practice with free online tools:",[38,1067,1068,1073,1078,1083],{},[41,1069,1070,1072],{},[368,1071,371],{"href":370}," — Write HTML and CSS, see the result instantly with live rendering",[41,1074,1075,1077],{},[368,1076,849],{"href":848}," — Design linear, radial, and conic gradients with an interactive editor",[41,1079,1080,1082],{},[368,1081,748],{"href":747}," — Generate layered box shadows with real-time preview",[41,1084,1085,1087],{},[368,1086,905],{"href":904}," — Set uniform or per-corner border radius values visually",[1089,1090,1091],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}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 pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":82,"searchDepth":107,"depth":107,"links":1093},[1094,1095,1098,1099,1102,1107,1110,1111,1112],{"id":12,"depth":107,"text":13},{"id":20,"depth":107,"text":21,"children":1096},[1097],{"id":35,"depth":127,"text":36},{"id":52,"depth":107,"text":53},{"id":389,"depth":107,"text":390,"children":1100},[1101],{"id":557,"depth":127,"text":558},{"id":625,"depth":107,"text":626,"children":1103},[1104,1105,1106],{"id":640,"depth":127,"text":641},{"id":752,"depth":127,"text":753},{"id":853,"depth":127,"text":854},{"id":909,"depth":107,"text":910,"children":1108},[1109],{"id":986,"depth":127,"text":987},{"id":1020,"depth":107,"text":1021},{"id":1037,"depth":107,"text":1038},{"id":1061,"depth":107,"text":1062},"2026-05-28","Build a fast prototyping workflow using free online tools for HTML, CSS, and visual design.","md",{"immutable":474},"\u002Fguides\u002Ffrontend-prototyping-workflow",{"title":5,"description":1114},"guides\u002Ffrontend-prototyping-workflow","OBasYWrai0fgti7p_1Ff85X5Mdu3hijFl2tHfyexqb0",1780401329191]