Communitygithub.com

loganngarcia/framer-chatbot

使用迷你應用程式、文件和白板建立作品集網站。當被問及「作品集」、「展示我的作品」、「作品集網站」、「設計作品集」、「專案作品集」或「建立我的作品集」時使用。

framer-chatbot 是什麼?

此技能引導學生使用 Curastem 的內建工具(文件編輯器、白板和迷你應用程式建構器)建立專業作品集。它提供完整的工作流程,從使用白板規劃作品集結構、使用文件編輯器撰寫內容,到使用迷你應用程式建構器生成可互動的作品集網站。此技能支援所有要求建立作品集的學生,無論是為了求職、實習申請,還是展示設計、編碼或創意作品。生成的應用程式遵循 Curastem 的設計準則,包括深色背景、統一間距和新野蠻主義風格,並且完全響應式,確保良好的使用者體驗。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/loganngarcia/framer-chatbot/tree/HEAD/skills/create-a-portfolio

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

建立作品集

引導學生使用 Curastem 的內建工具建立專業作品集。Curastem 提供三種您必須使用的核心功能:用於書面內容的文件編輯器 (update_doc)、用於視覺規劃的白板 (update_whiteboard),以及用於互動作品集網站的迷你應用程式建構器 (create_app)。

要使用的 Curastem 工具

1. 文件編輯器 (update_doc)

用於草擬作品集文案、關於我部分、專案描述和聯絡資訊。文件支援完整 HTML:標題、列表、連結、粗體、斜體。非常適合在將文字移至作品集應用程式之前進行撰寫和編輯。

2. 白板 (update_whiteboard)

用於規劃作品集結構:區塊的心智圖、使用者旅程的流程圖、佈局的線框草稿。建立視覺化圖表,顯示首頁 → 專案 → 關於我 → 聯絡的流程。幫助學生在建立之前進行組織。

3. 迷你應用程式建構器 (create_app)

用於產生一個可運作的作品集網站。輸出一個包含嵌入 CSS 和 JavaScript 的單一 HTML 檔案。必須包含:專案卡片、導覽列、關於我部分、聯絡表單或連結。遵循 Curastem 應用程式準則:#141414 背景、48px 上邊距、右下角的 Curastem.org 標籤、新野蠻主義或現代 28px 圓角、所有互動元素上使用唯一的 ID。

何時使用

  • 學生想要為求職或實習申請建立作品集
  • 學生需要展示設計、編碼或創意作品
  • 學生詢問作品集結構、平台或最佳實踐
  • 學生想要對現有作品集尋求回饋,或從頭建立一個

工作流程

  1. 規劃 — 使用白板規劃作品集區塊和結構
  2. 草稿 — 使用文件編輯器撰寫關於我文字、專案描述和聯絡資訊
  3. 建立 — 使用 create_app 產生一個學生可以檢視並迭代的互動作品集網站

關鍵指導

  • 建議結構:英雄區、專案(含描述)、關於我、聯絡
  • 強調清晰度、包含成果的專案案例研究,以及易於聯絡的方式
  • 對於 create_app:確保行動裝置響應式佈局、可存取的按鈕、連結在新分頁中開啟
  • 迭代:學生可以在 refine 過程中要求對應用程式、文件或白板進行修改

相關技能