Claude + Figma 策略和设计成品AI工作流
这里有 10 组超强提示词,手把手教你 👇
1、先定策略,再谈设计
动笔之前,先把思路理清楚。
Claude 提示词:
你是资深产品策略师。
帮我为 [业务类型] 梳理出清晰的定位。
目标用户:[人群]
他们的核心痛点:[问题]
想要的结果:[结果]
给我:
• 一句话价值主张
• 3 个情感钩子
• 5 个不同角度的标题
• 相比竞品的差异化定位
有了这些,后面做设计才有方向。
2、搭建网站结构
现在来画蓝图。
Claude 提示词:
你是 UX 架构师。
为 [业务类型] 设计一个高转化率的网站结构。
包括:
• 首页结构(从上到下)
• 需要哪些页面(首页、关于我们等)
• 每个板块的目的
• CTA 按钮怎么放
要兼顾转化率,不只是好看。
现在你就有了线框图的大纲。
3、逐段写线框文案
别画空框子,把文案填上。
Claude 提示词:
按这个结构:
[粘贴结构]
为每个板块写简洁、促转化的文案。
语气:直白、自信、说人话
阅读难度:初中水平
别废话,突出好处和清晰度。
写好后直接贴进 Figma 当线框文案。
4、定视觉风格
现在来设计外观。
Claude 提示词:
你是资深品牌设计师。
为 [行业] 品牌设计一套现代视觉风格指南。
包括:
• 配色方案(带色值)
• 字体搭配(Google Fonts)
• 按钮样式
• 间距系统
• 品牌调性关键词
品牌要给人的感觉:[如高端、亲切、大胆]
现在你就有一套迷你设计系统了。
5、转 Figma 布局
在 Figma 里:
• 按板块建画板
• 应用间距系统
• 用自动布局
• 保持组件一致
要优化布局时,问 Claude:
针对这些板块,给首页建议清晰的视觉层级:
[粘贴板块]
解释间距、对齐和视觉重点的最佳实践。
结构立马变专业。
6、打造高转化首屏
首屏最关键。
Claude 提示词:
优化这个首屏文案:
[粘贴标题 + 副标题]
要达到:
• 5 秒内看懂
• 突出结果
• 具体实在
• 不说空话
给 5 个更强的版本。
在 Figma 里测试不同版本。
7、设计吸引力报价区
外包公司收几千美金才能做出来的东西。
Claude 提示词:
帮我为 [产品/服务] 设计一个让人无法拒绝的报价板块。
包括:
• 明确承诺
• 包含内容
• 额外福利
• 风险兜底
• 强力 CTA
简单但有说服力。
这就是你的定价或方案板块。
8、写 UI 微文案
细节见功力。
Claude 提示词:
为以下内容写友好、清晰的微文案:
• 表单标签
• 错误提示
• 成功确认
• 按钮文字
语气:有用、有人味、现代
不说机器话。
小改进 = 信任感大增。
9、输出开发可用文档
现在准备交付开发。
Claude 提示词:
把网站结构转成开发可用的交付文档。
包括:
• 板块 ID
• 组件清单
• 响应式规则说明
• CTA 交互逻辑
• 无障碍访问考虑
格式清晰,方便前端开发直接用。
现在 Figma 稿子变成可开发的文档了。
10、快速生成落地页变体
想做 A/B 测试又不用设计师?
Claude 提示词:
为同一产品创建 3 个不同角度的落地页方案。
角度 1:痛点驱动
角度 2:愿景驱动
角度 3:数据/权威背书
每个给出标题、副标题和大纲。
在 Figma 里复制页面,测试不同版本。
总结
这套 Claude + Figma 的工作流,让你也能在一个下午内做出生产级的网站。
核心优势:
• 省时间:不用反复沟通
• 省成本:不用高额设计费
• 高质量:Claude 帮你写出专业文案和策略
现在就开始试试这 10 组提示词吧!
