即時示範
這個真實的例子展示了 Craft 文件和 Lovable 應用程式的樣子:
展示版已停用寫入操作
使用 Craft, Lovable和ChatGPT 或 Claude 打造
自己動手打造
在這個例子中,我們將使用 Craft 來記錄個人夢境。我們將建立一個小型 Web 應用程式來記錄我們的夢境,然後讓 ChatGPT 或 Claude 為每個夢境添加解讀。
步驟 1 — 建立你的文件
我們的夢境日記文件非常簡單:只要把每個新的夢境加在最上面,用日期當標題,下方附上一些額外資訊。
使用範本為你的夢境日記建立新文件:
步驟 2 — 啟用 API 存取
為你的文件啟用 API 存取,以取得可用於讀取和新增文件內容的唯一 URL,例如透過我們將在下方建置的網頁應用程式。
步驟 1
步驟 2
步驟 3
步驟 4
步驟 5
步驟 6
步驟 3 — 以 Lovable 為基礎
現在讓我們繼續在 Lovable 上建立儀表板的實際網站。對於上面顯示的範例網站,我們使用了以下提示:
我正在建立一個夢境日記來記錄和分析我的夢境。
這些資訊儲存在 Craft 中。請查看附件,其中展示了我的 Craft 文件的當前狀態範例,以及你應該用來儲存我的夢境的 API 資訊。
我希望你建立一個網站,其中顯示一個輸入表單,用於記錄我的夢境和睡眠品質。
該網站應在中心顯示一個表單,其中包含一個用於調節睡眠品質的滑桿(從非常差到非常好)。在滑桿上方,每個品質等級都應該有一個表情符號,會隨著滑桿移動而更新。下方應該有一個文字輸入框來輸入夢境內容。
設計應該平靜柔和。使用沉穩的色調和圓角造型,背景為柔和的漸層色。
前往 Lovable 並將提示貼到提示框中。請務必附上我們剛剛下載的文件 AI Bundle。
Lovable 開始工作,分析 bundle 的內容,了解文件結構以及如何使用 API。然後,它開始根據我們的提示建立網站。
現在我們有了一個漂亮的網站,可以用來把夢境加入我們的夢境日記!如果你願意,可以把這個網頁應用程式儲存到主畫面上,這樣每天早上就能快速造訪了。
步驟 4 — 啟用 MCP 存取
為你的文件啟用 MCP 存取,以取得唯一的 URL,AI 用戶端可以使用它來讀取和新增你的文件內容:
步驟 1
步驟 2
步驟 3
步驟 4
步驟 5
步驟 5 — 設定 MCP 連接
現在讓我們使用 MCP URL 從用戶端連接到文件:
步驟 1
步驟 2
步驟 3
步驟 4
要了解更多信息,請查看 Claude 的文檔:“ 使用遠端 MCP 的自訂連接器入門 ”。
步驟 6 — 開始與你的文件互動
現在你可以要求 Claude 查看我們的夢境日記,並為最新的夢境添加解讀:
點擊範例即可將提示複製到剪貼簿








