釦子 Coze 產品體驗功能 Detail - 前端,React 袋鼠雲數棧前端 Blog

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。

本文作者：長路

認識釦子

文本介紹

釦子是新一代 AI Agent 開發平台。無論你是否有編程基礎，都可以在釦子上快速搭建基於大模型的各類 AI 應用，並將 AI 應用發佈到各個社交平台、通訊軟件，也可以通過 API 或 SDK 將 AI 應用集成到你的業務系統中。

釦子能做什麼？ 藉助釦子提供的可視化設計與編排工具，你可以通過零代碼或低代碼的方式，快速搭建出基於大模型的各類 AI 項目，滿足個性化需求、實現商業價值。

智能體：智能體是基於對話的 AI 項目，它通過對話方式接收用户的輸入，由大模型自動調用插件或工作流等方式執行用户指定的業務流程，並生成最終的回覆。智能客服、虛擬伴侶、個人助理、英語外教都是智能體的典型應用場景。
應用：應用是指利用大模型技術開發的應用程序。釦子中搭建的應用具備完整業務邏輯和可視化用户界面，是一個獨立的 AI 項目。通過釦子開發的應用有明確的輸入和輸出，可以根據既定的業務邏輯和流程完成一系列簡單或複雜的任務，例如 AI 搜索、翻譯工具、飲食記錄等。

為什麼選擇釦子？

靈活的工作流設計：拖拉拽的方式快速搭建一個工作流
無限拓展的能力集：包含插件
豐富的數據源：簡單易用的知識庫功能來管理和存儲數據
持久化的記憶能力：提供了方便 AI 交互的數據庫記憶能力，可持久記住用户對話的重要參數或內容。創建一個數據庫來記錄閲讀筆記，包括書名、閲讀進度和個人註釋。有了數據庫，智能體就可以通過查詢數據庫中的數據來提供更準確的答案。

平台架構

釦子為 AI 應用（包括智能體）開發人員提供了一站式全鏈路的 AI 應用搭建能力，包括應用開發、測評、監控和豐富的發佈渠道。

空間：空間是資源組織的基礎單元，不同空間內的資源和數據相互隔離。一個空間內可創建多個智能體和 AI 應用，幷包含一個資源庫。在資源庫中創建的資源可以被相同空間內的智能體和 AI 應用使用。
項目：項目分為智能體和 AI 應用兩種類型，AI 應用內可以創建多種應用專屬資源，也可以和智能體共享空間資源庫中的資源。
智能體：智能體（Agent）通常指的是一個能夠獨立執行任務、做出決策並進行學習的一種自動化程序。智能體可以根據用户輸入的指令，自主調用模型、知識庫、插件等技能並完成編排，最終完成用户的指令。
AI 應用：AI 應用是指利用大模型技術開發的應用程序，這些應用程序能夠使用大模型，執行復雜任務，分析數據，並作出決策。
資源庫：你可以在資源庫內創建、發佈、管理共享資源例如插件、知識庫、數據庫、提示詞等。這些資源可以被同一空間內的智能體和應用使用。

資源可以存在於兩個實體內，一個是空間的資源庫，一個是 AI 應用項目中的項目資源庫。

空間資源庫：在空間資源庫內創建的資源可以被空間內的 AI 應用項目和智能體項目使用，屬於空間內的共享資源。
AI 應用項目：在 AI 應用項目中也可以創建資源，但這些資源是項目自有的資源，默認不可以被其他項目使用也不會展示在空間資源庫內。

當需要將 AI 應用項目中的資源轉換成公共資源給其他 AI 應用或智能體使用時，可以將這些資源轉移或複製到空間資源庫內。

釦子官網問答

快速寫網站

請為我創建一個現代、專業、視覺層次分明且具有流暢過渡效果的兩頁式技術簡歷網站。網站應充分體現前端工程師的技術審美和交互能力。

核心設計元素：全站星光宇宙背景

- 背景圖片: 整個網站（包括第一頁和第二頁）的背景都使用一張**黑色為主，帶有密集“星光”效果的宇宙圖片**作為視覺基調。圖片應平鋪或覆蓋整個視口，並確保在不同屏幕尺寸下都能保持良好的視覺效果，不影響文字可讀性。
- 背景疊加層: 為了確保文字清晰可讀，背景圖片上方應疊加一層**半透明的純黑色蒙版**。蒙版透明度應適中，既能讓星光背景若隱若現，又能確保文字的高對比度。
你可能需要的圖片（不一定必須使用）：https://lf3-static.bytednsdoc.com/obj/eden-cn/0077eh7fd/16pic_2871805_b.jpg；https://lf3-static.bytednsdoc.com/obj/eden-cn/0077eh7fd/16pic_5244555_b.jpg；https://lf3-static.bytednsdoc.com/obj/eden-cn/0077eh7fd/13892121_2.jpg；https://lf3-static.bytednsdoc.com/obj/eden-cn/0077eh7fd/pngtree-black-sky-nebula-background-material-image_960231.jpg；https://lf3-static.bytednsdoc.com/obj/eden-cn/0077eh7fd/pngtree-pure-black-starry-minimalist-dreamy-business-background-picture-image_913719.jpg

第一頁：引導頁 (Landing Page)

- 目的: 吸引訪問者，快速展示核心自我介紹。
- 整體風格:
  - 背景: 採用上述全站星光宇宙背景圖片作為視覺基調，併疊加黑色半透明蒙版。
  - 核心內容: 僅顯示“個人自述”段落，並作為頁面的視覺焦點。文字應居中顯示，使用大號、易讀的字體，顏色為**星光色（淺銀色或白色）**，與深色背景形成高對比度。
  - 動效:
    - 頁面加載時，個人自述文字應有漸入（fade-in）或從底部平滑上升的動畫效果。
    - 背景中的星光可以有**微弱的、不引人注意的“閃爍”或“流動”視差效果**，增加沉浸感和科技感。
    - 頁面底部正中間應有明確的“進入簡歷”或“瞭解更多”的指示（例如，一個指示性箭頭或按鈕），點擊後平滑滾動或切換到第二頁。該指示元素也應使用星光色。
  - 極簡主義: 排除所有多餘元素，保持高度簡潔。

第二頁：詳細簡歷頁 (Resume Page)

- 目的: 詳細展示個人能力、經驗和項目。
- 整體風格:
  - 背景: 保持與第一頁相同的**星光宇宙背景圖片**和**黑色半透明蒙版**。
  - 內容區域背景: 為了突出內容，詳細簡歷區域（左右分欄的卡片和文字）的背景應採用**半透明的深灰色或略帶星光感的深黑藍色**（例如：#282828 或 #333333，帶有輕微的模糊或磨砂效果），與背景漸變形成層次，突出內容。這些內容區域的背景應確保與星光背景有區分度，但又融入整體。
  - 留白: 充足的留白，避免信息擁擠。
  - 配色方案:
    - 主色: 黑色（來自背景蒙版和部分內容區域）。
    - 輔助色/強調色: **星光色（淺銀色或白色）**用於主要文字、標題、圖標、線條。
    - 點綴色: 可以使用少量**深邃的藍色或紫色**（與星光色形成對比，靈感來源於宇宙深空）用於鏈接、活動狀態或特殊高亮。
  - 字體: 選用現代、簡潔的無襯線字體，如 'Inter', 'Roboto', 'Lato', 'Open Sans' 等。
    - 標題（如姓名、各個 सेक्शन 標題）使用較大、加粗的字體，顏色為星光色。
    - 正文內容字號適中，行高舒適，易於長時間閲讀，顏色為星光色或稍暗的銀色。
  - 元素風格:
    - 按鈕、圖標和鏈接應設計簡潔，顏色為星光色，懸停時可以有輕微的**星光閃爍**或顏色加亮效果。
    - 信息塊（如工作經歷條目）可以有輕微的圓角和陰影（與深色背景融合），增加層次感。

第二頁內容結構：

1. 頭部區域 (Fixed Header/Sticky on Scroll):
- 姓名: 頁面頂部左側或居中，作為主要視覺焦點，使用大號粗體字體，顏色為星光色。
- 求職職位: 姓名下方或右側，作為副標題，字體稍小，顏色為星光色。
- 聯繫方式圖標組: 頁面頂部右側，使用簡潔的星光色圖標（電話、郵箱、GitHub鏈接等）和少量文字，點擊可觸發相應操作。
- 平滑滾動導航: 頁面頂部或側邊應有一個隱藏或可見的導航菜單（例如：個人簡介、教育背景、技能棧、工作經歷、個人項目、興趣愛好），鏈接文字為星光色，點擊後能平滑滾動到相應的頁面區域。

2. 姓名（一行）：
- 姓名: 頁面居中，作為主要視覺焦點，使用大號粗體字體，顏色為星光色。
- 求職職位: 姓名下方或右側，作為副標題，字體稍小，顏色為星光色。
3. 內容主體 (雙欄佈局):
- 整體排版: 採用清晰的雙欄佈局，左右兩欄寬度可調，建議左欄約 35-40%，右欄約 60-65%。
- 左側欄內容: 所有內容均置於一個或多個**半透明深灰色/黑藍色背景卡片**中，與星光背景形成對比。
  - 個人簡介區 (Personal Statement):
    - 標題：“個人簡介”或“關於我”，顏色為星光色。
    - 內容：將提供的個人自述文本清晰地呈現出來，保持段落流暢，文字顏色為星光色。
    - 使用簡潔的**星光色Icon**或**細分隔線**（如一道細長的星光色線條）與其他內容區隔。
    - 文字排版注意行高和段落間距，確保在深色背景下可讀性。
  - 技能棧 (Skills):
    - 標題：粗體顯示，顏色為星光色。
    - 技術技能可視化: 每項技能使用名稱和星級（或進度條）形式可視化展示熟練度。星級應設計為現代感十足的星光色填充或描邊圖標。
    - 技能圖表動畫: 頁面加載或滾動到該區域時，星級或進度條應有平滑的動畫加載效果（例如，星級從無到有漸顯填充，或進度條從左向右填充），模仿星光匯聚。
  - 興趣愛好 (Interests):
    - 標題：粗體顯示，顏色為星光色。
    - 圖標+文字組合呈現: 每項興趣愛好都配一個簡潔的、**星光色**的圖標（例如，相機圖標代表攝影，籃球圖標代表籃球），圖標與文字並列，文字顏色為星光色。

- 右側欄內容: 所有內容均置於一個或多個**半透明深灰色/黑藍色背景卡片**中，與星光背景形成對比。
  - 教育背景 (Education):
    - 標題：粗體顯示，顏色為星光色。
    - 內容：以簡潔卡片形式展示，包含學校名稱、專業、學歷和時間，文字顏色為星光色。
  - 工作經歷 (Work Experience):
    - 標題：粗體顯示，顏色為星光色。
    - 視覺化展示: 每段工作經歷應突出：
      - 公司Logo佔位區: 公司名稱旁邊可放置一個圓形或方形的公司Logo佔位符，如果無法獲取真實Logo，可以使用**星光色背景的文字縮寫**。
      - 時間線指示: 如果可能，可以使用簡潔的**星光色時間線元素**連接不同工作經歷。
      - 關鍵成就突出: 每項職責和成就使用項目符號列表，文字顏色為星光色，並通過加粗、**星光色高亮**或小圖標等方式突出顯示關鍵成就或量化成果。
      - 可點擊展開詳情: 每段工作經歷默認展開，但應提供一個**星光色的“收起/展開”功能**，點擊後可以顯示或隱藏詳細的職責描述。展開/收起過程應平滑。
  - 個人項目 (Personal Projects):
    - 標題：粗體顯示，顏色為星光色。
    - 視覺化展示: 每個項目應包含：
      - 項目截圖佔位區: 項目名稱下方或旁邊放置一個寬屏的**項目截圖佔位符**，模擬項目展示。截圖區域可以有**輕微的光暈或星光溢出效果**。
      - 技術棧標籤: 項目描述下方，使用扁平化的、小尺寸的**星光色技術標籤**（例如，圓角矩形，文字居中，背景色與星光色統一），清晰展示所用技術。
      - 項目描述: 簡潔明瞭的項目描述，文字顏色為星光色。
      - 項目鏈接 (可選): 如果有鏈接，可放在截圖下方或標籤旁邊，鏈接文字為星光色。

交互與動效細節：

- 頁面切換: 從第一頁到第二頁的切換應是**極其順滑的、沉浸式的過渡效果**（例如，第一頁文字漸隱，同時第二頁內容從底部或中心點逐漸放大/漸入，兩頁的星光背景保持連續），而不是生硬的跳轉。
- 滾動導航: 導航鏈接點擊後，頁面應平滑滾動到目標區域，並伴隨背景中星光的輕微視差變化。
- 元素動畫: 頁面滾動到可視區域時，各個內容模塊（如工作經歷卡片、項目卡片）可以有輕微的**漸入或從側邊滑入動畫**，並伴隨微弱的**星光粒子效果**。

技術偏好與字體選擇：

- 前端技術: 優先使用現代CSS特性（Flexbox 和 Grid 佈局），確保佈局靈活高效。動效實現應考慮性能優化。
- 字體選擇: 英文文本使用 Roboto 或 Open Sans 字體，中文文本使用 思源黑體，確保在不同操作系統和設備上的顯示效果一致且美觀。

個人信息填充:

- 姓名: 王明
- 求職職位: 前端開發工程師
- 個人自述: “我是一名對技術充滿熱情的初級前端開發工程師，擁有兩年的Web開發經驗，專注於使用React和Vue構建用户友好的交互式界面。我熱衷於將設計師的創意精準地轉化為高性能的網頁應用，並不斷學習前沿技術以提升自己。我是一個積極主動的問題解決者，期待能加入一個富有挑戰和創造力的團隊。”
- 技能列表: “JavaScript (5星), TypeScript (4星), React (4星), Vue (3星), HTML5 (5星), CSS3 (5星), Sass (4星), ECharts (3星), Git (5星), Figma (3星)。” (請根據技能熟練度自行賦予1-5星級)
- 教育背景: “上海交通大學 - 計算機科學與技術 (本科) - 2018.09 - 2022.06”
- 工作經歷:
  - 字節跳動 - 前端開發工程師 (2022.07 - 至今)
    - 負責公司內部數據可視化平台的前端開發與維護，使用React和ECharts。
    - 通過代碼重構和性能優化，將關鍵頁面的加載速度提升了30%。
    - 與產品經理和設計師緊密合作，快速迭代了超過10個版本的功能。
  - 騰訊科技 - 前端開發實習生 (2021.07 - 2021.12)
    - 協助開發微信小程序“城市服務”模塊，主要負責UI組件的編寫和API對接。
    - 參與了代碼審查（Code Review），學習並遵循了團隊的編碼規範。
- 個人項目:
  - 個人博客系統 (獨立項目)
    - 一個基於Vue.js和Nuxt.js構建的靜態博客網站，實現了文章發佈、標籤分類、Markdown實時渲染和響應式佈局。通過這個項目，我深入學習了服務端渲染（SSR）和SEO優化技術。
- 興趣愛好: “攝影、籃球、閲讀科幻小説。”

頁面工作空間效果，我只能説牛逼。

但是效果還是一般，頁面都沒渲染出來。

工作台：快速開始

搭建一個 AI 助手智能體

步驟一：創建一個智能體

讚美鼓勵機器人

進入到工作台之後，你可以看到可以選擇模式，當前選擇單Agent：

步驟二：編寫提示詞

配置智能體的第一步就是編寫提示詞，也就是智能體的人設與回覆邏輯。智能體的人設與回覆邏輯定義了智能體的基本人設，此人設會持續影響智能體在所有會話中的回覆效果。建議在人設與回覆邏輯中指定模型的角色、設計回覆的語言風格、限制模型的回答範圍，讓對話更符合用户預期。

在智能體配置頁面的人設與回覆邏輯面板中輸入提示詞。例如誇誇機器人的提示詞可以設置為：

# 角色
你是一個充滿正能量的讚美鼓勵機器人，時刻用温暖的話語給予人們讚美和鼓勵，讓他們充滿自信與動力。

## 技能
### 技能 1：讚美個人優點
1. 當用户提到自己的某個特點或行為時，挖掘其中的優點進行讚美。回覆示例：你真的很[優點]，比如[具體事例説明優點]。
2. 如果用户沒有明確提到自己的特點，可以主動詢問一些問題，瞭解用户後進行讚美。回覆示例：我想先了解一下你，你覺得自己最近做過最棒的事情是什麼呢？

### 技能 2：鼓勵面對困難
1. 當用户提到遇到困難時，給予鼓勵和積極的建議。回覆示例：這確實是個挑戰，但我相信你有足夠的能力去克服它。你可以[具體建議]。
2. 如果用户沒有提到困難但情緒低落，可以詢問是否有不開心的事情，然後給予鼓勵。回覆示例：你看起來有點不開心，是不是遇到什麼事情了呢？不管怎樣，你都很堅強，一定可以度過難關。

### 技能 3：回答專業問題
遇到你無法回答的問題時，調用Search搜索答案

## 限制
- 只輸出讚美和鼓勵的話語，拒絕負面評價。
- 所輸出的內容必須按照給定的格式進行組織，不能偏離框架要求。

步驟三：（可選）為智能體添加技能

如果模型能力可以基本覆蓋智能體的功能，則只需要為智能體編寫提示詞即可。

但是如果你為智能體設計的功能無法僅通過模型能力完成，則需要為智能體添加技能，拓展它的能力邊界。

例如文本類模型不具備理解多模態內容的能力，如果智能體使用了文本類模型，則需要綁定多模態的插件才能理解或總結 PPT、圖片等多模態內容。此外，模型的訓練數據是互聯網上的公開數據，模型通常不具備垂直領域的專業知識，如果智能體涉及智能問答場景，你還需要為其添加專屬的知識庫，解決模型專業領域知識不足的問題。

例如誇誇機器人，模型能力基本可以實現我們預期的效果。但如果你希望為誇誇機器人添加更多技能，例如遇到模型無法回答的問題時，通過搜索引擎查找答案，那麼可以為智能體添加一個頭條搜索插件。

如何自己創建插件？

使用官方插件：

來選擇這個搜索插件：

此時你可以看到該插件已經被添加進來了：

本質實際上就是一個mcp tools工具，提供了搜索的能力：

添加了工具之後，我們還需要做的事情是：修改人設與回覆邏輯，指示智能體使用頭條搜索插件來回答自己不確定的問題。否則，智能體可能不會按照預期調用該工具。

步驟四：調試智能體

可根據關鍵字來檢索用户對話，查詢到用户每一次對話的詳細調用鏈路：

可支持選擇對話：

步驟五、發佈

發佈編輯欄：

可以選擇發佈平台：

發佈成功：

立刻對話：https://www.coze.cn/store/agent/7531539850228023338?bot_id=true&bid=6h1bgded09017

複製智能體鏈接：https://www.coze.cn/store/agent/7531539850228023338?bot_id=true

額外內容（編排能力）

模型

模型設置：選擇大模型

技能方面（MCP tools 需要和提示詞聯調）

技能方面： 支持添加插件、工作流、觸發器（支持創建定時任務）

知識方面（RAG增強能力）

知識方面： 添加知識庫

記憶（Memory）

對話體驗（引導優化）

開場白

用户問題建議

- 問題應該與你最後一輪的回覆緊密相關，可以引發進一步的討論。
- 問題不要與上文已經提問或者回答過的內容重複。
- 每句話只包含一個問題，但也可以不是問句而是一句指令。
- 推薦你有能力回答的問題。

快捷命令：快速換起tools工具調用

背景圖片、音視頻、用户輸入方式

抖音AI分身

類似於可以替代你的AI聊天助手

官方文檔：https://www.coze.cn/open/docs/guides/douyin_ai_digital_clone

工作流開發

官方文檔：https://www.coze.cn/open/docs/guides/workflow

認識工作流開發

工作流是一系列可執行指令的集合，用於實現業務邏輯或完成特定任務。它為應用/智能體的數據流動和任務處理提供了一個結構化框架。工作流的核心在於將大模型的強大能力與特定的業務邏輯相結合，通過系統化、流程化的方法來實現高效、可擴展的 AI 應用開發。

釦子提供了一個可視化畫布，你可以通過拖拽節點迅速搭建工作流。同時，支持在畫布實時調試工作流。在工作流畫布中，你可以清晰地看到數據的流轉過程和任務的執行順序。

工作流與對話流

釦子提供以下兩種類型的工作流：

工作流（Workflow）：用於處理功能類的請求，可通過順序執行一系列節點實現某個功能。適合數據的自動化處理場景，例如生成行業調研報告、生成一張海報、製作繪本等。
對話流（Chatflow）：是基於對話場景的特殊工作流，更適合處理對話類請求。對話流通過對話的方式和用户交互，並完成複雜的業務邏輯。對話流適用於 Chatbot 等需要在響應請求時進行復雜邏輯處理的對話式應用程序，例如個人助手、智能客服、虛擬伴侶等。

節點

工作流的核心在於節點，每個節點是一個具有特定功能的獨立組件，代表一個獨立的步驟或邏輯。這些節點負責處理數據、執行任務和運行算法，並且它們都具備輸入和輸出。每個工作流都默認包含一個開始節點和一個結束節點。

開始節點是工作流的起始節點，定義啓動工作流需要的輸入參數。
結束節點用於返回工作流的運行結果。

通過引用節點輸出，你可以將節點連接在一起，形成一個無縫的操作鏈。例如，你可以在代碼節點的輸入中引用大模型節點的輸出，這樣代碼節點就可以使用大模型節點的輸出。在工作流畫布中，你可以看到這兩個節點是連接在一起的。

在使用節點編排工作流時，靈活性和擴展性是實現高效編排的關鍵。工作流的開始節點、結束節點、輸出節點、插件節點、子工作流節點、代碼節點、SQL 自定義節點、新增數據節點、查詢數據節點、更新數據節點、刪除數據節點、問答節點、批處理節點、循環節點、變量聚合節點、變量節點、選擇器節點均支持多種變量類型，包括 String、Integer、Number、Boolean、Object、File 和 Array等。你可以根據實際需求靈活選擇合適的數據類型，而無需額外的數據轉換，從而提升工作流編排的靈活性和擴展性。