在 Canva Create 2025 大會上，Canva 將其產品擴充套件到了新的領域： 人工智慧驅動的工具、企業功能，以及首次為開發者提供的工具。其中最大的更新包括對 Magic Media、AI 影片編輯、即時協作和全新品牌管理套件的改進。但最大的驚喜是 Canva Code，它為 Canva 的拖放設計工具增加了程式碼編輯器。有了 Canva Code，設計師和開發人員可以更輕鬆地合作。您可以用視覺方式設計東西，然後直接編輯程式碼。這反映了一個更大的趨勢：低程式碼和無程式碼工具讓每個人，而不僅僅是開發人員或設計師，都能更容易地使用程式碼。
什麼是Canva Code？
Canva Code 是 Canva 內建的程式碼編輯器，您可以使用 HTML、CSS 和 JavaScript 等熟悉的語言編輯應用程式或設計的邏輯、結構和行為。它不只是從您的設計中生成模板程式碼，您還可以手動微調佈局、連線 API 和新增互動性。可以把它看作是 Figma 的開發模式、Webflow 的視覺化程式碼理念和輕量級 VS Code 環境的融合，而所有這些都在 Canva 的介面中。
它與僅僅匯出程式碼有何不同？
傳統的設計工具可以匯出 HTML/CSS，但 Canva Code 卻可以：
- 可在 Canva 本身內部編輯
- 即時更新– 無需匯出，在其他地方編輯，然後重新匯入
- 與其他 Canva AI 工具整合
- 可透過 Canva 託管的體驗直接部署（即將推出）
這使 Canva 不再僅僅是一個設計工具，而是一個全棧創作平臺。
主要功能
設計頁面或介面後，您可以開啟“Code”選項卡並
- 檢視自動生成的程式碼
- 直接編輯 HTML/CSS
- 新增 JavaScript 函式
- 整合應用程式介面
更改會即時反映在設計中。您可以匯出專案或將其直接嵌入到網站或應用程式中。它還支援使用類命名約定和狀態邏輯進行元件級編輯。
Canva Code使用者
對於需要在一個平臺上完成設計、邏輯和部署的初創企業、個體經營者和教育工作者來說，Canva Code 尤其有價值。Canva Code 適用於混合型使用者：
- 希望控制互動和響應速度的設計師
- 希望快速製作原型的開發人員
- 希望簡化從設計到開發的流程的團隊
Canva Code如何使用人工智慧？
Canva 利用人工智慧來
- 自動生成響應式佈局
- 推薦程式碼改進
- 將設計轉換為語義清晰、易於訪問的 HTML
- 透過自然語言提示幫助除錯問題
它將類似 ChatGPT 的編碼幫助的直觀性與視覺化編輯器的結構融為一體。
如何使用Canva Code？
請按照以下步驟使用 Canva Code：
- 啟動 Canva：在瀏覽器或移動應用程式上開啟 Canva 並登入您的帳戶。
- 訪問 Canva Code：使用搜尋欄或側邊欄導航到 Canva AI。點選“Code for me”啟動編碼提示體驗。
- 輸入文字提示：鍵入您要建立的內容，例如“Create a pricing calculator for my services”或“Build a drag-and-drop quiz for kids.”。包括主題、功能或色調等細節，以獲得最佳效果。
- 使用提示進行完善：第一次沒做好？您可以繼續透過人工智慧聊天來調整小工具。請 Canva Code 調整佈局、更改行為或改進樣式。
- 整合與共享：一旦您滿意了，就可以使用“Use in a design”按鈕將您的小工具新增到其他 Canva 設計中。您還可以將其作為獨立網站釋出或匯出程式碼。
使用Canva Code構建應用程式
目前，只有部分使用者可以使用這一編碼功能。下面舉例說明人們如何利用這些功能發揮自己的優勢。
1. 二年級學生的閃卡遊戲
提示詞：I would like to create a flash card game for addition and subtraction facts for 2nd grade students.
Source: X (Coleman Brown)
2. 待辦事項應用
提示詞：Build me a to-do list app with a fun UI.
Source: X(@mikeagonz)
3. 價格計算器
提示詞：I want to create a custom calculator that helps clients understand the different prices I charge for my illustration work.
Source: X (Adam)
Canva Code vs Windsurf vs Cursor
| 功能 | Canva Code | Windsurf | Cursor |
|---|---|---|---|
| 設計工具內建 | ✅ Yes | ❌ No | ❌ No |
| AI程式碼建議 | ✅ Yes | ✅ Yes | ✅ Yes |
| 視覺化程式碼編輯 | ✅ Yes | ❌ No | ❌ No |
| 完整的整合開發環境功能 | ❌ Light | ✅ Yes | ✅ Yes |
| 協作優先 | ✅ Yes | ✅ Yes | ✅ Yes |
| 針對設計師 | ✅ 初級 | ❌ 開發者優先 | ❌ 開發者優先 |
| 部署 | ⏳ Coming soon | ❌ No | ❌ No |
推薦閱讀
Canva Create 2025推出的其他功能
在Canva Create 2025上，推出了幾項令人興奮的功能和更新，增強了平臺的設計能力，擴大了平臺的覆蓋範圍。以下是主要公告的概覽：
| 特徵 | 描述 |
|---|---|
| 即時協作 | Canva 引入了增強的團隊協作功能，允許多個使用者即時處理同一個設計，使團隊協作比以往更加順暢。 |
| 三維設計和動畫工具 | 他們增加了新的 3D 設計功能，使使用者能夠建立身臨其境的動態內容。動畫功能的整合實現了從靜態設計到互動式視覺效果的無縫過渡。 |
| 改進品牌管理 | 品牌中心現在允許企業管理徽標、顏色和字型，從而在不同的設計中建立更加一致和連貫的品牌體驗。 |
| 擴充套件模板庫 | 模板大幅擴充套件，從專業簡報到社交媒體圖形，讓使用者更容易為任何專案找到合適的風格。 |
| Canva 影片套件 | 影片編輯功能大幅升級，可以更輕鬆地修剪、剪下和分層影片片段，新增音樂等，使其成為一款完整的影片創作工具。 |
| Canva 助手 | 由人工智慧驅動的設計助手，可在設計過程中提供有用的提示和建議，在整個創作過程中充當智慧嚮導。 |
小結
Canva Code 標誌著我們對設計和開發工作流程的思考發生了大膽的轉變。它彌補了長期以來存在於“好看”與“好用”之間的鴻溝。在人工智慧代理與我們共同構建的世界裡，像 Canva Code 這樣的工具將權力交還給了混合型創造者，即設計者和開發者。隨著設計工具成為編碼工具，無程式碼和全程式碼之間的界限變得更加模糊。無論您是獨立創作者，還是尋求快速原型開發的全棧開發人員，Canva Code 都值得一試。
評論留言