Loading

Qwen-Image-2.1生成UI界面提示词教程（附整合包下载）

Qwen-Image-2.1生成UI界面提示词教程（附整合包下载）

关键词：Qwen-Image-2.1、Qwen-Image-2.1 UI界面、AI生成UI界面、App界面设计提示词、AI界面设计、Qwen Image提示词、AI生成App界面

文章摘要：本文整理 Qwen-Image-2.1 生成 UI 界面的官方完整提示词，以旅行规划 App 界面为例，包含状态栏、导航栏、卡片列表、底部标签栏等完整界面结构描述，提示词保持原文不变，可直接复制测试，文首附整合包下载地址，文末附 UI 界面提示词写法要点与常见问题。

大家好 这里是「代码简单说」

欢迎大家关注同名公众号,不定时更新更多实用有趣的教程 也欢迎大家在评论区一起讨论交流!~

这篇文章主要分享一下 Qwen-Image-2.1 生成 UI 界面的提示词写法。
在这里插入图片描述

Qwen-Image-2.1 对界面类图像的支持比较好，官方示例里有一个完整的旅行规划 App 界面案例，从状态栏、导航栏到卡片列表、底部标签栏都有完整描述，生成出来的界面文字清晰、层级明确。我把这条官方提示词原样整理出来，做 UI 设计参考、产品原型演示或者给文章配界面图时，可以直接复制使用。

一、整合包下载

如果不想自己配置环境，可以直接使用 Qwen-Image-2.1 整合包，支持文生图 + 图片编辑，6GB 及以上显存可用，适合本地直接体验。

项目 地址
整合包下载 Qwen-Image-2.1整合包：支持文生图+图片编辑

二、生成 UI 界面前的准备

  1. 模式选择：不输入图片即为文生图模式，UI 界面属于文生图场景，直接写提示词即可。
  2. 智能改写：测试官方提示词时建议关闭智能改写，保证提示词按原文发送，变量一致。
  3. 分辨率：手机界面建议选 2K 竖屏 1536×2688（9:16）；自定义输出尺寸时宽高范围均为 256–2688（步进 8）。

三、Qwen-Image-2.1 生成 UI 界面完整示例

示例：旅行规划应用界面（Travel planner UI）

参考输出

完整提示词（智能改写：关）

The image is a vertical smartphone screenshot of a modern travel planner app interface named "Wanderlust", designed with a clean, light-themed aesthetic, soft shadows, and rounded corners, fully occupying the screen. The top edge features a standard status bar with black text "9:41" on the left, and on the right, black cellular signal bars, a Wi-Fi icon, and a battery icon showing "85%". Below the status bar is a top navigation bar. On the left, a circular user avatar shows a smiling young woman with a light blue background. Next to it, bold black text reads "Good morning,
Sarah". On the far right, a dark gray rounded square icon contains a white gear symbol for settings.

The main hero section is a large, rounded-corner card with a soft drop shadow. The background is a vibrant, high-quality photograph of the Santorini coastline with white cubic buildings and bright blue domes against a clear sky. Overlaid on the bottom left of the image is a semi-transparent dark gradient. Text inside reads "Santorini,
Greece" in large bold white font, followed by "Oct 12 -
Oct 19" in smaller white font. On the bottom right, a solid white rounded button contains black text "View
Itinerary". At the very top right of this card, a small white pill-shaped badge contains black text "5 Days
Left".

Below the hero card is a section titled "Plan Your Trip" in bold dark gray text. Underneath is a row of four evenly spaced, light gray rounded square cards with subtle borders. The first card contains a blue airplane icon and black text "Flights" below. The second card contains an orange bed icon and black text "Hotels" below. The third card contains a green camera icon and black text "Activities" below. The fourth card contains a purple train icon and black text "Transfers" below.

The next section is titled "Suggested for You" in bold black text, with a blue text link "See All" aligned to the right. Below is a vertical list of three destination recommendation cards, each with a white background and a soft shadow. The first card has a square thumbnail of the Eiffel Tower on the left. The right side has the title "Paris" in bold black, the subtitle "Romantic
Getaway" in dark gray, and a bottom row containing a yellow star icon, black text "4.8", and a small light gray pill with black text "Flights from
$450". The second card has a square thumbnail of the Colosseum on the left. The right side has the title "Rome" in bold black, the subtitle "Historical
Tour" in dark gray, and a bottom row containing a yellow star icon, black text "4.7", and a small light gray pill with black text "Flights from
$520". The third card has a square thumbnail of a Swiss Alpine village on the left. The right side has the title "Zermatt" in bold black, the subtitle "Mountain
Retreat" in dark gray, and a bottom row containing a yellow star icon, black text "4.9", and a small light gray pill with black text "Flights from
$600".

Below the suggestions is a section titled "Past Trips" in bold black text. This section contains a vertical list of two past trip history cards. The first card features a rectangular thumbnail of the neon-lit Shibuya crossing on the left. The middle area displays the title "Tokyo,
Japan" in bold black text and the dates "Aug 05 -
Aug 12" in dark gray text. The right side features a solid blue rounded button with white text "Rebook". The second card features a rectangular thumbnail of the red rocks of the Grand Canyon on the left. The middle area displays the title "Arizona,
USA" in bold black text and the dates "May 10 -
May 15" in dark gray text. The right side features a solid blue rounded button with white text "Rebook".

The bottom layer is a fixed bottom navigation bar with a pure white background and a subtle top shadow, spanning the full width. It contains four evenly spaced interactive elements. The first element is a solid blue home icon with blue text "Home" directly below. The second element is a gray magnifying glass icon with gray text "Explore" directly below. The third element is a gray calendar icon with gray text "Bookings" directly below. The fourth element is a gray person icon with gray text "Profile" directly below. The entire interface uses a consistent design language with uniform corner radii, a harmonious color palette of white, light gray, dark gray, and vibrant blue accents, and clear typographic hierarchy ensuring all text is perfectly readable.

四、UI 界面提示词写法要点

从这条官方提示词里可以提炼出几个写 UI 界面提示词的关键点：

  1. 先定整体：开头一句话说明这是什么界面（竖屏手机截图、浅色主题、圆角卡片、软阴影），先确定整体设计语言。
  2. 按区块从上到下描述：状态栏 → 顶部导航栏 → 主卡片 → 功能分区 → 底部标签栏，一个区块一段，顺序和真实界面一致。
  3. 组件逐个写清楚：每个卡片、按钮、图标单独描述，包括颜色、形状、图标内容和相对位置。
  4. 文字内容直接写进提示词：标题、按钮文字、日期、价格、评分都明确写出，模型会按内容渲染。
  5. 收尾统一约束：最后强调统一的圆角半径、配色体系和排版层级，避免各区块风格不统一。

五、常见问题

1、生成的界面文字出现乱码怎么办？

长段中文比英文更容易出错。可以把界面文字控制在短词组，减少整句中文，多生成几次挑选效果；界面里的正文内容也可以留白，后期再补。

2、能不能生成网页界面？

可以。把提示词开头的 vertical smartphone screenshot 改成桌面浏览器窗口的描述，再按同样方法从上到下分区描述导航栏、Hero 区、内容区和页脚即可。

3、智能改写要开还是关？

复现这条官方示例时关闭智能改写。自己写界面提示词时可以开启，让 API 先扩写一遍，再和原始提示词的效果做对比。

4、生成后想改某个按钮文字怎么办？

把生成图重新作为输入图片进入图像编辑模式，用一句提示词说明需要修改的位置和内容，例如把某个按钮文字替换成指定文案，配合局部编辑完成。

六、总结

以上就是 Qwen-Image-2.1 生成 UI 界面的完整提示词教程，核心思路是按区块拆解界面、逐个描述组件、文字内容写明确。按照这个结构改写成自己的界面需求即可，遇到文字渲染问题时可以结合常见问题部分排查。

本系列其他文章（Qwen-Image-2.1 官方提示词分场景整理）：

  • 角色立绘篇：透明背景立绘与三视图
  • 试卷生成篇：AI 生成数学试卷
  • 信息图篇：学术信息图、科普卡与时间轴
  • 商品图篇：电商产品图与广告摄影
  • 人像篇：发型表情编辑与老照片修复
  • 分镜篇：漫画分镜与广告故事板
  • 多图合成篇：多人合照、换装与局部重绘
posted @ 2026-09-23 20:47  代码简单说  阅读(63)  评论(0)    收藏  举报