Canva AI Code

  • Canva
  •  🚀 什麼是 Canva Code?

    Canva Code 是 Canva 與 Claude 合作推出的互動網頁生成工具,讓你用自然語言就能創造互動應用!

    1️⃣ 時尚價格計算器

    為我的公司打造時尚新潮的價格計算器。請以「Clarity Studio Photography」為例(單次計價:$150-250/小時;編輯:$50/影像;相簿:$100-300)。


    然後詢問用我以下問題:我的公司名稱/產業、包含的服務/產品、可調整的定價變數、偏好的規覺風格


    請採用時尚的設計元素和完全針對動畫警告的即應式設計打造插眼的視覺效果,且不包含非功能性按鈕。

    2️⃣ 互動式 3D 太空探索遊戲

    製作互動式 3D 太空探索遊戲。從「大爆炸探索者」範例開始吧!範例中有地球、月球和火星,並具備逼真的物理效果、直覺式瀏覽控制,以及關於軌道碰撞和對恆距的教育實質資訊。


    接下來,請提出以下問題:要納入的天體、要強調的物理元素、重點教育資概念、目標受眾年齡/知識水準、互動式功能(挑戰、評量工具)

    3️⃣ 現代設計倒數計時器

    使用現代設計製作搶眼的倒數計時器。從極簡風格的範例出線呢:設定 15 分鐘冥想計時器,並搭配柔和動畫和低調的提示音,使用大膽的文字編排,搭配平靜的藍色至紫色漸層背景。


    接著,請再詢問以下問題:需要的時長範圍、視覺風格偏好、想要的計時器功能(聲音提醒、視覺效果等)、使用案例(冥想、烹飪、簡報)

    4️⃣ 互動式歷史時間軸

    建立一個互動式歷史時間軸,展示重要歷史事件。包含以下功能:

    - 時間軸可水平或垂直滾動

    - 每個事件有詳細說明彈窗

    - 可按時間段篩選顯示

    - 支援加入圖片、影片等多媒體

    - 具有搜尋功能

    5️⃣ 餐廳互動式菜單

    為我的餐廳製作互動式菜單,包含以下功能:

    - 菜品分類(主餐、前菜、甜點、飲品)

    - 每道菜有圖片、價格、描述

    - 可以點擊加入購物車

    - 顯示總計金額

    - 支援過敏原標註

    - 響應式設計適應各種螢幕

    6️⃣ 互動式閃卡遊戲

    建立互動式閃卡遊戲,具備以下功能:

    - 問題與答案配對系統

    - 翻牌動畫效果

    - 計分系統與答題紀錄

    - 可自訂問題庫

    - 多種難度選擇

    - 答對/答錯的聲音效果

    7️⃣ 五彩紙屑生日賀卡

    編寫會爆發五彩紙屑的數位生日賀卡,包含:

    - 點擊後觸發紙屑動畫

    - 可自訂生日訊息

    - 背景音樂播放

    - 3D 旋轉效果的文字

    - 可上傳照片製作個人化卡片

    8️⃣ 班級打排程活動

    為我的班級打造排序活動,包含以下功能:

    - 拖曳式排班介面

    - 多人同時排班

    - 衝突檢測機制

    - 自動時間統計

    - 導出為 Excel 功能

    - 視覺化甘特圖顯示

    9️⃣ 3D 飛行模擬器

    建立 3D 飛行模擬器,包含以下元素:

    - 第一人稱視角控制

    - 真實物理引擎

    - 地形與建築物渲染(如台北 101、故宮等)

    - 天氣變化效果

    - 速度、高度等儀表顯示

    - 起飛、降落動畫

    🔟 互動式拼圖生成器

    製作互動式拼圖生成器,功能包含:

    - 可上傳圖片自動切割

    - 拖曳組合介面

    - 完成提示動畫

    - 計時與計分功能

    - 不同難度選項(3x3, 4x4, 5x5)

    - 儲存/載入進度功能

    1️⃣1️⃣ 電子寵物模擬器

    建立一個互動式電子寵物模擬器:

    - 像素風格設計

    - 餵食、玩耍、清潔等互動

    - 情緒值與健康值系統

    - 寵物成長與進化機制

    - 多種寵物可選擇

    - 背景音效與音樂

    1️⃣2️⃣ 每日花費追蹤器

    建立一個互動個人網站,功能包含:

    - 輸入今日預算上限

    - 即時更新花費總額

    - 分類統計(餐飲、交通、娛樂等)

    - 超支警告動畫

    - 圖表視覺化呈現

    - 導出 CSV 報表功能

    1️⃣3️⃣ 英文打字射擊遊戲

    製作一款英文打字射擊遊戲:

    - 垂直捲軸射擊玩法

    - 敵機攜帶英文單字

    - 輸入正確擊毀敵機

    - 難度逐漸提升

    - 分數與連擊系統

    - 過關動畫與音效

    1️⃣4️⃣ 水果蔬菜分類遊戲

    製作水果蔬菜分類遊戲:

    - 拖曳物件至分類區

    - 答對顯示慶祝動畫

    - 答錯提示重試

    - 計分與計時功能

    - 關卡制度設計

    - 適合兒童的可愛介面

    1️⃣5️⃣ Link in Bio 頁面

    建立個人 Link in Bio 頁面:

    - 個人頭像與簡介

    - 多個社群連結按鈕

    - 最新內容展示區

    - 聯絡表單

    - 分析追蹤功能

    - 深淺模式切換

    💡 提示詞撰寫指南

    📝 有效提示詞結構

    1. 明確的目標

      • 描述要製作的應用類型

      • 說明預期功能

    2. 具體的需求

      • 列出所需功能清單

      • 描述互動方式

    3. 視覺風格

      • 色彩配置

      • 動畫效果

      • 使用者介面

    4. 技術細節

      • 響應式設計要求

      • 特殊效果描述

      • 資料處理方式

    ✨ 進階技巧

    1. 使用範例導引

      • 提供現有案例作為參考

      • 說明想要修改的部分

    2. 漸進式增強

      • 從基本功能開始

      • 逐步添加複雜特性

    3. 錯誤預防

      • 描述可能的錯誤情況

      • 要求加入錯誤處理

    ⚠️ 注意事項

    1. 限制性

      • 無法直接存取外部資料庫

      • 嵌入媒體可能受限

      • 無直接程式碼輸出

    2. 最佳實踐

      • 中文提示失敗時改用英文

      • 描述越詳細效果越好

      • 適時使用視覺化描述

    🎯 結語

    Canva Code 讓創作變得觸手可及,只要用自然語言描述你的想法,AI 就能幫你實現!趕快試試這些提示詞,創造屬於你的互動應用吧!🚀


    沒有留言:

    張貼留言

    powershell

     #----------------------------------------