DESIGN設計部 - 大業 / Chris
Figma AIFramer
1. Framer 對應未來行銷網頁需求，從設計、製作到發佈在同一個平台完成。
2. 透過內建 AI 生成元件與完整網頁
3. 整合設計與開發流程。
AI DEVELOPMENT / TEAM 02
從AI工具試用 邁向AI開發工作流
AI 發展應用二組｜8 月小組成果
把各自的工具經驗，逐步整理成可討論、可驗證、可落地的開發方式。
01 / RESEARCH DIRECTION
相關工具研究體驗
－共同指向更順的協作
INFORMATION資訊部-Aniki
Claude
ChatGPT
v0(Vercel)
GitHub Copilot
Relume
將進行co-work+Agent的工作流研究：
1. 初期開發，以AI工具處理比較不需技術性的雜物，進行試錯與熟悉。
2. 紀錄AI輔助的優缺、時效、品質的比較紀錄。
3. 將自動化有助益的方式代入實務，經驗分享。
4. 共同制定AI產出文件與頁面的規範訂定
INFORMATION資訊部-Nicolas
Claude
ChatGPT
v0(Vercel)
Gemini
1. 觀察同一個問題對於不同 AI 模型的處理方式。
2. 觀察文件與程式碼處理上，對於不同 AI 模型的處理方式。
3. 研究 AI 還能為專案開發與管理上縮短到多少程度，且符合個人的開發模式與風格。
INFORMATION資訊部-Xuan
GitHub Copilot
Figma AI (Make)
ChatGPT
1.表格UI套件可否從設計規範MD檔，配合表格UI套件現成的CSS和網站架構共用元件庫做組合 (視覺設計產出/如何定義具有邏輯的元件需求/套件組合)
2.交付設計檔案如何用AI紀錄
02 / CO-WORK + AGENT
先讓 AI 處理雜物，
成熟後把有效做法導入團隊
01
初期開發
處理較不需技術性的雜務，快速試錯與熟悉工具。
02
留下紀錄
比較 AI 輔助前後的優缺、時效與品質。
03
提煉方法
思考哪些方式能進入整體開發模式與個人風格。
04
訂出規範
建立 AI 產出文件與頁面的格式、品質標準。
03 / OBSERVATION QUESTIONS
研究不只比較工具，
更需鑽研的事「解題方式」
相同請求的處理方式
觀察不同 AI 模型如何理解、拆解並處理同一個問題。
MODEL COMPARISON文件與程式碼
模型在文件與程式碼處理上的差異與適用情境。
不同格式檔案實務上的應用差異。
DOCUMENT + CODE縮短開發距離
研究 AI 能將專案開發與管理縮短到什麼程度，同時保留個人風格。
PERSONAL WORKFLOW04 / RESEARCH CASES
自動化範例，讓抽象的效率變成可交付成果
電子報定期更新
以指令完成固定更新作業，將可自動化的流程交給 AI，保留時間投入中大型專案。
AUTOMATION前端環境與說明檔
以 AI 生成 Markdown、HTML，藉由公版規範限制結構與書寫習慣，讓 DEMO 可控。
MARKDOWN + HTML功能頁面交接文件
以 AI 生成 docx，探索獨立功能頁面如何被清楚交接與延續。
DOCX HANDOFF05 / AUGUST TARGET
接下來的方向與計畫
．前端討論並制定公版專案結構。現階段工作流：視覺稿 ← 切版 → 套版 → 前端互動程式
．行銷案例進行時嘗試與設計師協作，優化設計與前端的銜接。
．將初版提交給架構小組，評估後端是否需要補充，讓前端規範能接上完整專案。
．逐步導入公版規範的文件，實際與工程師協作磨合，收集使用回饋做為調整依據。
．專案模板：README + 目錄結構 + 基礎組件。
．累積案例庫：成功/失敗樣本與可重用 prompt。
NEXT / MAKE IT REPEATABLE
好的 AI 實作經驗，
經過不斷的記錄與比較，
打造能自動化的流程。
AI 發展應用二組｜研究方向與 8 月成果
讓每次嘗試，都成為下一次更好的起點。