1
全局:设计也用 “说” 的
设计的 90% 是 “一致性”。定好几种颜色、一两款字体、留白规则,就会专业得多。Claude 会帮你立规则,并做成代码里能直接用的形式。
本路线按 配色与字体体系 → Logo → 界面草模 → 图片 的顺序,用说话做出一个统一的品牌。
小贴士
先定一个示例品牌再开始。例:“面向都市上班族的安静冥想应用,名叫 SOOM”。越具体效果越好。
免费 · 基础
做设计
没有美感,也能用说话产出干净的设计
约 30 分钟9 步
完成后你将拥有
一整套:配色与字体体系、Logo(SVG)、界面草模、主视觉图片
准备清单
Claude Pro 及以上订阅必需
把设计想法变成代码(SVG/HTML)和图片提示词的大脑。可在 claude.ai 直接用,或用 VS Code 的 Claude Code 扩展。
电脑和网页浏览器必需
预览做好的设计(SVG/HTML),一个浏览器就够。
(可选)图片生成工具可选
需要照片级图片就配一个 AI 图片生成器。没有的话,可用 Claude 做插画风的 SVG、图形。
(可选)VS Code可选
想把设计直接落进代码,就像前面的编程路线那样用 VS Code 更方便。
2
第1步, 准备 Claude
3
第2步, 写设计简报
用一段话写清做什么、给谁、什么感觉。对 Claude 说:“为冥想应用 ‘SOOM’ 定设计方向。氛围安静、极简;受众 20〜40 岁上班族;希望传达可信与放松。”
Claude 会整理出氛围关键词、推荐配色方向和字体气质。这就是之后的标准。
小贴士
有喜欢的品牌或应用,就说 “像某某那种感觉”,方向能更快定下来。
4
第3步, 建立配色与字体体系
说:“为 ‘SOOM’ 做一套配色。给出主色、辅色、背景、文字色的 HEX,并说明各色何时用。再推荐适合的免费字体,分标题用和正文用。”
拿到的 HEX 和字体名就是设计骨架。不喜欢的颜色就说 “主色换成更安静的青绿”,立即替换。
小贴士
想看颜色搭不搭,让 Claude “用这套配色做一张展示色卡(swatch)的 HTML”,用浏览器打开看。
5
第4步, 做 Logo 和图标(SVG)
说:“把 ‘SOOM’ 文字 Logo 做成 SVG,柔和曲线感,用上面定的主色,旁边再加一个象征吸气/呼气的简单符号。”
把拿到的 SVG 代码贴进一个空文本文件,存成 logo.svg,用浏览器打开就能看到 Logo。再调 “符号更简单”“字距更宽”。
小贴士
SVG 放多大都不糊,最适合 Logo 和图标。改色、改大小也只是一行代码。
遇到报错怎么办？
6
第5步, 做界面草模(HTML/CSS)
说:“把 SOOM 应用的首页草模做成一个 HTML 文件,用上面定的色/字体/Logo,中间放一个 ‘开始今天的呼吸’ 大按钮,下面三张推荐冥想卡片,用手机比例。”
把代码存成 design.html 用浏览器打开,就像真界面一样。这一步在做真应用前先把样子定下来。
小贴士
需要多个界面,就接着说 “用同样风格再做设置界面”,以保持统一调性。
7
第6步, 做图片(主视觉/插画)
需要照片级图片,就让 Claude 给你喂给图片生成器的英文提示词:“给 SOOM 首页写一段英文提示词,要一张安静的破晓薄雾湖面,贴合品牌色(青绿、米白)。”
若不必是照片,可让 Claude 直接用 SVG/CSS 做图形、渐变的抽象背景。无文字的抽象图形用这种方式更准确。
注意
图片生成器常把文字弄糊。别把 Logo 或文案塞进图片,按第 4〜5 步用 SVG/HTML 叠在上面更干净。
8
第7步, 整理素材并实际应用
把做好的色值、字体、Logo(SVG)、图片文件汇总到一个文件夹(assets)。然后就把这套设计直接用到网站/应用/视频路线里。
想直接落进代码,就在 VS Code 对 Claude 说:“把这套色/字体/Logo 应用到我的 Next.js 项目里”,它会连接好。
小贴士
把 SVG Logo 也存一份 PNG(在浏览器截图或转换),做幻灯片、社媒等处处可用。
9
完成!以及下一步
恭喜,你有了一套颜色、字体、Logo、界面、图片彼此协调的品牌。
把这套设计与网站/应用/游戏路线结合,成果看起来就真正专业了。把设计发到社区收集反馈吧。
