AI设计革命已进入实战阶段，从工具选型到工作流搭建正在重塑设计行业效率标准。本文深度拆解GPT Image 2、Nano Banana等顶尖AI设计工具的核心能力，并首次公开Agent+MCP+Skills三位一体的自动化工作流方案，通过官网设计、PPT制作、APP开发三大实战案例，揭秘300%效率提升背后的技术架构与落地方法论。

这次是内部分享内容，主要目的是AI设计提效以及具体落地的实践。

主要包括三个方面内容：AI工具合集、AI应用案例和AI工作流。

首先介绍目前主流的AI设计工具，接下来介绍 GPT image 2 在平面设计运营设计UI设计的提示词使用，最后使用 Agent、Skill、MCP，串联复杂工作流，产出具体的应用案例。

本期介绍的工具有：ChatGPT、Claude code、Figma MCP、 ChatGPT 、PPT Skill 、Google Stitch。

希望对大家有所启发。

一、AI工具合集

按照通用大模型、视频生成、音频音乐、3D 生成、代码助手五大领域划分。

01 AI设计

目前主流的三款AI设计工具： ChatGPT 推出的 GPT Image 2 、Gemini 推出的 Nano Banana 2 、即梦是国产最好的AI设计工具，图片和视频模型也是全球领先。

前段时间 ChatGPT 推出的 GPT Image 2 模型目前是最好的图片生成模型，开始了以假乱真的世界，比如马斯克抖音直播间卖货，各类社交软件截图等，后面我们会详细介绍使用方法。

专门介绍 GPT Image 2 使用文章可以跳转：https://www.woshipm.com/ai/6393292.html

谷歌Gemini 前端时间升级的 Nano Banana 2 本来是最好的图片生成模型，前提是 GPT Image 2 发布之前，当时也是引起了很大轰动，算是今年“设计师要失业”真正意义上的吹哨人，当然仅仅是今年。

专门介绍 Nano Banana 2 使用文章可以跳转：https://www.woshipm.com/ai/6376850.html

接下来即梦是字节旗下的大模型，目前是国内图片生成模型中最好的，每天都有免费积分，性价比拉满。前面两个作为国外模型使用起来有点门槛。

专门介绍 即梦 使用文章可以跳转：https://www.woshipm.com/ai/6209685.html

Midjourney也是不得不提到的，四年前彻底拉开开始AI绘画序幕的工具，当时还搭建在Discord上，V5、V7效果直接拉满，艺术审美特别好，对于插画艺术类更适用一些。

02 AI大模型

通用大模型，覆盖文档处理、逻辑写作、知识问答、代码编写等全场景办公与创作需求，国内外产品优势互补。

目前主流的Claude、Open AI、Deepseek、豆包。

Claude：Anthropic 研发，核心优势是超大上下文窗口，擅长百万字超长文档通读、合同解析、长篇文稿撰写，在严谨文本处理领域表现突出。

OpenAI（GPT 系列）：全球通用大模型标杆，综合能力全面，从日常问答、文案创作，到代码开发、多模态图文生成均可胜任，生态完善、落地场景最丰富。

DeepSeek（深度求索）：国产出海头部大模型，开源属性突出，数学推理、代码能力强劲，兼顾商用部署与个人免费使用，性价比优势明显。

豆包：字节自研国产大模型，深度适配中文语境与国内日常使用习惯，生活化对话、职场文案、学习辅导、内容策划都是主力应用方向，上手门槛低。

二、AI设计应用案例

把视觉设计拆分为 5 大落地类目，依托 AI 工具实现从品牌底层到线上落地全流程设计提效。

1. 视觉系统：聚焦品牌 VI 全案搭建，用 AI 快速生成品牌 LOGO、配色规范、字体体系、延展物料，统一全品牌视觉识别标准，是所有设计项目的底层基础。
2. 运营设计：面向活动营销场景，主打海报、长图、新媒体封面、节日宣传物料，AI 可快速迭代多版画面，适配短视频、公众号、朋友圈等多渠道传播需求。
3. 电商设计：围绕电商平台需求，涵盖商品主图、详情页、活动大促首页、直通车创意图，依托 AI 高效做产品场景渲染、版式批量生成，缩短电商上新周期。
4. UI 设计：聚焦 APP、WEB界面，包含页面原型、图标、组件库、交互界面出图，AI 辅助生成界面方案、图标素材，提升界面迭代效率。
5. 官网设计：针对企业官方网站，完成首页版式、栏目页面、banner 区块视觉设计，兼顾品牌调性与网页落地适配，一站式输出网页视觉稿。

01 品牌视觉

上传我的Logo，直接一键延展生成全套品牌视觉系统，包含标准色、辅助色、字体规范、应用延展、物料样机等，一站式搞定品牌 VI 全案。

基于这个logo，生成一套完整的品牌视觉系统

02 运营设计

专为品牌运营打造，生成产品宣传图、单品介绍图、配料详情图、套餐组合图。

生成一款中国风奶茶品牌，四款热销产品介绍图，配料介绍图，高级感，尺寸9:16

03 电商设计

极简电商出图流程：上传产品原图，测试上传一个耳机照片，自动制作电商产品详情长图，还给我分析了产品的六大核心优势，精准贴合产品定位与风格调性，使用场景和细节图，真的够细节！

帮我为这个产品生成产品详情长图，宣传图片要符合这个产品的气质和风格

04 后台设计

专注企业级视觉，为 B 端 AI 工具平台、管理系统、数据后台、 SaaS 平台生成专业官网，后台 UI 设计稿。

为 B 端 AI 工具平台生成一个官网的 UI 设计稿

05 官网设计

测试一下官网设计，这次我上传一张汽车的图片，自动识别出车辆品牌和型号，然后精准匹配产品气质，定制高端官网 UI。

为这款汽车生成符合其气质和风格的官网 UI 设计稿

三、AI设计工作流

在工作流的介绍中，分为用三个案例给大家讲清楚：UI设计、网站设计、PPT设计。

说到工作流首先先拆解AI工作流的三大底层核心：Agent+MCP+Skills

需要了解Agent（Claude Code 智能体）+MCP 跨平台协议 + Skills 内置插件

01 AGENT｜Claude Code 智能体（全流程大脑）

它是整套 AI 设计链路的指挥中枢，以 Claude Code 作为载体，核心职能是理解需求→拆解任务→分配调度工具。

02 MCP｜模型上下文跨平台协议（软硬件连接器）

相当于 AI 和本地软件的数据互通接口桥梁，解决大模型无法直接操控 Figma、代码编辑器、Office 的痛点：

03 SKILLS｜内置技能 / 插件（细分执行手）

封装好的模块化功能包，是落地细碎工作的执行单元，依附 Agent 调度、依托 MCP 完成落地。

案例一：企业官网设计工作流

在官网设计的案例中，我们会使用 Claude code 终端，Figma MCP 输出可编辑的设计源文件。

1. 1.Agent 统筹需求：输入企业介绍、业务板块，Claude 梳理官网栏目结构、首页文案、板块内容，完成全站点文案定稿；
2. 2.MCP 双向互通：一边 MCP 对接 Figma 生成官网视觉稿，一边通过 Claude Code 自动生成对应 HTML 源码，设计稿改动同步联动前端代码；

首先我们先安装Figma的 MCP：

claude plugin install figma@claude-plugins-official

安装完成后Claude code 中的提示：

接下来在终端中输入提示词：制作一个科技感AI Agent 官网，简洁点

终端会自己进行工作，中间会有些设计方向需要你进行选择。

等待一会Claude code 会给你输出文件地址，页面包括内容等基本信息。

打开给到html打开后，可以看到要求生成的科技感企业官网，包含滑动的动效，按钮点击交互，表单输入交互等，可以发现整体页面设计配色统一，设计交互也很完整。

接下来也是重要的一步，看看把 html 转化到 figma 中的效果，同样在终端中输入：

将这个设计放在figma中。

Claude code会在figma 中自己新建官网名称的文件，接着他会把把网站转化为可编辑的 figma 源文件，其中布局是自适应，元素图形是可编辑的。

这套工作流整体跑下来，非常高效快捷，在AI设计中工作效率直接缩短2-3天，可提升300%左右。

案例二：PPT 设计工作流

1. Agent 任务安排：向 Claude 输入需求，输出完整设计；
2. Skills 技能落地：调用内置文档技能，自动输出 PPT 模版，一键交付。

首先安装Skill：

npx skills addhttps://github.com/op7418/guizang-ppt-skill–skill guizang-ppt-skill

安装完成后，把PPT大概内容 txt 放到 claude code 终端，并且输入提示词：

制作一个科技风格演讲PPT

终端会自己进行工作，中间会有些设计方向需要你进行选择。

完成后，会给到页面 Html 、页面结构内容等基本信息。

打开 html 可以看到生成的PPT，按左右键，进行翻页，还有细致的翻页动画、页面元素出现的动效，点击交互等，整体页面设计可以说很细节。

输出八张PPT内容如下，还可以告诉Claude code 输出PPT格式等，接下来可以自己进行修改页面内容。

这套工作流整体跑下来，也是非常快捷，工作效率直接缩短，可提升200%左右。

案例三：APP UI 整套设计工作流

使用 Claude Design 或者 Google stitch 设计工具设计整套UI 的工作流 。

• ChatGPT：说出产品内容，写出产品PRD
• Stitch：说出设计风格、主色等设计出整套UI

在设计 APP 时，可以采用“ChatGPT + Stitch”的 AI 协同工作流，大幅提升产品设计效率。

首先，通过 ChatGPT 输出完整的产品 PRD，包括产品定位、目标用户、核心功能、业务流程、页面结构、用户旅程、功能优先级以及交互逻辑等内容。例如，只需输入“设计一款面向健身爱好者的健身 APP”，ChatGPT 即可快速生成包含首页、训练计划、课程、饮食管理、数据统计、个人中心等模块的产品需求文档，为后续设计提供清晰的产品框架。

在 Stitch 中输入产品PRD和设计风格：你读下这篇 PRD帮我生成相关主要页面，然后帮我生成一下里面所涉及到的主要页面。

Stitch 会根据需求自动生成整套 UI 界面，包括首页、日历页、训练计划、个人中心等多个页面，并保持统一的设计语言、组件规范、色彩体系和视觉风格。

选择单个画板和单个元素可以输入提示词进行修改，例如修改配色、更换插画风格、优化页面布局等，无需重新绘制界面。

还可以进行页面交互预览等，对设计系统进行修改。

整个流程实现了从产品规划到视觉设计的一站式 AI 创作，大幅减少需求整理、线框设计和视觉搭建的时间，让设计将更多精力投入到用户体验优化和创意表达中。

四、总结

AI设计之提效的关键

无论是做网站还是做PPT，AI提效的核心不在于“AI多强大”，而在于“精准匹配工具”和“清晰下达指令”：

• 工具匹配：跨平台协作（如设计转代码）用MCP协议对接外部工具，单一场景（如PPT）用AI内置Skills，避免多工具切换的低效；
• 指令清晰：给AI的指令需明确“需求、输出格式、细节要求”（如PPT的页数、配色、内容模块），减少AI误解，降低返工成本。

AI设计之未来发展

• 全流程自动化：从需求构思、设计输出、代码生成，到最终落地，实现AI全流程调度；
• 个性化适配：AI根据个人设计风格、品牌规范，自动匹配设计语言，减少后期调整；
• 跨场景协同：将网站、PPT、设计稿等场景打通，实现数据互通，进一步提升跨岗位协作效率。

后记

AI不是设计的“替代品”，而是帮我们摆脱重复劳动、提升创意价值的“利器”。通过Claude Code与Figma MCP、PPT Skills的结合，我们能清晰看到：AI能解决设计与开发的脱节、手动操作的低效、技能门槛的限制等核心痛点，让每一位从业者都能将时间和精力聚焦于创意本身。

未来，学会用AI工具、用对AI工具，将成为设计及相关从业者的核心竞争力。希望本次分享的实操场景和总结，能帮助大家快速上手AI提效，在工作中实现“高效创作、轻松落地”。