影片
用 Cursor 做設計的錄播示範、demo 與分享。
完整 Cursor AI 初學者教程 (2025)
建構 React 應用、推送至 GitHub 並部署到 Vercel — 無需編碼經驗的初學者友善端到端 Cursor 教程。
如何用 AI 製作網站 — Cursor 2025
完整初學者教程,涵蓋 HTML/CSS、網域、託管和設計變更 — 使用 Cursor 建構並部署網站,無需任何程式設計經驗。
使用 Cursor MCP 轉換 Figma 設計
關於使用 Cursor MCP 整合進行 Figma 轉代碼轉換的瀏覽量最高教程 — 選擇框架並生成生產級組件。
如何使用 AI 打造精美 UI
揭秘 shadcn/ui 是 v0 優秀外觀的核心,以及如何在 Cursor 中直接使用它來構建更好看的介面。
10倍更好的 UI 設計給 Vibe Coders — 直接在 Cursor 中使用 v0
快速實用指南:在 Cursor 內直接連接 v0 模型,大幅提升 UI 品質。
在 v0 中進行 DESIGN,在 Cursor 中完成
三種工作流程,用於在 v0(一流 UI 生成)和 Cursor(邏輯和成本效益迭代)之間移動設計。
設計師的 AI 指南:為什麼這位設計師轉向使用 Cursor
Atlassian 設計總監展示在 Cursor 內直接進行複雜 UI 互動原型設計、重現動畫 SVG 品牌資產,以及製作情緒板——全部在 Cursor 中完成。
Cursor 互動原型、聲音設計與數據可視化
設計師 Elizabeth Lin 探討設計美學——粗野主義、Y2K、賽博龐克——互動聲音設計,以及如何使用 Cursor 將醜陋的儀表板轉變為精美介面。
Cursor 設計師工作坊(完整版)
完整的設計師導向工作坊,涵蓋 Agents 視窗、Figma MCP、Canvas UI 渲染器、Design Mode 瀏覽器調整和 Plan Mode — 從零開始構建預算應用。
全新視覺編輯器:直接在程式碼庫中設計
Cursor 官方視覺編輯器示範:選擇元素、拖放重新排列版面配置、使用對齊控制項置中 div、從設計系統交換字體和顏色代幣,以及調整網格版面配置 — 代理程式將每項變更直接應用到程式碼庫。
Cursor 的新視覺編輯器是 Figma 殺手嗎?教學
一個教學將 Cursor 的視覺編輯器與 Figma 進行對比 — 它在將設計實現為真實程式碼方面的優勢,以及與完整設計工具相比仍有的不足之處。
Cursor 視覺編輯器 — 以視覺方式修改佈局
Gary Simon 對 Cursor 視覺編輯器的實踐演練 — 讚賞佈局、尺寸和樣式控制,並指出每次 Apply 都會觸發 LLM 呼叫的權衡。