AI 提效：利用 AI 提升 UI/UX 设计师与产品经理的工作效率
最近一个星期都在 干UI/UX 设计师 工作 ，分享一下我的 经验。
希望这篇文章对大家有帮助
`
文章目录
- [AI 提效：利用 AI 提升 UI/UX 设计师与产品经理的工作效率](#AI 提效：利用 AI 提升 UI/UX 设计师与产品经理的工作效率)
- [1. 引言](#1. 引言)
- [2. AI 在 UI/UX 设计中的应用](#2. AI 在 UI/UX 设计中的应用)
-
- [2.1 自动化设计生成与实战](#2.1 自动化设计生成与实战)
-
- [2.1.1 运营提出新需求](#2.1.1 运营提出新需求)
- [2.2 分析需求和具体实现](#2.2 分析需求和具体实现)
-
- 2.2.1分析需求
- [2.2.2 app 是 ios 尺寸 确认](#2.2.2 app 是 ios 尺寸 确认)
- [2.2.2 这个app 使用什么设计风格](#2.2.2 这个app 使用什么设计风格)
- [2.2.3 这个app 有几个页面？](#2.2.3 这个app 有几个页面？)
- [2.2.4 html 编码原则](#2.2.4 html 编码原则)
- [2.2.5 提示词整合 交给ai 完成](#2.2.5 提示词整合 交给ai 完成)
- [2.2.5 实现 豆包网页版-编程](#2.2.5 实现 豆包网页版-编程)
- [2.2.6 导入墨刀](#2.2.6 导入墨刀)
- [2.2.7 利用墨刀 转为png 格式](#2.2.7 利用墨刀 转为png 格式)
- [2.2.8 pdf 导入到蓝湖](#2.2.8 pdf 导入到蓝湖)
- [2.2.9 主要步骤](#2.2.9 主要步骤)
- [3.AI 提效的实践应用](#3.AI 提效的实践应用)
- 4.持续挑战与未来趋势
- [5. 结语](#5. 结语)
1. 引言
在当今快速发展的科技行业中，UI/UX设计师和产品经理是技术和产品开发团队中的关键角色。尽管两者的职责不同，但目标一致------都致力于提升用户体验，满足用户需求。UI/UX设计师侧重于产品界面的设计和用户体验的提升，而产品经理则主要负责项目的规划、团队的协作以及确保产品按时交付。
这两个角色在日常工作中常常面临许多共同的挑战，例如与开发团队的沟通、应对市场的快速变化，以及平衡设计与功能的优先级等。这些挑战要求他们具备出色的合作和应变能力，同时还需要对产品的整体战略有深入的理解。
如果你是小白。这篇文档可以帮你成为初步的UI /UX 设计师
2. AI 在 UI/UX 设计中的应用
我目前 使用的工具有很多
- UI/UX 工具
Sketch：非常受欢迎的设计工具，适合制作UI原型和高保真设计图。
Figma：一个基于云的设计工具，便于团队协作，支持实时更新和反馈。
Adobe XD：适合设计和原型制作，和Photoshop、Illustrator等工具兼容性强。
InVision：专注于交互设计和原型设计，支持团队协作。
Framer：用于高级互动原型设计，支持动画和微交互。
墨刀 (MockingBot) ：墨刀是一个国产的原型设计工具，主要用于交互设计和UI原型制作。它支持团队协作、实时反馈、设计文档生成等功能，适合快速迭代和制作交互效果。
Axure RP：强大的原型设计工具，支持复杂的交互设计。
Marvel：简单易用的原型设计工具，适合初期设计阶段。
pencil : 简单易用 黑白设计工具
Axure RP：强大的原型设计工具，支持复杂的交互设计。
- 协助工具
蓝湖 (Lanhu)：蓝湖是一个本土的设计协作平台
-
画图工具
photoshop， fireworks ,GIMP
-
html
你可能需要了解前端html 5和 CSS 语言。
本文将介绍怎么使用 ai + 墨刀 +蓝湖+GIMP 完成 一个产品原形图。
墨刀地址 我这里需要个人版 墨刀 ，每年 199元。
ai 我们使用 claude code ，deepseek ，豆包，元宝都可以
2.1 自动化设计生成与实战
介绍 AI 如何自动生成界面设计，节省时间和提升质量。
2.1.1 运营提出新需求
比如说一个需求，我需要设计一个 app 叫 star app ，用户可以登录后，查看自己用户信息并退出 。
2.2 分析需求和具体实现
2.2.1分析需求
- 这个app 是 ios 还是 安卓 是什么尺寸？
- 这个app 有几个页面？有那些基本 组件 ?
- 这个app 使用什么设计风格？
- 这个app 跳转流程是什么 ？
需要定下来 可以使用 墨刀
2.2.2 app 是 ios 尺寸 确认
选择原型图
我们假设是 iphone 16 pro 402*874 确认画布
2.2.2 这个app 使用什么设计风格
个性化设计
这个需求ai 提示词工程
时尚简约风格
简约留白视觉设计，类似Apple设计风格，创造宁静感、提升可读性、突出重要内容（如图片、标题、产品）、营造高级感和纯粹感。
主要使用无衬线字体，具有现代感、易读性高。标题、正文、说明文字之间有显著的大小、字重或色彩对比字母间距、行高往往设置得略大于默认值，提升易读性和开放感。
网格对齐，保持视觉秩序，让布局感觉开阔、不拥挤。
按钮形状简单，文本标签清晰，常用主色或反白处理，视觉重量轻巧，但足够醒目。表单边框简洁，有足够的间距，标签清晰，视觉干扰少。
扁平化风格
扁平插画设计风格，使用纯色块、简洁的图标、清晰的排版。
配图使用扁平插画，颜色丰富，现代感十足。元素没有立体感，按钮看起来就是纯色矩形或圆形。图标设计高度简化，采用轮廓式/填充式的单色或双色图标，追求快速识别性。
色彩使用大胆、明亮且饱和度高，常使用纯净的单色块。
使用无衬线字体，具有现代感、易读性高。标题、正文、说明文字之间有显著的大小、字重或色彩对比。文字通常直接置于纯色背景上，确保高对比度和易读性。
通过大小对比、间距（留白）、色彩明暗/饱和度差异、简单的线条分隔来构建界面元素之间的层次和逻辑关系。
核心按钮添加非常轻量的阴影，增强可交互性的暗示，而非制造深度。增加微小的渐变，多位邻近色或同色系渐变，通常用于增加一点点视觉丰富度或指示高亮区域。有轻微的纹理，非常克制的细微图案（如点阵、极细线条纹理），不喧宾夺主。
页面中配有简洁的动画，聚焦于功能性和流畅性的过渡动画，而非复杂的装饰动画。
未来科技风格
颜色：黑、白、深灰为主底色，配合蓝紫、青绿、红橙等荧光色点缀。
材质：核心模块背景增加精细的噪点纹理/抽象几何图形/磨砂玻璃质感，半透明、反光材质，突出未来感与科技冷峻美感。
图形：科技图形语言，使用电路板纹理、数据流动画、粒子元素、几何阵列图形。
字体：通过字号、字重、颜色和间距的强烈对比建立清晰的视觉层次结构，引导用户视线。
现代商务风格
现代企业商务风格，布局清晰，界面干净，元素排布有序且有逻辑性。
克制冷练的配色方案，以中性色为基础，如深邃稳重的深蓝、藏青、炭灰、石墨灰、中灰、浅灰、米白、乳白。这些颜色奠定专业、可靠的基调。
行高宽敞，段落间距舒适，避免拥挤。克制地运用字重（粗细）和大小写（大小写字母），避免过多粗体，利用字重变化建立清晰的层级。
简洁的基础上追求材质感和工艺感。微纹理，细腻的磨砂感，常作为背景或卡片纹理。 按钮、卡片、头像等元素使用克制的圆角（如4px-8px）。
我们假定使用 现代商务风格
2.2.3 这个app 有几个页面？
设计 工作流
1 启动页
应用启动后首次加载的页面，通常展示品牌Logo和加载动画，为用户提供沉浸式体验。此页根据用户登录状态自动判断是跳转至登录页或直接进入首页。
进入登录页
进入首页
2.登录页
用户输入注册凭据(如手机号/邮箱和密码)进行身份验证的入口页面。页面提供清晰的输入字段、登录按钮，以及注册和找回密码的辅助链接，确保用户顺
成功登录
前往注册
忘记密码
3.注册页
新用户创建账户的页面，引导用户输入必要信息(如手机号/邮箱、密码和验证码)以完成注册。页面包含用户协议和隐私政策链接，保障信息透明度。
注册成功
返回登录
4.忘记密码页
此页面允许用户通过验证身份(如短信验证码或邮箱验证)来重置其账户密码。设计简洁直观的步骤，确保即使忘记密码也能快速恢复账户访问权限。
重置密码成功
返回登录
5.首页
应用的核心入口页面，展示主要功能模块的快捷入口和个性化内容推荐，提供用户一站式的信息获取和操作体验。顶部通常包含搜索栏和个人中心/
个人信息查看页
退出登录
6.个人信息查看页
展示用户个人详细资料的页面，如头像、昵称、UID、性别、生日、联系方式等，清晰呈现用户在应用中的身份信息。页面提供编辑入口，方便用户随时
编辑个人信息
返回首页
7.个人信息编辑页
用户可以修改其账户各项个人资料的页面，提供可编辑的输入框和选项，确保信息更新的便捷性。所有修改在提交后会即时同步并反馈给用户。
保存修改
取消编辑
2.2.4 html 编码原则
html5代码编写原则：
1.将 css 样式表，js 都写在html 文件里面，每个文件可以独立运行。生成如下7个单独的html页面 让我可以复制
2。确保每个页面都严格符合 iPhone 16 Pro 的 402×874 像素要求。
精确设置 viewport 元标签，确保宽度固定为 402px
在 body 和主容器上添加固定尺寸约束，确保宽度固定为 402px ，高874 px
调整部分元素布局，防止内容溢出，确保宽度固定为 402px ，高874 px
-
绝对定位的容器包裹所有背景元素，并设置 overflow-hidden，确保背景效果不会超出 402×874 范围
-
所有背景元素，图片都是 402×874 范围内
-
确保内容在 874px 高度内合理分布
-
确保所有元素都严格约束在 402×874 的尺寸范围内，同时保持了原有的视觉效果和交互功能。设计成可导入的墨刀的 html 语法。
2.2.5 提示词整合 交给ai 完成
bash
你是 UI/UX 高级设计师，你有20年的 设计经验和 前端开发经验。
目前总裁安排你 一个新需求。这个需求将决定公司未来，否则公司就完了，所以你不能犯错。主要需求如下 ：
需要生成一些页面并通过 html 导入到墨刀，完成页面设计和交互 ，
项目名称： starApp 产品原形设计
app 名称 ： star App
画布大小 ： iphone 16 pro 402*874
页面大小 ： iphone 16 pro 402*874
html5代码编写原则：
1.将 css 样式表，js 都写在html 文件里面，每个文件可以独立运行。生成如下7个单独的html页面 让我可以复制
2.确保每个页面都严格符合 iPhone 16 Pro 的 402×874 像素要求。
2.1精确设置 viewport 元标签，确保宽度固定为 402px
2.2在 body 和主容器上添加固定尺寸约束，确保宽度固定为 402px ，高874 px
2.3调整部分元素布局，防止内容溢出，确保宽度固定为 402px ，高874 px
3. 绝对定位的容器包裹所有背景元素，确保背景效果不会超出 402×874 范围
4. 所有背景元素，图片都是 402×874 范围内
5. 确保内容在 402×874 范围内合理分布
6. 确保所有元素都严格约束在 402×874 的尺寸范围内，同时保持了原有的视觉效果和交互功能。设计成可导入的墨刀的 html 语法。
设计风格 ：未来科技风格
> 颜色：黑、白、深灰为主底色，配合蓝紫、青绿、红橙等荧光色点缀。
> 材质：核心模块背景增加精细的噪点纹理/抽象几何图形/磨砂玻璃质感，半透明、反光材质，突出未来感与科技冷峻美感。
> 图形：科技图形语言，使用电路板纹理、数据流动画、粒子元素、几何阵列图形。
> 字体：通过字号、字重、颜色和间距的强烈对比建立清晰的视觉层次结构，引导用户视线。
> 设计：需要考虑iphone 16 pro 灵动岛的布局
设计 工作流：
1 启动页
应用启动后首次加载的页面，通常展示品牌Logo和加载动画，，为用户提供沉浸式体验。此页根据用户登录状态自动判断是跳转至登录页或直接进入首页。
进入登录页
进入首页
2.登录页
用户输入注册凭据(如手机号/邮箱和密码)进行身份验证的入口页面。页面提供清晰的输入字段、登录按钮，以及注册和找回密码的辅助链接，确保用户顺
成功登录
前往注册
忘记密码
3.注册页
新用户创建账户的页面，引导用户输入必要信息(如手机号/邮箱、密码和验证码)以完成注册。页面包含用户协议和隐私政策链接，保障信息透明度。
注册成功
返回登录
4.忘记密码页
此页面允许用户通过验证身份(如短信验证码或邮箱验证)来重置其账户密码。设计简洁直观的步骤，确保即使忘记密码也能快速恢复账户访问权限。
重置密码成功
返回登录
5.首页
应用的核心入口页面，展示主要功能模块的快捷入口和个性化内容推荐，提供用户一站式的信息获取和操作体验。顶部通常包含搜索栏和个人中心/
个人信息查看页
退出登录
6.个人信息查看页
展示用户个人详细资料的页面，如头像、昵称、UID、性别、生日、联系方式等，清晰呈现用户在应用中的身份信息。页面提供编辑入口，方便用户随时
编辑个人信息
返回首页
7.个人信息编辑页
用户可以修改其账户各项个人资料的页面，提供可编辑的输入框和选项，确保信息更新的便捷性。所有修改在提交后会即时同步并反馈给用户。
保存修改
取消编辑2.2.5 实现 豆包网页版-编程
使用豆包网页版-编程 -将提示词复制
你也可以使用其他的Ai 编程工具 如 claude code，我这里做了一个尝试。
ai 工作中 ，完成，后需要将 7个html 下载，分别导入 。
豆包编程预览
2.2.6 导入墨刀
使用墨刀 html 导入功能
来了清晰版
2.2.7 利用墨刀 转为png 格式
2.2.8 pdf 导入到蓝湖
2.2.9 主要步骤
- 设计提示词
- 将提示词 给AI 工具 如 豆包 ， claude code
- 完成后，下载 html
- 导入到墨刀 （墨刀 本身有ai 设计工具就是贵，很贵）。通过墨刀 html转原型的工具。
- 利用墨刀 转为png 格式
- 将png格式导入到 蓝湖等 协助工具 。完成设计
3.AI 提效的实践应用
AI工具在UI/UX设计流程中的实际应用包括原型设计、用户测试和设计系统生成。通过AI生成设计稿草稿，ChatGPT等工具可以快速创建低保真原型，节省设计师手动绘制时间模型。Figma插件如Uizard能够将手绘草图转化为数字原型，大幅ูปรับ AI生成的设计系统组件库可确保团队协作时风格统一。
产品经理可利用AI分析用户行为数据，提出功能优化建议。例如，通过Hotjar或FullStory的AI功能自动识别用户痛点，并生成可视化报告。利用Notion AI整理用户反馈，自动归类高频问题，辅助优先级排序。AI驱动的A/B测试工具如Optimizely能第二阶段快速验证假设，缩短决策周期ú。
4.持续挑战与未来趋势
尽管AI能提高效率，但当前仍存在设计版权归属模糊、生成结果不可控等问题。部分工具如Adobe Firenal需人工调整配色和布局，且对复杂交互逻辑的处理能力有限。团队需建立AI产出物的审核流程，确保符合品牌标准和用户体验原则。
未来可能出现跨平台设计适配AI，一键生成iOS/Android/Web三端兼容脚本。生成式AI将更深入参与用户旅程规划，通过模拟用户心理模型产出更精准的解决方案。AI与AR/MR技术的结合可能催生实时环境适配的响应式界面设计工具，例如根据用户屏幕尺寸动态调整布局。
5. 结语
AI工具正从辅助角色逐渐演变为创意合作伙伴，但核心设计思维仍需人类主导。建议团队建立AI使用规范文档，明确哪些环节 degraded 哪些环节必须人工把控。定期评估AI工具 Đạt 的ROI，避免过度依赖导致设计省内同质化。本质上，AI的价值在于释放设计师和产品经理的 scripting 时间，让他们更专注于策略性思考和情感化设计。
最后是墨刀的生成源码 见资源绑定。