AI生成UI内容，核心是让指令“精准落地”——新手不用死记复杂语法，掌握“用途+风格+具体参数”的逻辑，就能快速生成可用的色彩、图标和布局。以下是直接套用的技巧：

    一、色彩方案：3个关键词锁定精准配色

    1.明确“场景+风格+数量”

    提示词模板：「生成B端管理系统色彩方案，主色1种（科技蓝系）+辅助色3种（成功绿、警告黄、错误红）+中性色5种（灰白梯度），风格简约专业，符合WCAG2.1对比度标准，适配后台界面」效果说明：避免AI生成杂乱颜色，直接限定使用场景和色彩功能分工。

    2.补充参考锚点（可选）

    提示词模板：「参考阿里云控制台配色风格，生成电商APP色彩方案，主色#FF4D4F，辅助色2种，中性色4种，要求色彩和谐不刺眼」效果说明：新手不确定风格时，用知名产品做参考，降低决策难度。

    二、图标生成：细节参数决定可用度

    1.锁定“尺寸+风格+主题”

    提示词模板：「生成24px线性图标套装，主题为办公功能（包含文件、搜索、分享、设置），线条粗细2px，圆角2px，色彩#1890FF，背景透明，可直接导入Figma」效果说明：明确视觉细节和使用场景，避免AI生成比例失调、风格混乱的图标。

    2.强调“统一性要求”

    提示词模板：「16px扁平化面性图标，主题为物流模块（快递、仓储、运输），所有图标视觉重量一致，色彩统一为#666666，无多余装饰元素」效果说明：确保图标套装风格统一，直接用于页面不会违和。

    三、布局生成：说清“结构+元素+用途”

    1.明确页面类型与网格规则

    提示词模板：「设计B端数据列表页布局，采用12列网格系统，顶部为搜索栏（含3个筛选条件），左侧侧边栏（宽度200px），主体区为表格（5列数据）+分页组件，风格简约，适配1920px屏幕」效果说明：网格系统是布局统一的核心，明确后AI生成的页面更规整。

    2.限定元素与交互逻辑

    提示词模板：「生成移动端电商首页布局，顶部Banner（高度200px），中间分类导航（6个图标+文字），下方商品列表（2列布局），包含商品图、标题、价格、加入购物车按钮，风格清新，符合手机竖屏显示」

    新手避坑小提醒

    提示词不用长，核心信息（尺寸、风格、用途、数量）说透即可；

    避免模糊描述（如“好看的配色”“简洁的图标”），用具体参数替代；

    生成效果不佳时，新增1个限制条件（如“去掉渐变”“增大图标间距”），逐步优化。

Powered by Froala Editor