Figma → HTML

Figma → HTML

Design Link တစ်ခုတည်းဖြင့် Clean HTML/CSS ရယူနည်း

Cursor AI ၏ Model Context Protocol (MCP) ဖြင့် Figma ကို ချိတ်ဆက်ကာ Semantic HTML နှင့် Responsive Tailwind CSS ကို မိနစ်ပိုင်းအတွင်း ထုတ်ယူနိုင်သော 100% Free community masterclass ဖြစ်ပါသည်။

သင်တန်းအကြောင်း

10x Development Speed

Manual UI မရေးဘဲ Figma Link ထည့်သွင်းရုံဖြင့် AI က layout နှင့် style ကို ရေးသားပေးမည်။

MCP Integration

LLM ကို Figma API နှင့် တိုက်ရိုက်ချိတ်ဆက်သော MCP architecture ကို ကိုယ်တိုင် တပ်ဆင်နိုင်မည်။

Clean & Responsive

Semantic tags၊ Tailwind utility နှင့် responsive flex/grid ကုဒ်ကို ထုတ်ယူနိုင်မည်။

မည်သူတို့အတွက် ဖြစ်ပါသနည်း

  • Frontend / Web အခြေခံရှိသူ
  • Figma အသုံးပြုတတ်ပြီး ကုဒ်ကို မြန်ဆန်စွာ ရယူလိုသူ
  • Cursor AI ကို စတင်အသုံးပြုမည့်သူ
  • Design → Dev handoff အချိန်ကို လျှော့ချလိုသူ

သင်ရိုးညွှန်းတမ်း

စုစုပေါင်း နာရီဝက်ခန့် (30 mins) — Module ၅ ခု

MODULE 01

Cursor AI & Figma MCP Workflow

5 mins

Figma → Code လုပ်ငန်းစဉ် ပြောင်းလဲပုံ၊ MCP mental model နှင့် Figma Link data flow ကို လေ့လာပါမည်။

  • Traditional vs AI-driven workflow
  • MCP ဆိုသည်မှာ အဘယ်နည်း
  • Cursor Agent → Figma data ဖတ်ယူပုံ
MODULE 02

Figma Token & Cursor MCP Config

8 mins

PAT ရယူခြင်း၊ MCP server တပ်ဆင်ခြင်းနှင့် connection test လုပ်ဆောင်နည်းကို လေ့လာပါမည်။

  • Figma Personal Access Token
  • Figma MCP Server (npx)
  • .cursor/mcp.json setup
  • Diagnostics & green status
MODULE 03

Figma Design AI-Ready ပြင်ဆင်ခြင်း

5 mins

AI တိကျမှု မြှင့်တင်ရန် Auto Layout၊ naming နှင့် assets ပြင်ဆင်နည်းကို လေ့လာပါမည်။

  • Auto Layout → Flex/Grid
  • Semantic layer names
  • SVG / image export ready
MODULE 04

Figma Link → HTML/CSS Generate

7 mins

Composer တွင် URL ပေးခြင်း၊ prompt ရေးသားခြင်းနှင့် preview စစ်ဆေးခြင်းကို လေ့လာပါမည်။

  • File link / node-id ပေးသွင်းနည်း
  • Ready-made prompts
  • Live preview & iterate
MODULE 05

Refine, Responsive & Deploy

5 mins

Breakpoint ချိန်ညှိခြင်း၊ visual QA နှင့် Vercel / GitHub Pages တင်ခြင်းကို လေ့လာပါမည်။

  • Mobile / tablet breakpoints
  • Figma vs page visual QA
  • Free hosting deploy

Slide 1 / 5

01 · Overview

Figma URL ပေးရုံဖြင့် HTML & Tailwind

MCP ဖြင့် Figma tree ကို ဖတ်ယူကာ pixel-close HTML/CSS ထုတ်ယူပုံကို အဆင့်ဆင့် သင်ကြားပေးပါမည်။

Step 1
Copy URL
Step 2
MCP Fetch
Step 3
AI Writes
Step 4
Live Page
02 · MCP

MCP ဆိုသည်မှာ အဘယ်နည်း

AI model ကို Figma / GitHub စသည့် external tools ၏ live data ကို တိုက်ရိုက်ဖတ်ယူနိုင်အောင် ချိတ်ဆက်ပေးသော standard protocol ဖြစ်ပါသည်။

// Cursor Composer Workflow
1. User: "Convert figma.com/… to Tailwind HTML"
2. Cursor → Figma MCP Server
3. MCP → Figma REST API (layer tree + tokens)
4. LLM → index.html
03 · Figma Prep

AI အတွက် Figma ပြင်ဆင်နည်း

Auto Layout

Flex/Grid class မှန်ကန်စွာ ရရှိအောင် AI က ဖတ်ယူနိုင်မည်။

Layer names

Navbar, Hero, Footer → semantic HTML tags အဖြစ် မြေပုံဆွဲနိုင်မည်။

Color & text styles

Tokens → Tailwind / CSS variables သို့ ပြောင်းလဲနိုင်မည်။

SVG icons

Export-ready icons ကို MCP က ထုတ်ယူနိုင်မည်။

04 · Prompt

Composer Prompt ပုံစံ

CURSOR COMPOSER Cmd / Ctrl + I

"Please read the Figma frame from this link: https://www.figma.com/design/XXXXX?node-id=1-2 via Figma MCP. Generate a single-file responsive index.html using Tailwind CSS (CDN). Use semantic tags and smooth hover states. If Figma MCP cannot be read, STOP — do not guess HTML; report the error."

05 · Close

သင်တန်းရလဒ်နှင့် နိဂုံး

Design မှ Live page အထိ မိနစ်ပိုင်းအတွင်း လုပ်ဆောင်နိုင်သော 2026 AI workflow ကို ကျွမ်းကျင်နိုင်ပါမည်။

ယခုပင် စတင် လေ့ကျင့်လိုက်ပါ

Requirements tab ရှိ checklist ကို ပြီးဆုံးအောင် လုပ်ဆောင်ပြီး live demo စမ်းသပ်ပါ။

လိုအပ်ချက်များနှင့် Setup

သင်တန်းမတက်မီ ပြင်ဆင်ရမည့် tools၊ accounts နှင့် skills — checklist နှိပ်၍ ခြေရာခံနိုင်ပါသည်။

MCP Limits & Access (အရေးကြီး)

Figma official docs ↗
Plan / Seat MCP tool calls
Starter (Free) · View / Collab တစ်လလျှင် ၆ ကြိမ်အထိ
Dev / Full · Professional / Organization တစ်နေ့လျှင် ~၂၀၀ ကြိမ် (+ per-minute cap)
Dev / Full · Enterprise တစ်နေ့လျှင် ~၆၀၀ ကြိမ် (+ per-minute cap)
  • Accept မရပါက ခေါ်ဆို၍ မရပါ — Cursor MCP ချိတ်ဆက်စဉ် Figma browser OAuth တွင် Allow / Accept လုပ်မှသာ tool ခေါ်ဆိုနိုင်ပါသည်။ ပယ်ချခြင်း သို့မဟုတ် ပိတ်ထားပါက MCP red သို့မဟုတ် auth error ဖြစ်နိုင်ပါသည်။
  • File ကို view မရသေးပါက / invite မလက်ခံရသေးပါက MCP fetch မရရှိပါ။
  • Free course အကြံပြုချက် — demo frame တစ်ခုတည်း၊ node-id တိကျစွာ၊ တစ် prompt = တစ်ခေါ် ဆိုသည့်ပုံစံဖြင့် လစဉ် ၆ ကြိမ်ကို ချွေတာအသုံးပြုပါ။

ကိန်းဂဏန်းများကို Figma က ပြောင်းလဲနိုင်ပါသည်။ အမှန်ကန်ဆုံးအချက်အလက်မှာ official rate-limits စာမျက်နှာ ဖြစ်ပါသည်။

Tools & Accounts

Skills (အနည်းဆုံး)

  • HTML semantic tags အခြေခံ
  • CSS Flex/Grid သို့မဟုတ် Tailwind အမည်မှတ်သားမှု
  • Figma frames / Auto Layout အခြေခံ
  • English prompt အတိုအရှည် ရေးသားနိုင်ခြင်း

မလိုအပ်သေးပါ

React/Vue၊ backend — Free ဖြင့် စမ်းသပ်နိုင်သော်လည်း ၆ ကြိမ်/လ ကန့်သတ်ရှိပါသည်။

MCP Config အဆင့်ဆင့်

  1. 1

    Figma MCP ချိတ်ဆက်ခြင်းနှင့် Accept

    Cursor Settings → MCP → Figma ထည့်သွင်းပါ။ Browser OAuth ပေါ်လာပါက Allow / Accept လုပ်ပါ။ Accept မရသေးပါက tool call မရရှိပါ။

    အကြံပြုချက် (official remote):

    {
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
  2. 2

    သို့မဟုတ် PAT + local/npx (optional)

    Figma → Settings → Security → PAT။ Project .cursor/mcp.json:

    {
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "YOUR_FIGMA_PERSONAL_ACCESS_TOKEN_HERE"
      }
    }
  }
}
  3. 3

    Prompt ဖြင့် generate (call ချွေတာရန်)

    Composer (Cmd/Ctrl + I) — Free သုံးပါက တစ် frame / တစ်ခေါ် စဉ်းစား၍ paste ပါ။

    RECOMMENDED PROMPT

    Using the Figma MCP server, analyze this Figma URL: [PASTE_YOUR_FIGMA_FILE_URL_HERE]. Fetch the layer tree and layout specifications. Generate a clean, responsive single-file index.html using HTML5 semantic tags and Tailwind CSS. Ensure all components match the padding, fonts, and colors from Figma. IMPORTANT: If you cannot access or read the Figma MCP tools / design data (auth failed, MCP unavailable, rate limit, or fetch error), STOP immediately. Do NOT invent HTML from guesswork. Reply clearly that Figma MCP could not be read and state the error reason.

အဖြစ်များသော ပြဿနာများ

  • Accept မရ / auth pending — browser OAuth ပြန်ဖွင့်ပါ၊ Allow နှိပ်ပါ၊ Cursor MCP ကို restart လုပ်ပါ။
  • Rate limit (၆/လ ကုန်) — လစဉ် quota ပြည့်ပါက Dev/Full seat သို့ ပြောင်းပါ သို့မဟုတ် နောက်လ စောင့်ပါ · မလိုအပ်ဘဲ ထပ်ခေါ်ခြင်း မပြုပါနှင့်။
  • MCP red / failed — Node/PAT စစ်ဆေးပါ၊ remote URL မှန်ကန်မှု စစ်ပါ၊ Cursor ကို restart လုပ်ပါ။
  • Empty / wrong layout — Auto Layout နှင့် layer names ပြင်ဆင်ပါ၊ node-id တိကျစွာ ကူးယူပါ။
  • 403 / no access — file invite ကို Accept လုပ်ပါ သို့မဟုတ် ကိုယ်ပိုင် file အသုံးပြုပါ။
made by NexSkill