---
tags: design
---

# 用 Figma 直接造網站？！用開源的 MCP Server 玩玩看！

## 🏷️ 專案名稱
🚀 **零時設計坊 g0v design**

## 📌 專案簡介
**零時設計坊**是一個極度臨時的設計實驗場，在這裡，我們嘗試利用 **MCP（Model Context Protocol）**，透過 AI 模型與工具，讓設計師能夠**直接從 Figma 生成網站**。本次專案不開發新工具，而是利用開源解決方案，探索 AI 參與設計與開發的可能性。

## 🎯 目標
- **體驗 MCP**：讓參與者了解 Model Context Protocol 如何讓 AI 模型協作。
- **即時設計轉換**：從 Figma 設計稿直接轉換成 HTML/CSS/JS，減少前端開發成本。
- **探索 AI 助力設計**：測試 AI 如何理解 UI/UX 設計並協助生成前端程式碼。

## 🚀 進行方式
這是一場不設門檻的工作坊，參與者可以：
- 直接用 Figma 設計 UI，並讓 MCP Server 處理轉換。
- 嘗試修改轉換結果，理解 AI 生成的邏輯。
- 探索不同 AI 模型如何影響網頁結構，甚至應用於更複雜的互動設計。

**這不是純技術開發，而是設計與技術的融合實驗！**

## 🔧 需求與工具
✅ **Figma**（設計工具）
✅ **MCP Server**（使用 [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP?tab=readme-ov-file#configuration)）
✅ **AI 模型與 IDE**（可使用 Claude，或 IDE 如 Cursor、Windsurf）

## 💡 可能的延伸應用
- 探索 AI 生成的網站如何支援 **無障礙設計（Accessibility）**。
- 進一步研究 **如何讓 AI 參與 UI/UX 設計流程**。
- 將 AI 生成的前端結合 **動態框架（React/Vue）**，構建更複雜的網站。

## 🎟️ 如何加入？
- 來到 g0v 黑客松，找我們！
- 在這個共筆登記你的 Figma 設計，讓我們試試 AI 轉換的效果！

**這是一場開放實驗，無論你是設計師、工程師，還是只是單純想看看 AI 能做什麼，都歡迎來玩！🚀**