把 Claude Design 做成 Skill，人人都能用

就在前兩天,Figma的股價崩了 這已經是Anthropic第N次帶崩其他公司的股價了 這次它發佈的新功能叫Cloud Design 你可以理解爲設計師的Cloud Code 大家都知道用上它家的產品有多難 於是我把Cloud Design的核心功能 做成了人人都能用的Skill 人人都能成爲頂級的網站設計師 下面這兩個包括大家現在看到的這個視頻 其實都是我基於這個Skill加持做出來的網頁 大家可以先看一下效果 大家好,我是花言老師 歡迎來到更名花園 Cloud Design的設計哲學其實很簡單 左邊打字,右邊直接出設計稿 其實本質上是網頁 你想要啥,它就直接給你畫出來 那你可能會想 這不就是AI版的Figma嗎 其實沒那麼簡單 Anthropic自己的設計團隊實際上說的 不要用對待畫布工具的方式來使用Cloud Design 它其實更像Cloud Code 傳統設計工具的邏輯是人在畫布上操作 AI幫你提速 那Cloud Design直接反過來 AI成了主要的生成者 人主要做好審覈就可以了 你不用自己畫 只管看,判斷,給反饋就行 而且它輸出的不是圖片 是真實能跑起來的代碼 鏈接是可以點的 標籤也可以切 版本可以遞付 跟直接生成一張好看的UI圖 完全就不是一回事了 當然Cloud Design之所以強 一半靠的是Office 4.7的模型能力 另一半就要靠它精心設計的提示詞了 那Cloud Design上線不到24小時 就有安全全的大佬 把完整的提示詞扒出來了 信息密度非常高 我自己花了一些時間 仔細研究了一下 下面我們先仔細拆解一下這套提示詞 看到底有哪些 是值得我們去借鑑學習的地方 第一點,角色定位 它開頭的第一句就挺有意思的 它說你是一個專家設計師 而用戶是你的產品經理 注意這裏並沒有說你是一個AI助手 主要說的是設計師和產品經理的關係 這可以帶來兩個好處 第一個,AI做決策會更果斷 設計師本身就應該有自己的判斷力 但是關鍵點它又會來問你 因爲你纔是產品經理 最終得你說了算 還有一點 它會要求AI根據任務自由地切換身份 比如做動畫就當動效設計師 做原型就當UX設計師 做PPT就當DAC設計師 這樣它就不會用去做網頁的腦子去做所有的東西 很多人寫提示詞就一句 你是個前端開發者就完事了 但是Cloud Design告訴我們 好的角色定位應該是動態的 可以根據具體的任務去靈活地切換身份 第二個點工作流 它在提示詞裏面定義了一套六步的流程 大概是這樣的 首先理解需求 探索資源 執行計劃 然後搭建結構 完成驗證 極簡的總結 這裏有兩個點我們值得展開來說一下 第一個就是什麼時候該問 什麼時候直接開幹 很多agent要麼先問你一堆問題 要麼啥也不問 悶頭就幹 Cloud Design給了一個很清楚的判斷方向 你說幫我做個PPT 它可能會先問幾個問題 但是你說幫我做個PPT 我們的全員會馬上就要用了 十分鐘 它直接就開彈了 它非常巧妙的用一個例子來詮釋了什麼叫提問的藝術 第二個細節就是總結 它要求AI只說出關鍵的注意事項和下一步的動作 而不要複述自己已經做了什麼 這個原則同樣挺精闢的 可以避免很多廢話 第三個點是我覺得最有價值的部分 就是去除AI味 大家可以想一下 你之前在使用AI職業生產網頁的時候 是不是大部分情況下都是紫粉藍的漸變 一些大圓角卡片 還有一些emoji當圖標 一些假數據到處都是 可能單獨看還行 但AI大部分情況下默認生出來都是這種效果 它就變成一種味道 等大家看這網頁一眼就能看出來 它是AI生成的 這個就跟寫文章一樣 你可能看到一些文章通篇都是 此外什麼值得注意事 綜上所述 這種套路是大部分人都能聞出來的 可樂設計是變了一份非常完整的清單 這裏我們舉幾個例子 比如說別亂用漸變背景 別亂用emoji 別搞那種左側彩色邊框的圓角卡片 以及別用爛大家的字體 別堆砌無意義的數據和圖標等等 它把這些雷區一條條的給你列出來 BJI不能去走這些老套路 字體的推薦也很講究 它重點列出來一些千萬不能用的字體 以及替代方案也給了一些小衆 但是品質很高的字體 第四點就是色彩系統 首先它的配色策略分成了 優先用品牌色 然後不夠用就用OKLCH派生的顏色 最後絕對不要憑空去編新的顏色 爲什麼是OKLCH呢 首先傳統的HSL色彩空間有個很大的問題 就是感知不均勻 同樣的亮度值 黃色可能比藍色看着亮一大截 AI如果用HSL隨機配色 經常是數值上沒毛病 但是看着就是不舒服 OKLCH是一個感知均勻的色彩空間 它可以保持亮度和色度不變 只轉變色相角 出現的顏色就自然很和諧了 這個細節可能看着挺小的 但是網頁的高級感 可能看着一下子就上來了 大家可以看我這個視頻裏的 這個演示的網頁 是不是看起來配色很舒服呢 然後第五個點 內容原則 其實詞裏演了喬布斯一句非常經典的話 要用1000個NO去換一個YES 讓AI小網頁有個傳統的毛病 就是他恨不得直接把空間給你塞滿 你讓他做個落地頁 什麼hero特性評價數據 一些FAQ聯繫方式等等 一股腦全給你上 但是每塊又看起來很平庸 Cloud的態度很明確 每個元素都得證明自己爲什麼應該在哪 首先你要想加東西 先問用戶 頁面看起來空 那可能是排版的問題 用留白來解決 不能只靠塞東西 可能一個大膽的留白 比十個湊數的板塊 可能更有表現力一點 接下來我們看第六個點 驗證 在開發完成之後呢 他會復出一個獨立的子agent 然後對當前完成的網頁做全面的檢查 這裏呢 跟我們之前分享過的Cloud Code 在harness上的實踐有相同的理念 如果用同一個agent 檢查自己的輸出的時候呢 他會天然傾向於覺得自己沒有問題 但是如果換一個全新的上下文 這種自我感覺良好就很容易被打破 以上就是Cloud Design提示詞裏面最核心的 我覺得有價值的一些東西了 但是有個比較現實的問題 就是anthropic的產品在國內 用起來真的都非常的困難 因爲我自己已經被封了三個號了 所以我現在已經徹底放棄官方渠道了 而且呢 沒有API啊 他沒有辦法直接加到這個自己的工作流裏面 不過呢 好消息是他的提示詞已經泄露出來了 Cloud Design厲害的這一半 主要就是靠這套提示詞嘛 所以呢 我就基於這套提示詞做了一個skill 就叫Web Design Engineer 在這個skill裏面呢 把剛纔我們介紹的這套提示詞裏面的精華 完整的提煉出來了 不管你是在Cloud Code Cursor還是Codex 都可以直接去使用 人人都能成爲頂級的網站設計師 那這個skill呢 大概有400行 首先啊 我把Cloud Design中特有的工具和環境的描述 剝離了出去 只保留了其中最通用的 最有價值的部分 然後呢 在這個技術上 我還優化了幾個地方 首先啊 寫代碼之前 必須先用自然語言 把它採用的設計系統來說清楚 比如說配色 字體 間距啊 這些全列出來 那如果不先說清楚呢 AI啊 可能自己默默做了個決定啊 就直接開始寫 那最後你直接看到的就是一個成品 那如果前面的方向不對啊 可能最後只能推翻重來 提前說出來呢 還沒開始寫代碼啊 你就可以直接去做糾編了 那第二點呢 就是要求他儘早要拿出來一個 帶假設和站位符的一個最小的版本 那一個粗糙的V0版本啊 可能要比他花了幾倍的時間 直接出一個非常精雕細琢之後的V1的版本 可能要有用的多了啊 因爲後者啊 如果要是整個方向都錯了 那最後就全白乾了 另外呢 在Cloud Design的基礎之上啊 我還補充了更多的去除AI味的條目啊 以及那我還額外增加了幾套啊 經過我驗證過的字體和配色的 這個參考的對照表 那這個skill還附帶一個reference文件啊 裏面包含了一些典型的代碼模板啊 那這裏的靈感呢 其實來源於Cloud Design的 他的題詞裏面的 Copy Study Component的那一部分啊 那下面呢 我們就來實際看一下啊 他們的效果到底咋樣 那我用同一套提示詞 分別跑了有skill和沒有skill的版本啊 那爲了公平取件呢 這裏我們測試使用的環境 全部都是Cursor加Cloud Ops 4.7啊 然後我們先來看第一個例子啊 這裏啊 我讓他幫我做一個 太空探索博物館的線上展覽頁啊 然後下面我給他一堆要求 然後我們先來看一下 沒用skill做出的版本啊 其實呢效果也還挺不錯的啊 深色的背景啊 然後Canvas繪製的星空 然後還有一些行星的動畫啊 然後整體的太空感是有的 但是呢啊 仔細一看啊 這個青紫粉啊 漸變的顏色 那還有字體呢也比較老套 然後佈局就是這種標準的 hero加卡片的這種形式啊 是一個教科書式的 這個落地頁的結構啊 整體上呢還不錯啊 但是缺少了一些創意 在視覺上呢堆砌了大量的這種 發光和漸變的這個特效啊 哎 然後我們再看用了skill的版本 首先啊 它的配色整體使用的是OKLCH定義的 沒有那種典型的AI霓虹的感覺 是一種非常接近於雜誌印刷的 深沉的這個色調 然後標題和正文的字體呢 都比較有特點啊 技術感十足 但是又不會顯得很冰冷 然後下面啊 也不是那種傳統的卡片式佈局 動畫效果啊 做的也很舒服 很有創意感 整體上啊 這個版本感覺像是一個 非常有經驗的設計師的傑作啊 下面我們來看第二個測試啊 那這次呢 我發了一個非常簡單的題詞啊 幫我做一個獨立攝影師的 個人作品集的網站啊 然後就沒有其他任何的題詞了啊 那這樣呢 可以考驗AI在信息極度缺乏的時候 的自主決策能力 那首先啊 這個有skill的版本呢 是他直接問了我們幾個問題啊 包括整體的配色 色調的清線 然後核心的元素等等 然後沒有skill的版本呢 就直接開幹了 然後我們再看一下最後的效果啊 首先啊 這個沒有skill的版本啊 這個設計啊 非常的老套 首先深色的背景 然後霓虹發光的感覺 然後半透明的一些卡片啊 然後還有一些滿滿的 AI感的一些文案 那攝影師本該有的那種慢 真 自由的感覺啊 其實完全沒有體現出來 然後我們看有skill的版本啊 然後最後的效果 首先啊 他虛構了一個北歐的攝影師啊 從頭設計了一套完整的視覺風格啊 這樣啊 一下子高級感就上來了 從上面往下翻啊 就像在翻一本高端的攝影的畫冊 那看到了這個網站呢 你一定就會非常相信這個攝影師的審美了 真的是感覺非常 效果非常的不錯啊 那最後我們做一下總結啊 沒用skill的版本呢 說實話 本身已經很不錯了 首先OP4.7啊 這個模型很強 然後他裸跑出來的東西呢 其實比現在大多數的程序員 手寫的都會強 那skill帶來的提升呢 大概就是85分到95分的差距 從能用到好看 從完整到精緻 從合格到有風格 那這10分的差距呢 其實就是skill裏面看起來那些很瑣碎的規則 那每一條效果不大 但是加起來就會產生質變 那skill的完整文件啊 然後以及原始參考的Cloud Design的提示詞 包括幾個demo網站啊 我都打包到一起開源了啊 那大家需要的話呢 可以直接去github上搜這個項目啊 自取就可以了 那最後呢 再跟大家推薦一下 我最近在做的這個EZ Agent的這個開源項目啊 那上一個解說Harness的視頻發出之後呢 很多同學來問我 在實際的項目裏面 Agent Harness到底怎麼做 於是呢 我就做了這個開源項目啊 然後這個項目的目標呢 就是到最後叢林能夠復刻一個Cloud Code 類似Cloud Code的一個本地的agent啊 那最終完整更新下來的同學呢 都能具備叢林去開發一個企業級agent的能力 那也能夠清楚像Cloud Code的這種產品 它真實的Harness到底是怎麼做的 那如果你最近也在嘗試做agent領域的轉型啊 這個項目不容錯過啊 如果本期教程對你有所幫助呢 希望得到一個免費的三連 後續我會持續分享更多有價值的AI教程 感謝你的觀看 我們下期見