搜索到
1
篇与
的结果
-
当代码遇上AI绘画：图像生成大模型在开发中的妙用初探 预计阅读时间：9-11 分钟“代码改变世界，但‘颜值’同样重要！” 作为开发者，我们常常沉醉于用逻辑和算法构建强大功能，但在用户界面（UI）和用户体验（UX）的美学设计上，却可能感到力不从心。你是否也曾为仪表盘的配色方案而抓耳挠腮？为找不到合适的图标而焦头烂额？或者在与业务部门沟通需求时，苦于无法将页面原型快速具象化？更别提那些对UI有特定美学要求的项目，设计一套风格统一的UI组件背景图，有时简直是一项“不可能完成的任务”。幸运的是，人工智能的浪潮为我们带来了新的可能。近年来，图像生成大模型（如Midjourney, DALL-E, Stable Diffusion等）的惊艳表现，让我们不禁思考：这些强大的“AI画家”，能否成为我们开发工作中的得力助手，帮助我们跨越设计的鸿沟呢？这篇博文，便是我作为一名开发者，带着这些疑问所进行的一次探索性实践与思考。我将聚焦于开发过程中常见的几个设计痛点——仪表盘设计稿生成、应用/模块图标创作、页面设计稿快速草拟、以及UI组件背景图设计。为此，我选取了市面上几款主流的图像生成大模型进行了一系列实际测试，并尝试总结出一些初步的方法和心得。如果你也曾被上述设计难题困扰，或者对AI如何在软件开发中发挥创意潜力充满好奇，那么，这篇文章或许能为你打开一扇新的大门，激发一些有趣的灵感。让我们一起看看，当冰冷的代码逻辑遇上AI的无限想象力，会碰撞出怎样的火花吧！图像生成模型概览与作品对比在探讨如何将图像生成模型应用于开发之前，我们不妨先对几款知名且应用广泛的模型进行测试，以便对它们的使用方法和生成效果有一个基本了解。这里，我们以“小蝌蚪找妈妈四格漫画”为题进行创作。MidjourneyMidjourney 的使用方式类似于命令行工具，核心指令是 /imagine，后接描述性的提示词（Prompt）。可以通过参数如 --ar 控制图片宽高比，--v 指定模型版本。{callout color="#4da1ef"}/imagine prompt: 4-panel comic strip, "Tadpole Looking for its Mother" story. Panel 1: Lost tadpoles. Panel 2: Tadpoles meet goldfish. Panel 3: Tadpoles meet turtle. Panel 4: Tadpoles find frog mother. Cute children's book illustration style, simple lines, vibrant colors. --ar 1:1 --v 7.0{/callout}Midjourney 通常会一次性返回四张候选图片，这种“N张选一”的模式在AI图像生成领域中颇为常见，便于用户快速筛选出满意的结果。从这些作品来看，Midjourney 能够理解图片中需要包含的核心视觉元素，但对于复杂的叙事性提示词，其整体理解和故事连贯性表现尚有不足，生成的漫画系列有时略显混乱，缺乏明确的故事线。为了更细致地控制，我们可以让 Midjourney 仅生成四格漫画中的特定一格。例如，我描述了一个小蝌蚪在月色池塘中的场景，并指定了绘画风格：{callout color="#4da1ef"}/imagine prompt: Panel 1 of a 4-panel comic: A group of cute little black tadpoles with long tails swimming in a clear pond, lily pads in the background. One tadpole looks determined. Empty speech bubble above them. children's book illustration, simple lines, vibrant colors, cartoon style, --ar 1:1 --v 7.0{/callout}总的来说，Midjourney 生成的图片在精美度和细节表现上相当出色，比较符合儿童画的风格，并能按照提示词要求预留对话框空白。不过，小蝌蚪的形象有时略显怪异，这或许与其模型在训练过程中接触了大量抽象或风格化艺术作品有关。ChatGPT (集成DALL-E)ChatGPT 的图像生成功能（通常由DALL-E模型驱动，并受益于GPT-4o等大语言模型的强大理解能力），允许用户通过自然对话的方式来生成图片。提示词： 以“小蝌蚪找妈妈四格漫画”为题创作一副儿童读物画风的四格漫画。ChatGPT 一般一次返回一张生成的图片。生成的漫画在视觉上可能略显粗糙，文字内容往往不准确甚至混乱，但它确实基本还原了故事梗概，并且画风也比较贴合儿童读物的定位。SoraSora 的核心定位是文本到视频 (Text-to-Video) 生成模型，但它同样具备生成静态图片的能力，并且可以直接理解中文自然语言。需要注意的是，Sora 目前的交互方式可能不支持复杂的多轮对话调整。提示词： 以“小蝌蚪找妈妈四格漫画”为题创作一副儿童读物画风的四格漫画。Sora 可以一次性返回多张图片。Sora 生成的漫画中，文字的准确性相对较高，也能较好地呈现故事情节，图像具备一定的观赏性。其主要特点（或可视为局限）在于画风可能相对统一，变化较少。主流图像生成模型特性对比根据笔者的使用体验，ChatGPT 和 Sora 更适合对图像编辑专业度要求不高的用户，其自然语言交互方式非常便捷，适合日常快速出图，对图像的极致精细度或艺术性要求不高。Midjourney 则更受设计类专业人士青睐，他们可以通过反复调整提示词（“刷图”）、尝试不同的关键词和参数组合，来追求富有美感的理想图片。笔者还测试了其他几款主流的图像生成模型，根据交互方式、生成图像特点及使用体验，总结如下表：模型/工具名称模型架构(推测)所属机构交互方式文本生成准确度图像编辑能力ChatGPT (集成DALL-E)两阶段生成/类自回归OpenAI自然语言，支持多轮对话中支持gemini-2.0-flash-preview-image-generation类自回归/扩散模型结合Google自然语言，支持多轮对话中支持SoraDiT (Diffusion Transformer)OpenAI自然语言，支持Remix高支持 (主要指风格迁移等)豆包 (Doubao)去噪扩散字节跳动自然语言，支持多轮对话低支持Midjourney去噪扩散Midjourney关键词&参数，Remix功能强大低不直接支持像素级编辑DALL-E 3 (独立API或特定平台)去噪扩散OpenAI关键词&参数，不支持原生Remix交互中API层面可支持编辑 (需编程)小结： 对于开发过程中的图像生成需求，Sora 在理解复杂需求和中文语境方面表现出强大潜力，尤其适合生成故事性、场景感强的内容。 若需要对现有图片进行较精细的编辑（如图形微调、元素增删），ChatGPT、Gemini 或豆包的（局部）编辑功能则更为实用。Midjourney 虽在艺术创作上独树一帜，但在追求快速、功能性的开发辅助场景中，其学习曲线和操作方式可能不如其他模型直接高效。图像生成应用实践仪表盘设计稿生成模型： Sora提示词： 生成一张PC端的审计可视化仪表盘截图，只包含图表，没有导航栏或者菜单。仪表盘使用中文语言，仪表盘分为左中右三列，每列有2-3张图表，深色科技驾驶舱主题。Remix： 增加仪表盘的科技感和驾驶舱氛围。(注：Remix 指的是对已有图像或生成结果进行二次创作、风格迁移、元素重组或细节调整的过程。)Remix： 将图表替换成更复杂的图表，例如“矩形树图”，“热力图”，“地图”。对于简单的图表，可以在一个卡片里面绘制多个，增加信息密度和视觉冲击力。Remix： 以北大红（由深到浅：#9c0000、#c73535、#d96666、#e99797、#eeb2b2、#f4d4d4）为主题配色，仪表盘改为偏向浅色的风格，图表中的图形增加蓝、绿、黄等其他配色以增加视觉丰富度。应用/模块图标创作模型： Sora提示词： 在一个九宫格中生成家具资产管理系统的系列模块图标，以#94070A作为图标颜色，分别代表：家具建账申请、家具建账确认、家具资产管理、家具调拨申请、家具报废申请、低值家具建账申请、低值家具建账确认、家具盘点、院系家具资产管理。Remix： 继续在一个四宫格中生成家具资产管理系统其他模块的图标，分别为：院系家具盘点、校级家具盘点、院系家具报废管理、校级家具报废管理。生成的图标整体质量相当不错，大部分具有直接使用的潜力。在实际操作中，可以通过多次尝试和调整提示词来获取更贴近需求的图标。若需将生成的PNG图片转换为SVG矢量图，可以尝试使用在线转换工具，例如：PNG to SVG - online-convert.com。应用页面设计稿模型： Sora提示词： 请设计北京大学智能翻译助手的PC端网站页面，该网站不仅支持纯文本翻译，还支持语音实时翻译，网站采用现代简约浅色主题，页面需要带有一定的科技感但是不能太过夸张，在页面中添加一些小元素（图标、logo、卡片纹理背景等）彰显北京大学特色，网站UI风格可参考百度翻译。（并上传一张百度翻译的截图作为参考）Sora 生成的页面布局尚可，但整体设计感和细节处理方面，与专业设计师或开发者手动设计的精细度相比，仍有提升空间。模型： Midjourney指令：{callout color="#4da1ef"}/imagine prompt: UI design for a PC website homepage, "Peking University Intelligent Translation Assistant". Modern minimalist light theme, clean interface. Prominent text input/output areas for translation, language selection dropdowns, a clear microphone icon for voice translation. Subtle background pattern inspired by Peking University's architectural lines (e.g., Boya Pagoda outline). Small, elegant Peking University logo in the header. Tech-inspired icons, professional and academic feel. High fidelity mockup. --ar 16:9 --v 6.0 --style raw{/callout}Midjourney 生成的页面在视觉元素和氛围营造上更为出色，背景设计也颇具创意。然而，对于追求“开箱即用”的开发场景，其生成结果往往仍需大量的人工调整和后期处理才能真正落地。UI组件视觉风格探索模型： Sora提示词： 设计一套完整的网站组件UI视觉稿，包括按钮（primary、success、info、warning、danger）、文字链接、单选框Radio、多选框Checkbox、输入框Input、选择器Select、开关Switch、滑块Slider、时间日期选择器DateTimePicker、表格Table、卡片Card、文件上传Upload、导航菜单、页头，主色为#94070A，另外再设计2-3种辅助配色，确保网站配色协调又不单调。采用现代简约风格，浅色主题，背景是纯白色，PC端1920*1080分辨率。尽管提示词中要求设计一个完整的PC端页面来展示这些组件，但Sora目前直接生成完整、精细的PC端UI组件集合预览图的能力似乎尚有不足。不过，对于单个或小范围组件的风格设计、配色方案探索，它还是能提供不错的参考和灵感。带插图的应用功能摘要模型： Sora提示词：在一个四宫格中设计一个插画集，介绍我校AI教学智能体的实际应用，现代矢量风格的插画，采用渐变扁平设计，色彩要鲜艳、饱和度高，充满动感和积极向上的氛围： 1. 问答型的课程AI助教 2. 学科专业问答工具 3. 古籍OCR识别和整理工具 4. 文献研究助手，帮助阅读各类论文，提供专业解释此场景下，Sora能较好地理解需求并生成风格统一的系列插画，为功能介绍或宣传材料提供了高效的视觉支持。总结与展望通过上述一系列的探索和实践，我们可以清晰地看到，图像生成大模型确实有潜力成为开发者在设计工作中的得力助手。无论是快速生成设计灵感、制作原型草图，还是辅助创作图标、插画和探索UI风格，AI都展现了其独特的优势，尤其是在提升效率和帮助非设计专业背景的开发者跨越美学门槛方面。当然，我们也要认识到，目前这些AI工具尚不能完全替代专业设计师的工作。其生成结果的精细度、可控性、对复杂设计规范的严格遵循以及商业落地的成熟度等方面仍有显著的提升空间。正如本文的初衷——作为一次“初探”，我们更应关注其所开启的可能性，以及如何将其巧妙地融入我们的工作流。未来，随着模型能力的不断增强、算法的持续优化以及相关工具链的日益完善，AI辅助设计无疑将在软件开发流程中扮演越来越重要的角色。对于我们开发者而言，积极拥抱这些新技术，学习如何更有效地运用它们（“提示词工程”等），将是我们提升综合能力、释放创造潜力的关键一步。希望本文的分享能为你带来一些启发。让我们共同期待，代码与AI绘画的融合，能在未来碰撞出更多令人惊艳的火花！
