返回 45 堂課程總表
C37 / 45LAYER 2 · 一杯咖啡價
🤖 零 Coding Claude Code × MCP × n8n20 分鐘實戰落地Figma MCPClaude CodeTailwind CSSCloudflare
【Figma MCP 一鍵出網頁】Figma MCP × Claude 實戰：將設計稿 10 分鐘直接變成可上線高轉化 Landing Page
搜尋主題：Figma MCP 教學（2026）：駁通 Claude Code 一鍵將 Figma 設計稿變成真實響應式網頁
徹底打通設計與上線最後一里路！唔使再求前端工程師慢慢切圖，直接開啟 Figma 官方 Dev Mode MCP Server，令 Claude 1:1 讀明色碼、間距與字體直出生產級網頁。
C37 · 3 秒社群導流動畫分鏡預覽台
BEAT 01 · 0.0s – 1.0s · 黃金頭一秒停指衝擊
「以前喺 Figma 畫完靚稿，搵人寫成真網站要等兩星期收你萬五蚊；而家開個 Figma MCP 開關，Claude 10 分鐘 1:1 幫你變出真網頁直接上線！」
畫面重點：高反差動作特寫 ＋ 醒目黑框黃底大字幕（工具：Figma MCP / Claude Code / Tailwind CSS / Cloudflare）
點解大部份人喺呢一步卡關？
純截圖餵俾 AI 寫網頁永遠走晒樣、字體大細錯晒；搵外判切圖又貴又慢，改隻字都要排期。
解鎖後即拎即用資產清單
- 《Figma MCP 零錯位連線配置 JSON》
- 《高轉化課程 / 服務銷售頁 Figma → Next.js 轉換指令模板》
📋 本堂 4 步實戰執行大綱
- 013 分鐘開啟 Figma Desktop 內置 MCP Server 並連線至 Claude Desktop / Claude Code
- 02Figma 圖層命名與 Auto-Layout 小技巧：令 AI 100% 讀準手機版與電腦版響應式排版
- 03選中 Figma 畫布任何一個區塊（Copy Link to Selection），一句指令直出乾淨 Tailwind + Next.js 組件
- 04一鍵部署上 Cloudflare Pages / Workers 免費綁定自己獨立域名
LAYER 2 · 一杯香港精品咖啡價 HK$48 / 月
解鎖本堂自動化 Workflow 步驟、配置檔與共 30 堂實戰課
只係一杯咖啡價錢，直接搬走批量 Reels 腳本、鎖死角色動畫、Figma MCP 與 n8n 工作流。隨時一鍵取消。
NEXT ACTION · 下一步行動建議
有埋高轉化銷售頁之後，即睇 C38 用 NotebookLM 廣東話雙人 Podcast 建立深度專業信任！
上一堂（C36）【批量爆片 Workflow】零露臉 15 分鐘批量產出 10 條廣東話 Reels 導流短片（Seedance 2.5 × ElevenLabs × FFmpeg）下一堂（C38） 【NotebookLM 廣東話 Podcast 吸粉線】3 分鐘將行業報告與長文變成地道廣東話雙人對談 Podcast 專欄
VIP 1-ON-1 MENTORSHIP（審核制・不設公開 WhatsApp）
申請 1-on-1 陪跑 →想將呢堂技術直接變成你公司嘅自動收錢流水線？
填寫 2 分鐘生意現況診斷表，符合資格者將由 Herman 親自審核並安排一對一陪跑方案。