一、引言
一個月前，我寫了一篇《AI 開發的捷徑：工作流模式》，引起了很多讀者的興趣。
大家都認同，AI 應用是開發者的機會，而圖形化、低程式碼/無程式碼、不需要程式設計基礎的"工作流模式"，正是 AI 應用開發的入門捷徑。
但是，我的那篇文章只介紹概念，沒有操作步驟。很多讀者實際上手時，遇到了困難，有些地方不理解，做不下去。
今天就是後續，我詳細演示，一步步圖解，沒有程式設計基礎，如何搭建一個最簡單的 AI 應用。只要你跟著做，就能做出來。
二、開發工具
這篇教程使用的開發工具是釦子（Coze），所有操作都在它的瀏覽器 IDE（整合開發環境）中完成，
選擇釦子（Coze），主要原因有三個。
（1）它是國產的 AI 應用開發平臺，位元組跳動的產品，介面、文件、客服都是中文。
（2）它有無程式碼編輯器 Project IDE，包含元件拖拽的 UIBuilder，可以生成全功能的前端介面，上手門檻相對低。
同時，它也提供後端資料庫，可以資料讀寫。
（3）它免費使用（只要不超過使用額度），釋出上線也不收費，適合新手練習。
三、示例專案
我們的示例專案，是一個最簡單的"AI 文言文生成器"。
大家先看成品，可以點進去試用。（建議 PC 訪問，UI 還沒有適配手機。）
輸入一段漢語白話文，點選按鈕，AI 就會自動生成文言文。
架構上，它非常簡單：前端是一個網頁表單，將使用者的輸入傳送給後端的 AI 模型，並展示後端的返回結果。
它的開發只需要兩步，第一步先讓後端的 AI 模型跑起來，第二步做一個網頁，連線後端即可。
釦子的方便之處在於，前後端的生成都是圖形化操作：後端是編排工作流的節點，前端是 UIBuilder 的介面拖拽元件。
下面就是開發步驟。為了保證大家跟得上，我寫得比較詳細，看起來有點長，但是實際操作是很快的，熟練的話，10分鐘就能完成。
四、建立專案
首先是開發的準備工作，先建立 AI 應用。
（1）訪問釦子官網，點選右上角的"基礎版登入"。（基礎版只比專業版少一些企業級功能，普通使用者完全夠用。）
（2）登入後，自動跳轉到個人主頁，點選左側選單的"工作空間"。
工作空間裡面，有"專案開發"和"資源庫"兩個頁面。進入"專案開發"，可以看到你所有的專案。
（3）點選右上角的"建立"按鈕，跳出一個彈框。
上面有兩個選項，"建立智慧體"是建立一個傳統的 AI 聊天，"建立應用"則是建立一個自定義介面的 AI 應用。
（4）選擇"建立應用"，這時會讓你選擇應用模版，點選"建立空白應用"。
接著，輸入專案的名稱，這裡是"AI 文言生成器"。
至此，專案建立完畢，系統會自動進入"AI 文言生成器"的應用主頁（下圖），正式的開發工作就要開始了。
五、業務邏輯
應用主頁的最上方，有"業務邏輯"和"使用者介面"兩個分頁，預設是"業務邏輯"頁面。
這一節就講解如何建立業務邏輯，也就是後端的 AI 模型。
我們採用工作流模式，即將業務邏輯編排成一個個節點。
（1）點選左側選單的"工作流"後面的"+"號，選擇"新建工作流"。
輸入工作流的名稱和描述。（注意，名稱只能是英文字母、數字和下劃線，本例是 classicalchinesecreator。）
（2）工作流建立成功後，名稱會出現在左側選單的"工作流"標籤下方。點選它，就進入該工作流的"節點編排"畫布。
畫布上，預設有"開始"和"結束"兩個節點。
（3）點選下方的"新增節點"，新增一個新節點，型別設為"大模型"。
然後，將這三個節點連起來（透過拖動邊框上的控制點）。
（4）配置"開始"節點。雙擊該節點，在配置框增加一個 content 變數，表示使用者的輸入內容。
（5）配置"大模型"節點。
配置視窗的各個選項，填寫如下。
模型：可以按自己的需要選擇，這裡保持預設值"豆包 Function call 模型"。
輸入：將原來的 input 引數改名為 content，並跟"開始節點"的 content 變數連線起來。
系統提示詞：輸入以下內容，用來設定大模型的行為。
技能
技能 1：文言文寫作
- 當使用者提供一段漢語白話文時，迅速將其改寫成文言文。
- 確保改寫後的文言文的準確性和完整性。
限制：
- 只進行文言文改寫，不回答與文言文改寫無關的問題。
- 嚴格按照使用者提供的漢語白話文進行改寫，不得擅自增加內容。
使用者提示詞：輸入以下內容，作為給系統的直接命令。
上面文字中的{{content}}，表示此處系統將插入 content 變數的內容。
輸出：將輸出格式改為"文字"。
（6）配置"結束"節點。首先點選配置框上部的"返回文字"。
輸出變數：將 output 引數關聯"大模型"節點的 output 變數。
回答內容：輸入{{output}}（表示插入 output 變數的內容），並開啟"流式輸出"（即打字機效果）。
至此，整個工作流的搭建全部完成，可以單擊畫布右上角綠色的"試執行"按鈕，測試工作流是否正常執行。
在 content 輸入框，輸入測試內容，比如"今天天氣很好"。
然後，點選下方的執行按鈕，就可以得到執行結果（今日，天善）。
如果一切正常，就可以開始搭建使用者介面。
六、使用者介面的搭建：頁面佈局
（1）點選進入畫布上方的"使用者介面"分頁。
（2）在左側選單的元件皮膚，找到佈局元件 > 容器元件，將其拖入中間的畫布，作為頁面的標題區域。
系統自動將這個容器命名為 Div1，雙擊進行配置。
尺寸：寬度為100%，高度為 60px。
佈局：排列方向為"橫向"。
樣式：去除背景色，將邊框設為灰色（#E2E8F0）。
（3）在 Div1 下方，再拖入一個容器元件，系統自動命名為 Div2，用作功能區域。
配置基本一樣：尺寸部分，寬度和高度都設為填充容器；佈區域性分，排列方向為橫向；樣式部分，去除背景色。
（4）在 Div2 內部的左側部分，拖入一個容器元件 Div3，用作使用者輸入區域。
寬度設為50%，高度設為 550px，樣式刪除背景色。
（5）在 Div2 內部的右側部分，拖入一個容器元件 Div4，用作展示結果區域。
寬度設為50%，高度設為 550px，樣式刪除背景色。
至此，頁面佈局如下圖。
七、使用者介面的搭建：頁面細化
做好佈局後，下一步完善頁面細節。
（1）在 Div1 內部，拖入推薦元件 > 文字元件，作為標題文字。
標題內容設為"AI 文言文生成器"，字號改成24，字重為粗體。
（2）在 Div3 中拖入一個表單元件，刪除不需要的元素，只剩下文字輸入框和按鈕。
表單元件：寬度和高度都設為填充容器，並刪除邊框。
文字輸入框：拉伸高度，寬度設為填充容器，標籤和佔位文案設為"輸入漢語白話文"。
按鈕：文字改為"生成文言文"。
完成後的表單效果如下圖。
（3）在 Div4 中拖入一個展示元件 > Markdown 元件，作為展示文言文區域。
刪除 Markdown 元件的已有內容，改成"###### 生成結果"。高度和寬度改為填充容器，圓角設為10，內邊距設為20，邊框設為灰色（#CBD5E1）。
至此，頁面細化完成，單擊屬性皮膚上方的預覽，檢視效果。
八、使用者介面的搭建：配置事件
頁面外觀做完後，要配置事件，將後端的業務邏輯與使用者介面連線起來。
（1）點選"生成文言文"按鈕，在配置皮膚切換到"事件"，點選"新建"。
事件型別設為"點選時"，執行動作設為"呼叫 Workflow"，workflow 設為已經建立好的"classicalchinesecreator"，並將工作流的入參content設為文字輸入框的值 {{ Textarea1.value }}。
（2）配置生成結果區域，展示工作流的返回結果。
選中 Markdown 元件，點選"內容"欄的擴充套件按鈕。
擴充套件皮膚中，在###### 生成結果後面新增一行，插入工作流的返回結果{{ classical_chinese_creator.data }}。
完成所有配置後，單擊右上角"預覽"按鈕，測試整體效果。
如果一切正常，這個 AI 應用就算開發完成了。
九、應用釋出
開發完成後，就可以釋出該應用，讓其他人也可以使用。
點選右上角"釋出"按鈕，版本號設為 v0.0.1，釋出平臺設為釋出到釦子商店。
至此大功告成，"AI 文言生成器"就登入釦子商店，向世界公開了。
十、總結
大家可以根據這個示例，改變輸入 AI 模型的提示，讓它做不同的任務，就能變化出很多不同功能的應用。
比如，官方的"AI 翻譯"示例，就是讓 AI 把使用者輸入的中文譯成其他語言，跟"AI 文言文生成器"異曲同工。
除了文字生成，釦子還提供許多其他能力，比如抓取外部資料、資料庫讀寫等，從而可以做出更強大的 AI 應用。
總之，"工作流模式"使用圖形化介面搭建一個 AI 應用，簡單而便捷，隨時檢視效果，一鍵釋出，值得大家嘗試。
（此處有分割線。）
最後是一個活動預告。
釦子邀請我，參加12月19日在上海舉行的"釦子開發者日"，也歡迎大家參加。
屆時，位元組的 AI 工程師會跟大家面對面交流，如何開發和推廣 AI 應用。這是很好的學習交流、獲取資源的機會，點選這裡瞭解詳情。
掃描下方海報二維碼，或者點選連結，現在就可以線下報名參加，或者線上預約直播。
（完）