先写逻辑，再跟着逻辑生成专业UI界面
本文分享AI直接生成UI代码的落地经验，通过大模型 + skills + 精准的界面描述，省去 UI 设计绘图这一步，直接结合业务代码生成专业的系统性的UI代码
落地效果
以上界面，都是我先用 GLM-5 写的逻辑，然后再用Gemini-3去对页面、组件做的样式美化
对，就是**先写逻辑，再跟着逻辑快速出界面**，这种模式尤其适合追求效率的MVP产品验证、创业团队以及需要快速搭建的中后台管理系统。
我在Claude Code 中定义一个 Sub-Agent， 用 AI 直接生成结合项目逻辑的UI 代码
UI部分使用的模型：Gemini-3-Pro-Preview（在视觉美感与代码规范上表现突出）
skills： ui-ux-pro-max（注入UI/UX设计原则）、vue-best-practices（确保代码符合Vue框架最佳实践）
tools: Read Write Edit Grep
修改规则：不修改业务逻辑，只改动布局节点和样式代码
一、UI界面是如何构成的，专业的UI设计师画一张图是怎样排版的
通过了解 UI 设计师画一张设计稿时排版思路，去整体的了解界面是如何产出的，以便我们描述界面时系统性的考虑
- 背景层：
页面的底层： 纹理 + 图形
纹理：纯色、渐变、波点、弥散光感、文字图形、材质
- 主体层
- 页面的主视觉， 通常有一个完整独立的数据主体构成: IP形象、插画、2.5D插图、文字图形
- 信息层
- 需要被清晰、高效传达的文本与数据
- 修饰层
- 一般置于画面最顶层，使用不同的图形给整个画面又增加了一个层次，并点缀在画面比较空的地方，
- 添加互动，提升趣味性
一个UI界面都是这样从背景层 到主体 再到信息处 到修饰层，自下而上的构成
所以我们描述界面时，也可以用这样的一个思维框架去描述我们想要的界面
以上设计手法来自“菜心设计铺”，了解思路，灵活应用
更详细的设计可查看菜心设计铺（不用描摹，了解思路即可）：
推荐设计师账号：捕鱼实验室（小红书）：分门别类的排版思路集锦，非常实用
二、了解一下设计系统，确保一致性的“元规则”
设计体系是确保团队协作一致性、提升开发效率的“单点真相（Single Source of Truth）”，它通常包含以下四大层级：
1. 视觉基础参数
AI需要在一个一致的规则体系内创作。设计系统就是这个“单点真相”，它包含：
- 视觉基础参数：色彩系统、字体排版、间距网格、圆角阴影规范。
- 核心组件库：按钮、输入框、卡片、弹窗等由基础参数构成的可复用组件。
- 设计模式：常见的数据展示、导航、反馈等交互模式。
2. 核心组件库 (UI Components)
由视觉基础参数拼接组合而成的标准化控件，可复用。
这里看一下ElementUI、 Ant design等，不过多阐述
- 输入与操作类 (Inputs & Actions): 按钮 (Button)、文本输入框 (Input)、单/复选框 (Radio/Checkbox)、开关 (Switch)、下拉选择 (Select)、滑块 (Slider)。
- 导航类 (Navigation): 底部标签栏 (Tab Bar)、顶部导航栏 (App Bar)、侧边菜单 (Drawer)、面包屑 (Breadcrumb)、分页器 (Pagination)。
- 数据展示类 (Data Display): 卡片 (Card)、列表 (List)、表格 (Table)、头像 (Avatar)、徽标/红点 (Badge)、标签 (Tag)。
- 消息反馈类 (Feedback): 弹窗/对话框 (Modal/Dialog)、轻提示 (Toast)、警告提示 (Alert)、气泡提示 (Tooltip)。
三、高频使用的设计效果及语言描述示例
毛玻璃/玻璃拟态 (Glassmorphism): 弥散模糊背景 + 半透明白色填充 + 极细反光描边，营造通透感。
AI描述示例 驾驶舱页头部背景使用轻质感的玻璃拟态背景，以粉红色和紫色做弥散渐变背景
网格磨砂背景
体现科技感或现代感， 科技公司首选
常用于做卡片组件的背景
一般是给一个卡片纯色或者轻微渐变色，然后再加一点磨砂材质，再给规则网格
AI描述示例数据大屏卡片以主题色为背景，添加轻微的磨砂材质(噪点/颗粒质感)，再添加很浅的白色网格
背景之上添加一些卡片纹理，让页面有纵深感
卡片化设计
卡片化设计几乎是现在每个APP的必备了， 常作为一个功能的模块的容器
AI描述示例架构仓数据概览卡片使用对缺角异形卡片，打破常规的圆角卡片设计，背景色由至向下做渐变色，
卡片内部的数据项也同样用对缺角异形，并添加轻微纵深质感，给小卡片背景加一点装饰
四、长期多看UI界面，提升审美，总结UI效果和语言描述，才能在生成UI代码中快速实现越来越好的效果
推荐几个好的平台、博主：
菜心设计铺
捕鱼实验室
五、最后的思考：
问： 既然现在AI直接生成UI代码效果都这么好了，那还需要UI设计师吗?
答： 需要，更需要了。不需要的是因循守旧，画常规界面的设计师，现在尤其是 Gemini-3 这类模型，在生成UI 界面上已经做的非常好了，除了非常定制化的和创意的页面，其实用不上专业UI 去画了，那反而降低效率 提高成本了
需要的是能做定制化、情感化、创新型的UI设计师。
AI生成UI代码，说到底，还是对既有UI设计的总结归纳，并不能产生新的设计效果和风格。
我们更期待能独立探索并发现"矿脉"的UI设计师
问：未来所有的操作都可以在AI对话框中完成，那需要GUI界面吗
答：可能不需要现在的web app这类形式了，但会有别的载体和新的形式（脑机意识传输、全息投影、具身智能对话与展示...）。因为大部分普通人不可能接受冷冰冰的纯文本和数字，从恰到好处的视觉界面中获取信息还是比从终端 从对话中获取要舒服高效的多。
AI将使GUI的生成和迭代成本更低，形态更丰富，而非使其消失。
我是AIKO Nexus，与AI同行，实践中出真知，感知中热爱世界
公众号：AIKO的AI世界 持续输出AI实践干活与思考
