[{"data":1,"prerenderedAt":745},["ShallowReactive",2],{"yodewang-rebuild":3,"work-nav-all":695},{"id":4,"title":5,"body":7,"cover":648,"description":626,"details":649,"extension":670,"headline":671,"meta":674,"navigation":675,"order":676,"path":677,"role":678,"seo":679,"seoTitle":681,"slug":684,"status":685,"stem":684,"summary":686,"tags":689,"year":693,"__hash__":694},"works\u002Fyodewang-rebuild.md",{"zh":6,"en":6},"yodewang.com",{"type":8,"value":9,"toc":625},"minimark",[10,351],[11,12,13,18,22,38,71,75,78,99,102,152,155,158,162,165,172,178,181,186,201,205,220,224,227,232,235,250,272,275,282,287,302,307,322,326,329,333,339,345,348],"zh",{},[14,15,17],"h2",{"id":16},"figma-sites-讓我很快有個網站但我想要更多","Figma Sites 讓我很快有個網站，但我想要更多",[19,20,21],"p",{},"我在 2025 年底開始架設個人作品集網站，起初是為了加快上架速度而選擇了 Figma Sites。確實達成了設計即網站一體化的理想狀態，但用了一段時間後，我發現一些限制：",[23,24,25,29,32,35],"ul",{},[26,27,28],"li",{},"要擴充具備語言、主題切換的功能很麻煩，需要重複刻頁面",[26,30,31],{},"未來若增加作品內容，管理起來不方便",[26,33,34],{},"互動效果要花很多功夫才能實現，且彈性不足",[26,36,37],{},"搭配 AI 工具並不順手",[39,40,43,62],"grid",{"align":41,"cols":42},"center",2,[44,45,46,49,52],"cell",{},[19,47,48],{},"雖然靜態展示內容的場景已經很夠用了，但只要想多做一點，就會覺得綁手綁腳。",[19,50,51],{},"所以我決定搬家！",[19,53,54],{},[55,56,61],"a",{"href":57,"target":58,"rel":59},"https:\u002F\u002Fnear-ream-27099630.figma.site","_blank",[60],"nofollow","舊版網站",[44,63,64],{},[65,66],"full-image",{"alt":67,"caption-en":68,"src":69,"caption-zh":70},"舊版 Figma Sites 作品集網站","Old Figma Sites portfolio","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Ffigma-sites-old.webp","舊版 Figma Sites 網站",[14,72,74],{"id":73},"選好工具ai-全程協作","選好工具，AI 全程協作",[19,76,77],{},"我比較熟悉 Vue.js 語法，加上想用 Markdown 管理作品內容、讓頁面自動渲染，因此選定了三個主要工具：",[23,79,80,87,93],{},[26,81,82,86],{},[83,84,85],"strong",{},"Nuxt 4","：框架完整，原生支援 SSR，上手快",[26,88,89,92],{},[83,90,91],{},"Nuxt Content","：Markdown 寫作品、自動渲染成頁面，內容管理更直覺",[26,94,95,98],{},[83,96,97],{},"Tailwind CSS v4","：token 系統彈性夠，方便建立與維護 Design System",[19,100,101],{},"整個開發過程全程搭配 AI，我負責在後方調度指揮：",[103,104,106,123,139],"info-cards",{"cols":105},3,[107,108,112],"info-card",{"image":109,"image-alt":110,"title-en":111,"title-zh":111},"\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Flogo-claude-code.svg","Claude Code logo","Claude Code",[23,113,114,117,120],{},[26,115,116],{},"專案架構規劃",[26,118,119],{},"Debug",[26,121,122],{},"文案編修",[107,124,128],{"image":125,"image-alt":126,"title-en":127,"title-zh":127},"\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Flogo-codex.svg","Codex logo","Codex",[23,129,130,133,136],{},[26,131,132],{},"UI 元件製作",[26,134,135],{},"互動行為細節",[26,137,138],{},"速度快，適合需要反覆嘗試的任務",[107,140,144],{"image":141,"image-alt":142,"title-en":143,"title-zh":143},"\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Flogo-chatgpt-image-2.svg","ChatGPT Image 2 logo","ChatGPT Image 2",[23,145,146,149],{},[26,147,148],{},"視覺發想",[26,150,151],{},"生成參考圖收斂方向",[19,153,154],{},"AI 的任務分配是邊做邊調整出來的，我採用 Claude Code 為主、Codex 為輔來進行。Claude Code 在專案初期很順，初始化、架構規劃、套件安裝這類任務交給它效率很高。但隨著專案規模變大，UI 修改和 bug 開始變多，這時候 Codex 反而更能一次到位。（也可能剛好碰到 Claude Code 降智🤔）",[19,156,157],{},"而為了讓 Claude Code 持續掌握專案架構，我也在過程中持續更新 CLAUDE.md，把檔案架構、元件、token 規範都記錄進去，讓 AI 在整個開發過程中一直能拿到正確的脈絡。",[14,159,161],{"id":160},"既然要搬家了視覺風格也趁機強化","既然要搬家了，視覺風格也趁機強化",[19,163,164],{},"Swiss Style 是我一開始就確定的方向，透過格線、無襯線字體、高對比、空白、極簡色調，表現出克制、功能性、理性的美感。",[19,166,167,168],{},"舊網站其實已經有採用這個風格，但沒有完整發揮，整個網站看起來就默默的。新網站則強化了視覺張力，字重落差拉大、滿版 Layout、風格更鮮明。\n",[55,169,171],{"href":170,"target":58},"\u002Fdesign","查看 Design System",[65,173],{"alt":174,"caption-en":175,"src":176,"caption-zh":177},"Design System 頁面，展示網站的色彩、字型、間距與元件規範","Design System reference","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fdesign-system.webp","Design System 規範",[14,179,180],{"id":180},"開發分了四個階段",[182,183,185],"h3",{"id":184},"stage-1-打好地基","Stage 1 · 打好地基",[39,187,188,193],{"align":41,"cols":42},[44,189,190],{},[19,191,192],{},"進行基礎建設，包含 Nuxt 專案基本架構、套件安裝、Prettier、Tailwind token 系統，這個階段確立了之後整個視覺系統的基礎。",[44,194,195],{},[65,196],{"alt":197,"caption-en":198,"src":199,"caption-zh":200},"Tailwind CSS token 與基礎樣式設定","Token and base style configuration","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Ftoken-config-code.webp","Token 與基礎樣式設定",[182,202,204],{"id":203},"stage-2-頁面骨架與元件","Stage 2 · 頁面骨架與元件",[39,206,207,212],{"align":41,"cols":42},[44,208,209],{},[19,210,211],{},"首頁架構、作品頁路由、導航列、i18n 通通搞定。也在這個階段正式建立 MDC 元件系統，確立了 Markdown 寫作品、Nuxt Content 渲染成頁面的工作流程。",[44,213,214],{},[65,215],{"alt":216,"caption-en":217,"src":218,"caption-zh":219},"顯示首頁區塊、作品頁路由、導航列與共用元件的架構圖","Page skeleton, routes, and shared components","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fyodewang-architecture-diagram.webp","頁面骨架、路由與共用元件",[182,221,223],{"id":222},"stage-3-互動視覺與功能","Stage 3 · 互動、視覺與功能",[19,225,226],{},"這個階段花最多時間，主要在雕琢幾個互動的細節與視覺呈現。",[19,228,229],{},[83,230,231],{},"1. Home Hero 的探索",[19,233,234],{},"我希望 Home Hero 能傳達強烈的「工程思維 + 設計思維」印象，前後換了三個方向：",[39,236,237,242],{"align":41,"cols":42},[44,238,239],{},[19,240,241],{},"最初的想法是一條拉桿在「設計思維」和「工程思維」兩端之間移動。但互動感不強、視覺效果也不夠，傳達的感覺比較像是在取捨、找平衡，而不是我能同時帶來兩者 (I bring both)。",[44,243,244],{},[65,245],{"alt":246,"caption-en":247,"src":248,"caption-zh":249},"Hero v1 草圖：在設計思維與工程思維兩端間移動的拉桿概念","Hero v1 — slider concept","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fhero-v1-slider.webp","Hero v1：拉桿概念",[39,251,252,264],{"align":41,"cols":42},[44,253,254,257],{},[19,255,256],{},"換了第二個方向，兩個圓圈疊合時才顯示出隱藏文字，這個概念來自視覺密碼學，是個非常有趣且迷人的技術。但實作後發現會造成畫面不斷閃爍、眼睛不舒服，而且只有圖形完全重合那一刻才顯示文字，缺少揭露的過程感。",[19,258,259],{},[55,260,263],{"href":261,"target":58,"rel":262},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FVisual_cryptography",[60],"Visual Cryptography 參考",[44,265,266],{},[267,268],"inline-video",{"caption-en":269,"caption-zh":270,"src":271},"Hero v2: visual cryptography concept","Hero v2：視覺密碼學概念","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fhero-v2-circles.mp4",[19,273,274],{},"第三個版本避免了畫面閃爍的問題，「I BRING BOTH」從圓圈交集的區域揭露出來且更為清晰。概念和互動呼應。手機版則改用滑動觸發圓圈重合的動畫，讓不同裝置上的體驗保持一致。",[276,277],"video-block",{"caption-en":278,"loop":279,"src":280,"caption-zh":281},"Final Hero: overlapping circles reveal I BRING BOTH","false","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fhero-final-interaction.mp4","最終版 Hero：兩個圓重疊後揭露 I BRING BOTH",[19,283,284],{},[83,285,286],{},"2. How I Think & Work · 線條插圖",[39,288,289,294],{"align":41,"cols":42},[44,290,291],{},[19,292,293],{},"How I Think & Work 的三張卡片表現了我的核心理念：切換視角、減法、做做看。從手繪草稿到線條插圖，我想呈現那種思考正在成形的感覺。",[44,295,296],{},[65,297],{"alt":298,"caption-en":299,"src":300,"caption-zh":301},"How I Think & Work 卡片的手繪草稿與最終線條插圖","Sketches and final line illustrations","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fhow-i-think-sketch.webp","手繪草稿與最終線條插圖",[19,303,304],{},[83,305,306],{},"3. Ask AI · 懶得看就問 AI",[39,308,309,314],{"align":41,"cols":42},[44,310,311],{},[19,312,313],{},"每篇作品頁右下角都有個問問 AI 的小功能，會帶入作品連結並生成 prompt，讓讀者直接丟給 ChatGPT 或 Claude 問問題。因為各 AI 平台對 URL 夾帶 prompt 的支援不太穩定，也保留了複製 prompt 的按鈕。",[44,315,316],{},[65,317],{"alt":318,"caption-en":319,"src":320,"caption-zh":321},"作品頁的 Ask AI 面板，含 ChatGPT、Claude 連結與複製 prompt 按鈕","The Ask AI feature on a work page","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fask-ai-feature.webp","作品頁的 Ask AI 功能",[182,323,325],{"id":324},"stage-4-內容搬移與收尾","Stage 4 · 內容搬移與收尾",[19,327,328],{},"最後把舊網站的的作品內容搬進來，我寫了個 SKILL，可以把舊內容自動轉成 MDC 格式，大幅加快搬運速度。補齊 SEO 與 a11y 後，就順利部署上線啦!",[14,330,332],{"id":331},"搬家完成","搬家完成！",[65,334],{"alt":335,"caption-en":336,"src":337,"caption-zh":338},"舊版 Figma Sites 首頁與重建後 Nuxt 首頁的前後對照","Homepage before and after the rebuild","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fbefore-after-homepage.webp","首頁改版前後對照",[65,340],{"alt":341,"caption-en":342,"src":343,"caption-zh":344},"舊版 Figma Sites 作品頁與重建後 Nuxt 作品頁的前後對照","Work page before and after the rebuild","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fbefore-after-work-page.webp","作品頁改版前後對照",[19,346,347],{},"從靜態、低調，到有互動、暗色模式、雙語切換且風格鮮明。新舊網站最大的差別，是從一個「放作品的地方」變成「本身也是個作品」。",[19,349,350],{},"在這個過程中，AI 帶來的改變不只是加快寫 code 的速度，也讓設計能在實作中持續調整與發展，帶來兩者一起快速迭代的順暢感。",[352,353,354,358,361,375,396,400,403,420,423,461,464,467,471,474,480,483,487,491,503,507,519,523,526,531,534,546,563,566,568,573,585,590,602,606,609,613,616,619,622],"en",{},[14,355,357],{"id":356},"figma-sites-got-me-online-fast-but-i-wanted-more","Figma Sites got me online fast, but I wanted more",[19,359,360],{},"I started building my portfolio in late 2025, picking Figma Sites to move quickly. It delivered on the design-as-website promise, but after a while I started running into walls:",[23,362,363,366,369,372],{},[26,364,365],{},"Adding language and theme switching was painful, requiring duplicate pages",[26,367,368],{},"Managing content would get unwieldy as the portfolio grew",[26,370,371],{},"Interactive effects took real effort and were inflexible",[26,373,374],{},"It didn't play well with AI tools",[39,376,377,391],{"align":41,"cols":42},[44,378,379,382,385],{},[19,380,381],{},"Static display was good enough, but anything beyond that felt like fighting the tool.",[19,383,384],{},"Time to move.",[19,386,387],{},[55,388,390],{"href":57,"target":58,"rel":389},[60],"Old site",[44,392,393],{},[65,394],{"alt":395,"caption-en":68,"src":69},"Old Figma Sites portfolio website screenshot",[14,397,399],{"id":398},"picking-the-stack-building-with-ai","Picking the stack, building with AI",[19,401,402],{},"I'm comfortable with Vue.js, and I wanted to write case studies in Markdown and have them render automatically. That pointed me toward three tools:",[23,404,405,410,415],{},[26,406,407,409],{},[83,408,85],{},": Full-featured framework, native SSR, fast to get started",[26,411,412,414],{},[83,413,91],{},": Write in Markdown, get rendered pages, content stays manageable",[26,416,417,419],{},[83,418,97],{},": Flexible token system, easy to build and maintain a design system",[19,421,422],{},"AI was in the loop the whole way through. I directed from the back:",[103,424,425,438,451],{"cols":105},[107,426,427],{"image":109,"image-alt":110,"title-en":111,"title-zh":111},[23,428,429,432,435],{},[26,430,431],{},"Project architecture",[26,433,434],{},"Debugging",[26,436,437],{},"Copy editing",[107,439,440],{"image":125,"image-alt":126,"title-en":127,"title-zh":127},[23,441,442,445,448],{},[26,443,444],{},"UI component work",[26,446,447],{},"Interaction details",[26,449,450],{},"Fast for iterative tasks",[107,452,453],{"image":141,"image-alt":142,"title-en":143,"title-zh":143},[23,454,455,458],{},[26,456,457],{},"Visual ideation",[26,459,460],{},"Generating reference images to converge on a direction",[19,462,463],{},"The division was figured out as the project went on. I ran Claude Code as the primary, Codex as support. Claude Code was solid early: setup, architecture, package installs. As the project grew and UI edits and bugs piled up, Codex was more likely to get it right in one shot. (Or maybe I just hit a Claude Code off-day 🤔)",[19,465,466],{},"To keep Claude Code oriented as the project grew, I kept CLAUDE.md updated throughout, logging the latest component naming rules, routing structure, and style conventions so the AI always had accurate context.",[14,468,470],{"id":469},"since-i-was-moving-anyway-i-pushed-the-visual-direction-further","Since I was moving anyway, I pushed the visual direction further",[19,472,473],{},"Swiss Style was my direction from day one: grid, sans-serif, high contrast, whitespace, minimal palette. Restrained, functional, rational.",[19,475,476,477],{},"The old site had this tendency but never fully committed. The new one amplifies it: heavier weight contrast, full-bleed layout, a more distinct voice.\n",[55,478,479],{"href":170,"target":58},"View Design System",[65,481],{"alt":482,"caption-en":175,"src":176},"Design System page showing the site's color, typography, spacing, and component rules",[14,484,486],{"id":485},"development-in-four-stages","Development in four stages",[182,488,490],{"id":489},"stage-1-laying-the-foundation","Stage 1 · Laying the foundation",[39,492,493,498],{"align":41,"cols":42},[44,494,495],{},[19,496,497],{},"Infrastructure work: Nuxt project setup, package installation, Prettier, and the Tailwind token system. This stage established the visual foundation everything else would build on.",[44,499,500],{},[65,501],{"alt":502,"caption-en":198,"src":199},"Code screenshot of Tailwind CSS tokens and base design settings",[182,504,506],{"id":505},"stage-2-page-skeleton-and-components","Stage 2 · Page skeleton and components",[39,508,509,514],{"align":41,"cols":42},[44,510,511],{},[19,512,513],{},"Homepage structure, work page routing, navigation, and i18n, all knocked out. This was also when the MDC component system came together, establishing the Markdown-to-page workflow.",[44,515,516],{},[65,517],{"alt":518,"caption-en":217,"src":218},"Diagram showing the homepage sections, work pages, navigation, and shared components",[182,520,522],{"id":521},"stage-3-interaction-visual-and-features","Stage 3 · Interaction, visual, and features",[19,524,525],{},"This stage took the most time. Most of it was spent refining the interaction details and visual presentation.",[19,527,528],{},[83,529,530],{},"1. Home Hero exploration",[19,532,533],{},"I wanted the Hero to communicate a strong \"engineering thinking + design thinking\" impression. It went through three versions:",[39,535,536,541],{"align":41,"cols":42},[44,537,538],{},[19,539,540],{},"The first idea was a slider moving between \"Design Thinking\" and \"Engineering Thinking\" poles. The interaction wasn't engaging, and the framing felt like a trade-off, a search for balance, rather than \"I bring both.\"",[44,542,543],{},[65,544],{"alt":545,"caption-en":247,"src":248},"Hero v1 concept showing a slider between design thinking and engineering thinking poles",[39,547,548,559],{"align":41,"cols":42},[44,549,550,553],{},[19,551,552],{},"Version two had two circles reveal hidden text when they overlapped, a concept from visual cryptography, genuinely fascinating as a technique. But the implementation flickered constantly, was hard on the eyes, and only showed the text at perfect overlap with no sense of reveal.",[19,554,555],{},[55,556,558],{"href":261,"target":58,"rel":557},[60],"Visual Cryptography reference",[44,560,561],{},[267,562],{"caption-en":269,"caption-zh":270,"src":271},[19,564,565],{},"Version three solved the flickering. \"I BRING BOTH\" emerges clearly from the intersection of the two circles. The concept and the interaction say the same thing. On mobile, a scroll-driven circle-overlap animation keeps the experience consistent across devices.",[276,567],{"caption-en":278,"loop":279,"src":280},[19,569,570],{},[83,571,572],{},"2. How I Think & Work · Line illustrations",[39,574,575,580],{"align":41,"cols":42},[44,576,577],{},[19,578,579],{},"The three cards in How I Think & Work express my core beliefs: shifting perspective, subtraction, and trying things out. Starting from hand-drawn sketches and arriving at line illustrations, I wanted to capture the feeling of ideas taking shape.",[44,581,582],{},[65,583],{"alt":584,"caption-en":299,"src":300},"Hand-drawn sketches and final line illustrations for the How I Think and Work cards",[19,586,587],{},[83,588,589],{},"3. Ask AI · Rather not read? Just ask AI",[39,591,592,597],{"align":41,"cols":42},[44,593,594],{},[19,595,596],{},"There's a small Ask AI feature in the bottom right of each work page. It generates a prompt with the case study URL so readers can drop it straight into ChatGPT or Claude. Since URL-embedded prompt support is inconsistent across platforms, there's a copy button alongside.",[44,598,599],{},[65,600],{"alt":601,"caption-en":319,"src":320},"Ask AI panel on a work detail page with ChatGPT, Claude, and copy prompt actions",[182,603,605],{"id":604},"stage-4-content-migration-and-wrap-up","Stage 4 · Content migration and wrap-up",[19,607,608],{},"Last step was bringing the old site's case studies over. I wrote a skill to auto-convert the old content into MDC format, which made the migration much faster. After filling in SEO and accessibility, it shipped.",[14,610,612],{"id":611},"done","Done!",[65,614],{"alt":615,"caption-en":336,"src":337},"Side by side comparison of the old Figma Sites homepage and the rebuilt Nuxt homepage",[65,617],{"alt":618,"caption-en":342,"src":343},"Side by side comparison of the old Figma Sites work page and the rebuilt Nuxt work page",[19,620,621],{},"From static and understated to interactive, dark-mode-ready, bilingual, and visually distinct. The biggest difference between old and new is that this site went from being \"a place to put work\" to being a piece of work in itself.",[19,623,624],{},"And what AI changed wasn't just how fast the code got written. It also let the design keep adjusting and evolving during implementation, so design and code could iterate together at speed.",{"title":626,"searchDepth":42,"depth":42,"links":627},"",[628,629,630,631,637,638,639,640,641,647],{"id":16,"depth":42,"text":17},{"id":73,"depth":42,"text":74},{"id":160,"depth":42,"text":161},{"id":180,"depth":42,"text":180,"children":632},[633,634,635,636],{"id":184,"depth":105,"text":185},{"id":203,"depth":105,"text":204},{"id":222,"depth":105,"text":223},{"id":324,"depth":105,"text":325},{"id":331,"depth":42,"text":332},{"id":356,"depth":42,"text":357},{"id":398,"depth":42,"text":399},{"id":469,"depth":42,"text":470},{"id":485,"depth":42,"text":486,"children":642},[643,644,645,646],{"id":489,"depth":105,"text":490},{"id":505,"depth":105,"text":506},{"id":521,"depth":105,"text":522},{"id":604,"depth":105,"text":605},{"id":611,"depth":42,"text":612},"\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fcover.webp",[650,657,664],{"label":651,"value":654},{"zh":652,"en":653},"角色","Role",{"zh":655,"en":656},"設計師 + 開發者（獨立完成）","Designer + Developer (Independent)",{"label":658,"value":661},{"zh":659,"en":660},"用時","Duration",{"zh":662,"en":663},"兩週零碎的時間","Two weeks, part-time",{"label":665,"value":668},{"zh":666,"en":667},"工具","Tools",{"zh":669,"en":669},"Nuxt 4 · Nuxt Content · Tailwind CSS v4 · Claude Code · Codex · ChatGPT Image 2","md",{"zh":672,"en":673},"兩週把個人作品集網站從 Figma Sites 搬到 Nuxt，記錄視覺設計與 AI 協作的過程","Two weeks to rebuild my portfolio from Figma Sites to Nuxt, with AI in the loop throughout",{},true,5,"\u002Fyodewang-rebuild",{"zh":655,"en":656},{"title":680,"description":626},{"zh":6,"en":6},{"zh":682,"en":683},"yodewang.com - 用 Nuxt 與 AI 重建個人作品集","yodewang.com: Portfolio rebuilt with Nuxt and AI","yodewang-rebuild","published",{"zh":687,"en":688},"重新整理個人作品集的內容結構、元件化排版與 AI 輔助開發流程，把原本偏靜態的頁面，轉成具備互動體驗、可長期維護的個人作品系統。","Restructured the content system, componentized the layout, and wove AI tools throughout development, turning a static showcase into an interactive, maintainable portfolio.",[690,691,692],"Portfolio","AI","Dev",2026,"78GbD3PS4gW4MDubRxuoxyJxfsX7qCxyzwuuIXrE5jM",[696,706,714,723,732,735],{"slug":697,"title":698,"cover":700,"tags":701,"order":705},"morph-inspect",{"zh":699,"en":699},"Morph Inspect","\u002Fimages\u002Fworks\u002Fmorph-inspect\u002Fcover.webp",[691,702,703,704],"B2B","Mobile","Web",1,{"slug":707,"title":708,"cover":710,"tags":711,"order":42},"spin-the-wheel",{"zh":709,"en":709},"Spin The Wheel","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fcover.webp",[712,713,692],"Wearable","Connect IQ",{"slug":715,"title":716,"cover":719,"tags":720,"order":105},"sim-monitor-dashboard",{"zh":717,"en":718},"散熱模擬監控儀表板","Thermal Simulation Monitoring Dashboard","\u002Fimages\u002Fworks\u002Fsim-monitor-dashboard\u002Fcover.webp",[721,722,692],"Design Challenge","IA",{"slug":724,"title":725,"cover":728,"tags":729,"order":731},"tiger-master",{"zh":726,"en":727},"師虎來了(修繕媒合平台)","TigerMaster Repair Matching Platform","\u002Fimages\u002Fworks\u002Ftiger-master\u002Fcover.webp",[730,703,692],"B2C",4,{"slug":684,"title":733,"cover":648,"tags":734,"order":676},{"zh":6,"en":6},[690,691,692],{"slug":736,"title":737,"cover":740,"tags":741,"order":744},"ai-design-system-assistant",{"zh":738,"en":739},"建立一套讓 AI 看懂設計脈絡的知識庫","Building a Knowledge Base That Teaches AI Design Context","\u002Fimages\u002Fworks\u002Fai-design-system-assistant\u002Fcover.webp",[742,743,691],"[WIP]","Design System",6,1784180138017]