我逆向了Claude Design!一句話幫你生成任何出色設計,開源後狂攬GitHub 1.6萬+stars!

The Only Bamboo
242粉絲
47 次觀看·2026年6月9日
Anthropic的Claude Design很惊艳,但要订阅、还费额度。我干脆把它的工作原理逆向出来,做成一个装在Claude Code里的开源skill:huashu-design,现在GitHub已经16000多star,MIT协议,个人商用都免费。这期我现场跑了四个真实任务:一句话做可演讲的PPT、投喂一张照片生成我的个人网站、做能点的iOS原型、再做一支产品宣传动画,全程没打开任何设计软件。
GitHub开源:https://github.com/alchaincyf/huashu-design
支持 Claude Code / Cursor / Codex / Trae / 龙虾 / Hermes 等任意 coding agent,装完跟你的 agent 说句话就行。
相关:女娲.skill(21k star)https://github.com/alchaincyf/nuwa-skill
时间戳:
00:00 我把Claude Design逆向成了开源skill
03:09 实测① 一句话做PPT(可导出可编辑PPTX/PDF)
06:39 实测② 投喂一张照片,生成我的个人网站
10:43 实测③ 一句话做可点击的iOS原型
12:47 实测④ 一句话做产品宣传动画
15:46 怎么安装(一句话装进任意agent)
AI 生成·可能包含錯誤
視頻概述
AI 生成這段影片介紹了一個名為「花束 Design」的開源 AI Skill,旨在解決 AI Coding 生成的網頁或 App 視覺設計過於簡陋的問題。該工具透過逆向工程優化工作機制,讓使用者能在各種 Coding Agent(如 Cursor, Claude Code 等)中,僅透過文字描述或提供參考圖片,快速生成高品質的網頁、PPT、App 原型及產品宣傳動畫。
並且做成了所有人都可以使用的這種開源項目skill
目前這個開源項目已經在Github上獲得了16000的stack
簡單來說的話
這就是一個可以讓你打字回車
然後就能獲得一個非常好的設計的一個skill
然後在這期視頻裏我會向你介紹
就是這個skill你到底能怎麼安裝怎麼用
能在哪些產品裏用
以及它做出來的實際效果是什麼樣的
它想解決什麼樣的問題
然後在視頻的後半段我也會給你做一些實際的演示
讓你真正理解你應該怎麼去使用它
以及它爲什麼能做出出乎意料的這種好效果
我們可以看一下
就是現在如果你有嘗試過AI coding的話
你可能見過非常多就是這種色系
這種色調的網站了
就是這種網站或者app
web coding出來之後
它倒不是不能用
但是它實在是太爛了
太難看了
所以的話就是cloud code
他們出了一個cloud design
可以讓你做出一個相對比較好的這種設計出來
但是他們存在的一個問題是
你必須得是cloud的訂閱用戶
用他們的產品才能去使用
而且之前消耗量特別大
可能很多訂閱了的用戶
也可能做了一個小任務之後
就已經完全不能再操作了
所以的話
我是把它的工作機制
工作原理做了一個逆向
去推出了我的花束計算
然後它變成了一個skill之後的話
你就幾乎可以在任何的coding agent裏面去使用
不管是cloud code的cursor codex
還是龍蝦hermes
或者像國內的tray
或者qcloud workbody之類的
其實都是可以安裝和使用的
然後它的具體的效果的話
我覺得最好的是我們可以看一下網頁
網頁的所有動畫
其實都是我的花束計算做出來的
就是你描述一個需求之後
它會給你提供幾個選擇
你選了一個風格之後的話
它就會給你根據這個風格
做出比較出色
以及視覺設計非常穩定的
這種PPT或者網頁或者別的一些東西
對這是它的一個完整動畫
甚至配音其實都是完全由我這個skill去完成的
所以的話你可以看出
就是從我的介紹裏你已經發現了
它可以去做交互的原型
可以去做app的
也可以去做網頁的
它可以去做PPT
PPT它既可以在瀏覽器中進行展示
也可以變成你可以下載的本地的文檔
然後同時它可以去做一些產品的宣傳動畫
然後我這個Github的倉庫頁面的
就是對於它每個能力的演示的動畫
其實也是就是花束design
這個skill它本身去製作出來的
所以你也可以通過這些演示動畫去理解
就是它能給你做到什麼樣的這種程度
然後接下來的話
我覺得我們要不就做一些實際的演示吧
我這裏使用的是Cloud Code
我們來嘗試先讓它給我們做一個PPT
對我這裏給它下了一個任務要求
就是說我要去一個公司
給非技術的白領工作者
去講解什麼是Coding Agent
尤其什麼是Cloud Code
然後整體大概可能只有半小時左右的時間
我希望他來幫我製作一個
輔助我去演講講解的PPT
這是一個非常常見的一個場景
我們來看一下我們的花束design
它是以什麼樣的工作流程給我們工作
以及它大概能交付一個什麼樣的結果
你可以看到就是
首先它沒有直接幫我去製作PPT
因爲它需要進一步瞭解我的需求
所以的話我們需要先去做一些選擇
對你可以看到就是
可以選完聽衆背景
講解目標以及視覺風格之後
我們還可以去要求一下不同的輸出物
這幾個我們都要
它在確認完需求之後
它現在已經開始去理解了
然後他目前就是發現就是有一些知識
他可能自己並沒有那麼的清楚
所以的話他需要先去做一些信息的收集
然後後面再去做具體的這種設計
他現在的一個情況是
他調查完信息之後
他做了一些理解
去拿到了就是我們要做的
這個產品的相關的配色
以及這個產品相關的介紹
然後他因爲要去做很多頁的這個內容講解
所以他會先去給我做兩頁
讓我去參考問我到底行不行
這個風格的話
我覺得還可以
那就讓他按照這個風格再繼續
我們可以看到就是他做完之後的話
他自己去做了一些自動的檢查
然後檢查完成之後發現
有幾頁是有問題的
是需要去修復的
然後他自動去完成了修復
對他整體還在修復過程中
但是大部分已經修復完成了
所以我們點過來來看一下
你可以看到這個是他完成的一個情況
這個是非常Cloud風格的
然後你可以就後續做PPT
你其實可以直接變成一個
在網頁裏去陳述呈現
這樣的話
其實表達起來會更容易
也更AI native一點
對這就是他做出來的一個效果
我覺得基本上能打八十分左右的水平
他用的完全是Cloud Code
他日常的風格
然後你可以看到
他所有的內容做完之後
他還在幫我們做PPT X和PDF的導出
然後我們可以看到PPT做完之後
你除了可以直接在網頁上看之外
他也給我做成了PDF以及PPT的格式
然後我們看一下
這是PDF的格式
像是維持的非常好
你這樣可以能非常方便的
把這個材料去發給別人去查看
然後還有一個就是PPT的話
就是打開之後是這樣的
基本上也是把格式維持的很好
並且就是所有內容
你都是可以編輯的
就是AI生成的內容
不是一次性完成
然後你就沒法改了
你完全可以在裏面做任何的調整和修改
這就是花束Design爲你做的PPT的這種效果
接下來的話
就是我們做另外一個任務
就是我讓他去幫我製作一個我的個人主頁
我希望後面別人加入我微信
或者說他在一些公衆場合出席之後
我能提供這個鏈接
幫助大家知道我是誰
我在做哪些事
能通過哪些渠道關注我
然後他現在說
風格上給了我三張這個選擇
我讓他不要
我要別的風格
然後我覺得這裏
我其實很想嘗試一下的是
他能做一個非常有意思的事
對
我想給他作爲一個提供一個比較特殊的一個視覺頭位
這個是我之前在一個飲料店前面拍的一張照片
我希望他使用這張照片的相關色系和風格來幫我製作主頁
如果你有自己的品牌
你有自己的品牌logo
或者說你有自己原來的一些品牌物料
或者你喜歡的這種風格的話
你都完全可以把這個圖片丟給你的agent
讓他去進行理解
然後按照你的要求的風格去出
而不是他推薦的
這些都是沒有問題的
然後我們回來再看一下網頁
我的個人主頁的製作
現在看起來
他是去理解了一下
這張圖的整體的視覺語言
然後他去寫腳本
去抽取了裏面的具體的色質
然後他搞項目去重新去給我梳理這個個人主頁的這種設計風格
這個就是你可以非常輕鬆
如果你有一幅喜歡的畫
喜歡的一個海報
或者喜歡的一個藝術作品
你都可以以這種方式去投餵他
要求他去進行做相應的設計
你可以看到他現在的動作是先把核心的色系色質都抽取出來了
然後他會把這個東西就是固化成一個叫brand spec的
就是一個文檔
然後他會基於這個文檔再去做相應的設計
你看他寫了一個非常詳細的
就是這個品牌是覺得這種要求
色系是什麼樣的
字形是什麼樣的
簽名的細節是什麼樣的
有哪些是禁區是不能做的
然後有哪些就是內容的核心數據是什麼樣的
然後現在的話
我們可以看到就是他的這個頁面已經做好了
然後頁面做好之後的話
他其實還有一個檢驗的過程
他會去調用去寫代碼
去進行整個網頁的截圖
去驗證他的設計到底有沒有問題
然後如果有問題的話
他會再去做一些修改
我們假設他沒問題
我們自己來先來看一下他做的怎麼樣的
OK
我覺得現在整體的質感其實還挺不錯的
這個是主頁
就是他把我的名字
把我的相信的一些東西
以及核心的那個元素都展示出來了
然後這裏提到了最近被央視報道
然後下面寫我正在做的一些事兒
然後可以在哪些渠道來找到我
以及可能像是我自己的一些個性簽名
以及底下有我的聯繫方式等等
這個其實確實非常符合我自己的一些個人風格
然後這個網站就是做完之後的話
他其實還給我提了幾個
希望我來確定的點
他說主視覺要不幫我換成真人照片
他覺得這樣會和整體頁面其實很搭
所以我就告訴他
可以讓他把照片加進去
然後我們看到的就是一個這樣的效果
確實比原來放一個所謂的印章
這種感覺要好很多
所以從這個對比下你也可以看到
就是這裏網站我們用的主視覺
就是我們照片裏的這種某種特別的一個藍色
以及抹茶的這個綠色綠色的這種視覺
就是把它的這種視覺元素用的非常的充分
OK
然後除了這兩者之外
我們再嘗試兩個任務
就是其中一個任務
我是讓他做一個iosapp的原型
還有一個的話
是讓他爲B站新推出的AI視頻產品花生
去做一個宣傳動畫
我們先從原型開始
我這裏想表達的是
我想根據高效能人士的七個習慣裏的理念
去製作一個管理個人圖度的iosapp
我讓他幫我做一個可交互的原型
然後底下的話
他就進行了一些理解
並且讓我去做了一些視覺氣質的選擇
以及功能深度的選擇
然後接下來的話
他自己就去理解了
他實際要做的一些具體的功能內容
和他應該怎麼去進行設計
然後中間出了一些bug
出了一些問題
他自己都完全修復給跑完了
然後我覺得這裏非常重要
和有價值的一個點是
就是我們很多時候
我們有很多就是這個產品的想法
然後我們不知道
到底這個東西有沒有價值去做
該不該做
而當你能讓AI直接去幫你生成
一個還不錯的原型
並且你能在這裏
直接去進行操作的時候
你可以看到就是
你去處理一些任務
他告訴你
這是一個什麼樣類型的一個任務
它是不是在你的影響圈
或者關注圈
然後你去做相應的安排
並且你的不同任務
他給你分配到不同的矩陣裏
就是這種完全可以直接操作
幫助你快速把你的想法
實現的這個能力
我覺得真的非常重要
你可能瞬間會發現
這個東西可能沒有做的價值
或者你發現這個東西還不錯
但是我想做的不太一樣
但總的來說就是
它可以讓你把你的想法
非常快速的去和別人去交流
就如果你是一個運營
或者一個產品的話
你完全可以做出這麼一板東西
去表達你的想法
然後去和你的研發去進行對接
去講你想要一個什麼樣的東西
我覺得這是一個能大大改變
工作流的一個能力
然後我們再看最後一個
就是這個是製作原型之外
我讓他去幫我去製作一個宣傳動畫
然後宣傳動畫的話
其實主要是想針對
就是跟我原來名字同名的
B站的AI視頻的產品
我覺得我這個花束錦賽
一個最有意思的一個特點是
他可以爲你想做的一個產品
或者你想推廣的一個概念
去製作一個宣傳動畫
這個動畫的話
我自己的判斷就是
他可能達到70分左右的水平
我們先看他是怎麼想的
就是首先我給他說了需求之後
他先去確認一下
這個東西到底存不存在
以及這是一個什麼樣的產品
然後他獲得了很多的信息
獲得完成之後的話
他非常好的一點
他去抓官網的logo
以及品牌色
這些真實的素材
因爲如果你要去做一個產品的
宣傳動畫的設計
你的整個視覺風格
應該儘量和這個產品相似
所以他抓完這些東西之後
他獲得了花生AI的品牌的DNA
然後獲得DNA之後
他問了我
想做一個什麼樣的動畫
要多長時間
我說要15到20秒
以及用B站這種16比9的格式
然後他問我內容上想突出什麼
我選的是就是全流程的一鍵成片
然後視覺基調要走哪一種
就是用品牌的這種漸變色
然後動畫的性質是什麼
這個是非官方的
不是我和官方合作的
是我自己想做的
那他現在已經在幫我
基本完成和實現這個動畫了
OK
我覺得這個動畫還挺有意思的
他真的用的完全是
花生的品牌logo
你看這個是他整體的過程
請爲我花生
對我們可以再看一遍
就是這個製作過程應該是什麼樣的
我覺得甚至他達到了
85分的我的這種期待水平
就是你能用一句話
就能產生這麼一段
去宣傳你產品的動畫
我覺得這真是一個非常
驚喜的一個東西
所以如果你現在平時
在做一些這種webcoding的事情
你有很多你自己的產品
想要去宣傳的話
我真的很建議你去做一個
用我的花生design
去製作一個宣傳的東西
在你的社交媒體上進行宣傳
而且其實除了做宣傳動畫之外
他也完全可以
就是你錄完一張B站視頻之後
如果你沒有那種
B肉的這種素材的話
其實你也完全可以讓他去幫你
根據你講解的內容
去製作一些動畫
OK
其實現在對他來說
就是他現在還在去做一些
想對這個項目做優化
但我覺得他現在效果
我已經基本上達到了
一個比較滿意的狀態
OK
這就是我的花生design
然後如果你關心
這個東西怎麼安裝的話
我給大家再做一個簡單的演示
就最簡單的
其實你可以把這個
B站的倉庫鏈接複製下來
我會放到簡介區
那我們假設如果你用的是
workbody
或者別的一些東西的話
就是你可以告訴他
幫我安裝這個skill
對
只要你發完這句話
你的agent完全就可以
自己幫你完成這個安裝了
