Claude Design 普通人怎麼用?能替代 Figma 嗎?

The Only Bamboo
243粉絲
claude Design:https://claude.ai/design
─── “加入我的AIGC讨论社群” ──
會一起聊聊怎么把AI用好,在工作中怎么帮助到自己的
希望大家通过社群发现新的方法,一起走得更远!
Wechat:zhuozhuo069365
因为精力有限,这个社群目前是自由讨论
─── “关于卓子” ──
过去的6年在移动互联网从事市场营销的工作,目前是一位自由职业者,也是一位摄影师,已经有一家一人公司,希望最终能有一个自己明亮可爱的工作室,在接下来的人生中持续学习,每天吃上家常菜,过上简单、自由、平静的生活。
───“我会分享”──
#AI工具:帮助上班族和企业真正的把AI融入业务中
#AI故事:创始人/陌生概念
#日常分享:平日的出行和生活中的小确幸
─── “你可以在这里找到我” ──
b站:一枚卓子
小地瓜:一枚卓子
前幾天Azureopic突然扔出了一個新產品
叫Cloud Design
消息一出
Figma的股價當天就跌了差不多7.7%
這個Cloud Design它到底是個啥
它真的能取代Figma嗎
普通人能用它幹嘛
今天咱們一口氣把它講清楚
登錄Cloud Design以後
你會發現主頁其實是分爲兩個區域的
左邊是讓你選擇你要建什麼類型的項目
右邊是你的設計和最新的項目
以及官方給的示例
還有設計系統
那其中這個設計系統是所有設計的基礎
如果把這個配置好了之後
你接下來所有的設計風格
字體
Logo都會選用設計系統裏面的
所以它是根基
它是一個種子
那我們來看一看怎麼創建設計系統
點擊創建
需要你輸入一些設計系統相關的信息
比如說公司的名稱和簡介
還有GitHub上面的代碼
爲什麼要讓你鏈接代碼呢
因爲代碼裏面通常都有詳細的數值
包括色值
字號
字體
字間距等等
特別精細的
已經通過公司的一些品牌標準審覈的
所以這個是最精準的
它把這個放在了前兩個
還可以本地上傳代碼
以及上傳Figma的一個文件
基於這個風格去設計
那它會讀取圓角啊
漸變啊等等
自動提取元素去幫你設計
最後就是添加你公司的字體
logo和相關的素材
去保證品牌視覺設計出來的一致性
如果都設計好之後
我們返回左側選擇類型這兒呢
其實主要是兩個類型
你不要看它有這麼多類型可以選啊
核心使用的還是前兩個
一個是原型
可以輸入產品名稱
然後接着選擇剛纔我們建立的設計系統
它就會按照設計系統裏面的風格
就給你設計了
那下面這個一個是線框圖
一個是高保真
線框圖就是一個粗糙的手稿圖和線稿圖
按鈕啊什麼的設計都不太完善
這是用於你在前期搭建頁面的結構的時候
或者跟團隊探討如何開發的時候去使用的
當你真正想要進入收尾的結尾的界面
那我們就選擇高保真
它出來的這個設計是最貼近
最終產品上線的那個最終效果圖的
按鈕啊色彩啊都是特別特別好的
在我們把這些東西都選擇好之後
我們就可以進入到實際的設計界面了
基本的流程是首先創建一個項目
添加相關的截圖和代碼庫
讓它參考風格
接下來去寫一個提示詞
一個好的提示詞應該包含
你要構建什麼佈局內容受衆
如果cloud需要更多信息
它會問你的
查看生成好的內容
接着用聊天和內聯評論的方式
進行修改和迭代
最後滿意了導出
我其實已經測試了兩個項目
我們先打開這個移動端的登錄頁
我最開始給它提示詞是
幫我畫一個移動端APP的
登錄頁線框圖
包含logo位
手機號的輸入框
驗證碼輸入框
獲取驗證碼按鈕和登錄按鈕
那接下來它其實是會問我一些問題的
包括你需要畫的多細呀
還有一系列的問題
方便它更精準地達到我的要求
我覺得這一步非常非常的好
大概等個5到10分鐘之後
它就會給我發來這4個登錄頁了
你可以看到它其實很簡易
logo也沒放logo
只是放了logo站位
有了基礎版之後
我們就開始細化了
細化其實是有三個方法的
一個是上面的評論
你可以點一下之後
再點具體的小的組件
比如說上面這個
我可以告訴它
我說把這個組件編成紅色評論
或者是這個把logo換成方形
當你點擊評論的時候
其實它不會發送給Cloud Design
當你選擇之後
它會統一彙總成一條
然後發送給Cloud Design
它再統一去修改
這是第一種方式
第二種方式是可以點編輯
那這個就跟傳統的設計師設計的
沒什麼區別了
你可以點組件
然後自己去調整寬度高度填充
這個就控制能力就更強
最後一種方式就是
我們在左側這裏
直接在聊天這裏跟它說
比如說我需要這四個界面
如何改所有的按鈕
橘黃色的改成什麼顏色的
那這個通常都是大改
它是統一的改
評論和編輯都是改細節
最後你覺得都OK了
這個非常滿意了
我們就點右上角的導出
它有很多個格式
比如說壓縮包
PDF
PPT
Canva和HTML
你還可以交接給Cloud Code去編輯
比如我點一下這個
然後我複製命令
直接在Cloud Code裏面
就可以讓它幫我繼續
根據這個前端的頁面去開發了
那以上就是Cloud Design
可以做的東西
當然因爲我的額度不太夠
我只做了兩個測試
一個是登錄頁
一個是如果我是一個產品經理的話
我要做一個APP的註冊流程圖
那它幫我畫出來一個
我可以方便跟我的團隊去探討
可以方便跟後端去交流
還有一個很有趣的地方
是這個調整的部分
這個是在你構建項目之前
它就會問你
你需要怎麼設置
這個需要調整和變化的模塊
比如我當時讓它幫我選擇
一個需要調整的這個地方
等它設計好之後
它就會給我一些選項
比如配色
我點一下黑白
它就變成黑白了
點一下冷色就變成冷色了
這個特別適合
比如說你們團隊有不同的意見
或者是你想看看
不同的效果怎麼樣
那你可以在前期
構建項目的時候就說好
有哪些軸是可以調整的
比如說可以調整顏色
可以調整字體的密度
還有這個背景的顏色
都可以設置好
這個是個非常有意思的
創新的一個設計和一個玩法
那除此之外
其實官方還給了很多個使用方法
我們可以點擊左下角的
這個你的用戶名
這有一個教程
你看它說可以做設計
工程產品銷售數據
市場營銷和其他
那你點每一個
它都會告訴你
大概的流程是什麼
那比如說市場營銷的話
我們可以做PPT
我們可以做落地頁
品牌素材
還可以做單頁文檔
這品牌素材你可以做什麼海報啦
宣發的圖啦等等
事例裏面是官方給你的用法
我特別強烈建議大家可以看一下
非常有意思啊
比如說這個是加載一個
帶有真實國家輪廓的旋轉地球
純單色無文字
你也可以去附用它這個提示詞
創作出一樣的
還有下面這個應用引導
給一個共享單車應用
畫一個iOS的註冊流程
採用什麼樣的配色方案
你看它真的很好看
下面這個是彩虹的撲克卡片
那最有意思的是
它會添加一些滑塊
讓你去調整這個顏色呀什麼的
還有一個着色器壁紙
你就可以鼠標移動
它就可以跟着你的鼠標
會有一些光暈和動效
最後就是文字力效果
這個很有趣啊
就是打一段文字
然後該有單詞的時候
它就會變成火呀
風呀
還有煙呀
雪呀
電呀什麼的
還有金子
很有意思
還有一些加載動畫什麼的
最後這個文本流逝傳輸
宇宙尺度動畫
以及計算器構件等等
如果大家在使用過程中
有什麼問題的話
可以點這個Dock文檔
這裏面寫的特別詳細
包括你怎麼創建一個新項目
什麼樣的提示詞是好的提示詞
目前呢
Cloud Pro Max Team
Enterprise用戶直接能用上
但也有幾個坑
首先它是獨立計費的
跟你平時問Cloud問題的額度
不是一個池子
有自己的周限制
其次目前還是研究預覽階段
說白了
Enthropic現在就是先把它丟出來
給大家玩一玩
真正成熟穩定的正式版
還得再等幾個月
最後它會幹掉Figma嗎
可能短期內它幹不掉Figma
但它會吃掉Figma
一大塊的外圍市場
AI設計工具能衝擊的是
那種標準化
快速出途
企業內部溝通的場景
但它衝擊不了的是
真正需要審美
情感和客戶反覆打磨的專業設計
所以Cloud Design搶的
可能不是資深設計師的飯碗
而是那些本來就不應該
讓設計師做的雜活
如果從這個角度看
它反而是幫設計師減負的工具
好了
今天視頻就到這裏了
讓我們下期視頻再見
拜拜
