[{"data":1,"prerenderedAt":215},["ShallowReactive",2],{"ai-design-system-assistant":3,"work-nav-all":172},{"id":4,"title":5,"body":8,"cover":126,"description":119,"details":127,"extension":149,"headline":150,"meta":153,"navigation":154,"order":155,"path":156,"role":157,"seo":158,"seoTitle":160,"slug":161,"status":162,"stem":161,"summary":163,"tags":166,"year":170,"__hash__":171},"works\u002Fai-design-system-assistant.md",{"zh":6,"en":7},"建立一套讓 AI 看懂設計脈絡的知識庫","Building a Knowledge Base That Teaches AI Design Context",{"type":9,"value":10,"toc":118},"minimark",[11,70],[12,13,14,19,23,26,29,32,58,61,64,67],"zh",{},[15,16,18],"h2",{"id":17},"每次找-ai-討論設計都要重講一次產品邏輯","每次找 AI 討論設計，都要重講一次產品邏輯",[20,21,22],"p",{},"用 AI 輔助設計時，它不懂產品邏輯、不懂元件規則、也不懂團隊習慣的 UI 模式。每次討論都得從頭解釋背景，給出的方案也常常脫離產品現況。",[20,24,25],{},"與其每次重講一次，我開始把這些知識整理成 AI 讀得懂的結構化文件，讓它先補齊背景，再進來討論設計。",[15,27,28],{"id":28},"漸進式把知識文件化",[20,30,31],{},"知識庫分成三個部分：",[33,34,36,44,51],"info-cards",{"cols":35},3,[37,38,41],"info-card",{"icon":39,"title-en":40,"title-zh":40},"material-symbols:menu-book","wiki",[20,42,43],{},"商業邏輯、流程規則等產品知識",[37,45,48],{"icon":46,"title-en":47,"title-zh":47},"material-symbols:palette","design-system",[20,49,50],{},"視覺 token、元件規格與 design pattern",[37,52,55],{"icon":53,"title-en":54,"title-zh":54},"material-symbols:lightbulb","design",[20,56,57],{},"新功能發想與過去的設計決策紀錄",[20,59,60],{},"建立的過程中，也搭配開發了幾個對應的 Skill，分別負責訪談沉澱知識、導覽知識庫內容、把元件規格整理成標準文件，以及引導設計探索。",[20,62,63],{},"目前已經把產品知識庫建置完整，正在著手處理 design system 的元件規格與 design pattern 盤點，後續將進一步實驗讓 AI 直接參與設計產出的工作流 🧪",[65,66],"hr",{},[20,68,69],{},"本篇內容持續補充中。",[71,72,73,77,80,83,87,90,107,110,113,115],"en",{},[15,74,76],{"id":75},"every-ai-design-discussion-meant-re-explaining-the-product","Every AI design discussion meant re-explaining the product",[20,78,79],{},"Using AI to assist with design meant starting from zero every time. It didn't know the product logic, the component rules, or the UI patterns the team already relied on, and the proposals it gave often drifted from how the product actually worked.",[20,81,82],{},"Instead of re-explaining the same context over and over, I started documenting that knowledge in a structured format AI could read on its own before joining the discussion.",[15,84,86],{"id":85},"documenting-the-knowledge-step-by-step","Documenting the Knowledge, Step by Step",[20,88,89],{},"The knowledge base has three parts:",[33,91,92,97,102],{"cols":35},[37,93,94],{"icon":39,"title-en":40,"title-zh":40},[20,95,96],{},"Business logic, process rules, and other product knowledge",[37,98,99],{"icon":46,"title-en":47,"title-zh":47},[20,100,101],{},"Visual tokens, component specs, and design patterns",[37,103,104],{"icon":53,"title-en":54,"title-zh":54},[20,105,106],{},"New feature ideas and past design decisions",[20,108,109],{},"Building it also meant building a few matching Skills: interviewing to capture knowledge, navigating the knowledge base, turning component specs into standardized docs, and guiding design exploration.",[20,111,112],{},"The product knowledge layer is fully built. I'm now working through the design system's component specs and pattern inventory, and the next step is experimenting with having AI take a more active role in producing design output 🧪",[65,114],{},[20,116,117],{},"This page is a living document and will keep updating as the project progresses.",{"title":119,"searchDepth":120,"depth":120,"links":121},"",2,[122,123,124,125],{"id":17,"depth":120,"text":18},{"id":28,"depth":120,"text":28},{"id":75,"depth":120,"text":76},{"id":85,"depth":120,"text":86},"\u002Fimages\u002Fworks\u002Fai-design-system-assistant\u002Fcover.webp",[128,135,142],{"label":129,"value":132},{"zh":130,"en":131},"角色","Role",{"zh":133,"en":134},"設計師（系統設計與知識庫建構，獨立進行）","Designer (System Design and Knowledge Base Construction, Independent)",{"label":136,"value":139},{"zh":137,"en":138},"狀態","Status",{"zh":140,"en":141},"進行中","In Progress",{"label":143,"value":146},{"zh":144,"en":145},"關聯產品","Related Product",{"zh":147,"en":148},"師虎來了（修繕媒合平台）","TigerMaster (repair matching platform)","md",{"zh":151,"en":152},"整理產品知識與元件規則，讓 AI 理解設計脈絡，加快設計探索的速度","Organizing product knowledge and component rules so AI understands design context and speeds up design exploration",{},true,6,"\u002Fai-design-system-assistant",{"zh":133,"en":134},{"title":159,"description":119},{"zh":6,"en":7},{"zh":6,"en":7},"ai-design-system-assistant","published",{"zh":164,"en":165},"為「師虎來了」修繕媒合平台建立分層知識庫，讓 AI 讀懂產品邏輯與元件規則後協助設計探索。專案進行中，這篇會隨進度更新。","Building a layered knowledge base for the TigerMaster repair-matching platform, so AI can read product logic and component rules and assist with design exploration. The project is in progress; this page will update as it moves forward.",[167,168,169],"Design System","AI","Process",2026,"hYPJogjXfQw1mGLSUfBBY7Jxn9UM3aU_jzaP0PA0rX0",[173,183,193,202,212],{"slug":174,"title":175,"cover":177,"tags":178,"order":182},"morph-inspect",{"zh":176,"en":176},"Morph Inspect","\u002Fimages\u002Fworks\u002Fmorph-inspect\u002Fcover.webp",[168,179,180,181],"B2B","Mobile","Web",1,{"slug":184,"title":185,"cover":187,"tags":188,"order":120},"spin-the-wheel",{"zh":186,"en":186},"Spin The Wheel","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fcover.webp",[189,190,191,192],"UX","Eng","Wearable","Connect IQ",{"slug":194,"title":195,"cover":198,"tags":199,"order":201},"tiger-master",{"zh":196,"en":197},"師虎來了(修繕媒合平台)","TigerMaster Repair Matching Platform","\u002Fimages\u002Fworks\u002Ftiger-master\u002Fcover.webp",[189,190,200,180],"B2C",4,{"slug":203,"title":204,"cover":206,"tags":207,"order":211},"yodewang-rebuild",{"zh":205,"en":205},"yodewang.com","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fcover.webp",[208,209,210,168],"Portfolio","Design","Dev",5,{"slug":161,"title":213,"cover":126,"tags":214,"order":155},{"zh":6,"en":7},[167,168,169],1782970325452]