今天分享的是「 Claude出圖規(guī)范」。

對(duì)于內(nèi)容創(chuàng)作者、獨(dú)立開(kāi)發(fā)者以及非專業(yè)設(shè)計(jì)背景的從業(yè)者而言，Claude Design能夠借助AI能力，零代碼完成全套視覺(jué)物料、UI界面的制作。

用戶僅需提供參考截圖、指定字體名稱，并用簡(jiǎn)短文字描述期望的品牌調(diào)性與視覺(jué)感受，即可快速生成完整的品牌視覺(jué)體系和網(wǎng)站效果圖。

Claude Design會(huì)在平臺(tái)內(nèi)部自動(dòng)構(gòu)建結(jié)構(gòu)化的設(shè)計(jì)系統(tǒng)，涵蓋色彩調(diào)色板、字體規(guī)范、品牌調(diào)性規(guī)范及核心組件庫(kù)；后續(xù)所有設(shè)計(jì)產(chǎn)出都將嚴(yán)格遵循這套系統(tǒng)，確保品牌視覺(jué)的統(tǒng)一性與一致性。

想要獲得高質(zhì)量的AI設(shè)計(jì)產(chǎn)出，最有效的方法是使用專業(yè)的設(shè)計(jì)術(shù)語(yǔ)進(jìn)行溝通。以下是7個(gè)實(shí)用的出圖規(guī)范技巧，可立即用在你的Claude Design項(xiàng)目中～

規(guī)范1 統(tǒng)一采用8點(diǎn)網(wǎng)格間距系統(tǒng)

界面布局視覺(jué)效果不佳的問(wèn)題，90%都源于間距設(shè)置不合理。

當(dāng)所有邊距（margin）、內(nèi)邊距（padding）及元素間距都采用8的倍數(shù)（8、16、24、32、48、64px）進(jìn)行設(shè)置時(shí)，整個(gè)布局會(huì)呈現(xiàn)出專業(yè)、和諧的視覺(jué)秩序。

核心概念區(qū)分：

• 內(nèi)邊距（padding）：元素內(nèi)部?jī)?nèi)容與邊框之間的空間

• 外邊距（margin）：不同元素之間的空間

二者作用不同，不可混淆使用。

推薦提示詞："全文統(tǒng)一采用 8 點(diǎn)網(wǎng)格間距系統(tǒng)。"

規(guī)范2構(gòu)建清晰的標(biāo)題視覺(jué)層級(jí)

視覺(jué)層級(jí)指的是界面元素按照重要性呈現(xiàn)的先后順序。

如果主標(biāo)題（H1）與副標(biāo)題在視覺(jué)上沒(méi)有明顯的主次區(qū)分，就會(huì)導(dǎo)致用戶無(wú)法快速識(shí)別核心信息。

推薦提示詞："強(qiáng)化主標(biāo)題（H1）與副標(biāo)題之間的視覺(jué)層級(jí)差異。"

規(guī)范3文本行寬控制在65個(gè)字符左右

行寬（measure）指的是單行文本的寬度。過(guò)寬的文本行會(huì)導(dǎo)致用戶閱讀時(shí)視線跳躍過(guò)大，容易串行，顯著降低閱讀效率。

?最佳實(shí)踐：英文單行文本字符數(shù)控制在 60-75 個(gè)之間（中文約30-38 個(gè)字）。為文本容器設(shè)置固定最大寬度（推薦 600-700px），這樣可以保證版面緊湊，提升閱讀舒適度。

推薦提示詞："將所有文本行寬限制在約 65 個(gè)字符（中文 30-38 字）以內(nèi)。"

規(guī)范4 采用標(biāo)準(zhǔn)響應(yīng)式斷點(diǎn)

斷點(diǎn)（breakpoint）指的是響應(yīng)式設(shè)計(jì)中，頁(yè)面布局發(fā)生變化的屏幕寬度閾值。

行業(yè)標(biāo)準(zhǔn)斷點(diǎn)：

• 移動(dòng)端：375px（iPhone SE/14等主流手機(jī)寬度）

• 平板端：768px（iPad等主流平板寬度）

• 桌面端：1024px（筆記本電腦基礎(chǔ)寬度）

推薦提示詞："響應(yīng)式斷點(diǎn)設(shè)置為 375px（移動(dòng)端）、768px（平板端）和 1024px（桌面端）。"

規(guī)范5對(duì)所有元素設(shè)置合理約束

約束（constraint）是設(shè)計(jì)中控制元素尺寸與范圍的核心原則，適用于所有界面元素：

• 頁(yè)面整體最大寬度

• 文本行寬

• 容器組件尺寸

• 圖片顯示尺寸

避免任何元素?zé)o限制地拉伸或蔓延，保持界面的整潔與可控。

推薦提示詞："為所有容器和元素設(shè)置合理的最大寬度約束，防止內(nèi)容過(guò)度延伸。"

規(guī)范6用 "密度" 描述界面緊湊程度

密度（density）指的是界面元素排列的緊密程度，是專業(yè)的設(shè)計(jì)術(shù)語(yǔ)。

降低密度：增加元素間距，為界面留出更多呼吸空間

提高密度：縮小元素間距，在有限空間內(nèi)展示更多內(nèi)容

避免使用 "不要太亂"" 更簡(jiǎn)潔一點(diǎn) "這類模糊描述，用" 密度 " 術(shù)語(yǔ)精準(zhǔn)表達(dá)需求。

推薦提示詞："適當(dāng)降低頁(yè)面整體密度，增加元素間的呼吸空間。"

規(guī)范7保證觸摸目標(biāo)尺寸不小于 44px

觸摸目標(biāo)（touch target）指的是移動(dòng)設(shè)備上可點(diǎn)擊交互的區(qū)域大小。

根據(jù)蘋果iOS人機(jī)界面指南（HIG）及安卓 Material Design 規(guī)范，所有可交互元素的觸摸目標(biāo)尺寸應(yīng)不小于44×44px，以確保用戶操作的準(zhǔn)確性與舒適度。

推薦提示詞："所有可交互元素的觸摸目標(biāo)尺寸設(shè)置為不小于 44×44px。"

最后

每個(gè)專業(yè)領(lǐng)域都有其獨(dú)特的術(shù)語(yǔ)體系，設(shè)計(jì)也不例外。掌握專業(yè)的設(shè)計(jì)術(shù)語(yǔ)，能夠讓你與AI進(jìn)行更精準(zhǔn)、高效的溝通，從而獲得更高質(zhì)量的設(shè)計(jì)產(chǎn)出。

學(xué)會(huì)用設(shè)計(jì)師的語(yǔ)言表達(dá)需求，是用好Claude Design這類AI設(shè)計(jì)工具的關(guān)鍵。

來(lái)源 | Clip設(shè)計(jì)夾（ID：ClipppDesign）

作者 | 趙壹 ; 編輯 | 蝦餃

內(nèi)容僅代表作者獨(dú)立觀點(diǎn)，不代表早讀課立場(chǎng)