本論文提出了一個線上AI輔助教育系統,採用MIAT系統設計方法論,使用IDEF0將網站功能進行模組化和分解。並利用GRAFCET圖形化工具建立每個功能模組的行為模型,隨後透過AI工具協同合成程式碼,並將其整合到本系統中。在實驗中,我們透過功能驗證,確認了各模組在實際操作中的順利運行,同時驗證了AI工具所生成的程式碼在這個架構中的適用性。進一步證明了本論文所採用的MIAT方法論和AI工具在網站開發中的高效率、易於協同開發和維護的特性。;This paper proposes an online AI-assisted education system that adopts the MIAT system design methodology. The IDEF0 technique is utilized to modularize and decompose the website functionalities. Furthermore, the GRAFCET graphical tool is employed to establish behavioral models for each functional module. Subsequently, AI tools are employed to collaboratively synthesize the code, which is then integrated into the system.Through functional validation in experiments, the smooth operation of each module in practical scenarios was confirmed. Additionally, the suitability of the code generated by the AI tools within this framework was verified. These findings further substantiate the efficacy, ease of collaborative development, and maintenance of the MIAT methodology and AI tools employed in website development.