案例介绍

本案例基于华为云码道（CodeArts）代码智能体与UI-UX-Pro-Max技能深度结合，为开发者提供了具备专业设计能力的智能编程助手。该技能通过内置专业设计师知识库，显著提升AI生成界面的审美水平和专业度，有效避免“廉价AI感”。开发者只需自然语言描述需求，AI即可生成符合行业规范的高质量界面代码。

案例内容

一、概述

1.1 案例介绍

本案例基于华为云码道（CodeArts）代码智能体与UI-UX-Pro-Max技能深度结合，为开发者提供了具备专业设计能力的智能编程助手。该技能通过内置专业设计师知识库，显著提升AI生成界面的审美水平和专业度，有效避免“廉价AI感”。开发者只需自然语言描述需求，AI即可生成符合行业规范的高质量界面代码。

案例技术选型：

• 华为云码道（CodeArts）代码智能体：一个理解项目需求，懂得编码之道，善用百器的实干派AI研发专家，开启你的编码自动驾驶模式。本案例中作为交互工具，自动生成项目代码。

• 技能（Skills）：是一种能力封装机制，用于将专业知识（如编码经验、常见问题、解决方案等）组织为可复用的模块。技能本质上是由指令、脚本和资源构成的集合，智能体可按需动态加载这些专业化的“技能包”，从而提升特定任务的执行能力与执行效率。本案例使用UI-UX-Pro-Max技能，指导AI生成更专业、更有审美的界面。

1.2 适用对象

• 个人开发者
• 高校学生
• 企业开发者

1.3 案例时间

本案例总时长预计90分钟。

1.4 案例流程

说明：

1. 用户安装华为云码道 CodeArts 代码智能体；
2. 安装Node.js和Python开发环境；
3. 安装Vue和Python插件；
4. 华为云码道配置安装技能；
5. 华为云码道+技能，构建Web商城登录页；
6. 构建SaaS产品着陆页
7. 构建医疗健康仪表板；
8. 商品管理Web应用界面优化实践。

1.5 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）
华为云码道（CodeArts）代码智能体	体验版	免费

二、环境和资源准备

2.1 AI IDE华为云码道安装部署

参考案例《AI IDE华为云码道（CodeArts）代码智能体安装部署》完成Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署。

2.2 安装Node.js和Python环境

使用快捷键 Ctrl+Shift+`，新建终端，输入以下命令查看Node.js和Python环境是否安装？

复制代码

python --version
node -v
npm -v

如果没有安装，请参考案例《SKILL快速构建你的Java、Python和Node.js开发环境》一键配置Node.js和Python开发环境。

2.3 安装Vue和Python插件

本案例项目代码前端使用Vue，需要手动安装插件。打开码道AI IDE插件市场，在OPEN VSX页签搜索并安装Vue（Official）插件。

同样，安装Python、Python Debugger、Python Environments插件。

三、华为云码道配置技能

3.1 什么是UI-UX-Pro-Max技能

UI-UX-Pro-Max技能是一个给AI编程助手注入专业UI/UX设计能力的开源“技能插件”。简单来说，它就像一个内置了专业设计师知识库的超级大脑，能指导AI生成更专业、更有审美的界面，避免常见的“廉价AI感”。

3.2 功能特点

• 67 种 UI 风格 ：玻璃拟态、黏土拟态、极简主义、粗野主义、新拟态、便当盒网格、深色模式、AI 原生 UI 等
• 161 套色彩调色板 ：与 161 种产品类型一一对应的行业专属调色板
• 57 组字体搭配 ：精选排版组合，支持 Google Fonts 导入
• 25 种图表类型 ：针对仪表盘和数据分析的推荐
• 15 种技术栈 ：React、Next.js、Astro、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose、Angular、Laravel
• 99 条 UX 指南 ：最佳实践、反模式和无障碍规则
• 161 条推理规则 ：行业专属设计系统生成

通用样式(49种)：

序号	样式	适用场景
1	极简主义与瑞士风格	企业应用、仪表板、文档
2	新拟态	健康/ wellness 应用、冥想平台
3	毛玻璃效果	现代 SaaS、金融仪表板
4	粗野主义	设计作品集、艺术项目
5	3D 与超写实主义	游戏、产品展示、沉浸式体验
6	活力块状风格	初创企业、创意机构、游戏
7	深色模式（OLED）	夜间模式应用、编码平台
8	无障碍与伦理设计	政府、医疗健康、教育
9	黏土拟态	教育类应用、儿童应用、SaaS
10	极光 UI	现代 SaaS、创意机构
11	复古未来主义	游戏、娱乐、音乐平台
12	扁平化设计	Web 应用、移动应用、初创企业 MVP
13	拟物化设计	遗留应用、游戏、高端产品
14	液态玻璃	高端 SaaS、高端电子商务
15	动态驱动	作品集网站、叙事平台
16	微交互	移动应用、触摸屏 UI
17	包容性设计	公共服务、教育、医疗健康
18	零界面	语音助手、AI 平台
19	柔和 UI 演进	现代企业应用、SaaS
20	新粗野主义	Z 世代品牌、初创企业、Figma 风格
21	便当盒网格	仪表板、产品页面、作品集
22	Y2K 美学	时尚品牌、音乐、Z 世代
23	赛博朋克 UI	游戏、科技产品、加密货币应用
24	有机仿生	健康应用、可持续发展品牌
25	AI 原生 UI	AI 产品、聊天机器人、副驾驶
26	孟菲斯设计	创意机构、音乐、青年品牌
27	蒸汽波	音乐平台、游戏、作品集
28	维度分层	仪表板、卡片布局、模态框
29	极致极简主义	时尚、建筑、作品集
30	动态排版	英雄区、营销网站
31	视差叙事	品牌故事、产品发布
32	瑞士现代主义 2.0	企业网站、建筑、社论
33	HUD / 科幻 FUI	科幻游戏、太空科技、网络安全
34	像素艺术	独立游戏、复古工具、创意作品
35	便当网格	产品功能、仪表板、个人页面
36	空间 UI (VisionOS)	空间计算应用、VR/AR
37	电子墨水 / 纸张	阅读应用、数字报纸
38	Z 世代混沌 / 极繁主义	Z 世代生活方式、音乐艺术家
39	仿生 / 有机 2.0	可持续科技、生物技术、健康
40	反精致 / 原始美学	创意作品集、艺术家网站
41	触感数字 / 可变形 UI	现代移动应用、趣味品牌
42	自然提炼	健康品牌、可持续产品
43	交互式光标设计	创意作品集、交互式内容
44	语音优先多模态	语音助手、无障碍应用
45	3D 产品预览	电子商务、家具、时尚
46	渐变网格 / 极光演进	英雄区、背景、创意内容
47	编辑网格 / 杂志风	新闻网站、博客、杂志
48	色差 / RGB 分离	音乐平台、游戏、科技
49	复古模拟 / 复古胶片	摄影、音乐/黑胶品牌

着陆页样式(8种)：

序号	样式	适用场景
1	英雄区中心设计	具有强烈视觉标识的产品
2	转化优化型	潜在客户开发、销售页面
3	功能丰富展示型	SaaS、复杂产品
4	极简直接型	简单产品、应用
5	社交证明聚焦型	服务、B2C 产品
6	交互式产品演示	软件、工具
7	信任与权威型	B2B、企业、咨询服务
8	叙事驱动型	品牌、机构、非营利组织

BI/分析仪表板样式(10种)：

序号	样式	适用场景
1	数据密集型仪表板	复杂数据分析
2	热力图风格	地理/行为数据
3	高管仪表板	高管层摘要
4	实时监控	运营、DevOps
5	钻取分析	详细探索
6	比较分析仪表板	并排比较
7	预测分析	预测、机器学习洞察
8	用户行为分析	UX 研究、产品分析
9	财务仪表板	财务、会计
10	销售智能仪表板	销售团队、CRM

3.3 安装UI-UX-Pro-Max技能

在华为云码道对话框中，输入以下提示词安装UI-UX-Pro-Max技能。

复制代码

从https://gitcode.com/u014005316/ui-ux-pro-max 安装skills 到 ~/.codeartsdoer/skills/

智能体正在从gitcode拉取技能并安装到.codeartsdoer/skills/目录下。

3.4 使用UI-UX-Pro-Max技能

实践案例一：3D与超写实主义风格的web商城登录页

在华为云码道对话框中，输入以下提示词：

复制代码

调用ui-ux-pro-max skill，帮我设计一个3D与超写实主义风格的web商城登录页

右击login.html -> 在浏览器中预览：

实践案例二：SaaS产品着陆页

着陆页（Landing Page），也称为落地页或引导页，是用户通过点击广告、搜索引擎结果或其他第三方链接后进入的第一个独立页面。其主要目的是引导访问者完成特定操作，例如填写表单、注册、购买产品或下载内容等。

在华为云码道对话框中，输入以下提示词：

复制代码

调用ui-ux-pro-max skill，帮我的数据分析SaaS产品创建一个着陆页，使用Vue，风格要现代专业

浏览器中输入：http://localhost:5173

功能页面：

指标页面：

客户页面：

定价页面：

实践案例三：医疗健康仪表板

在华为云码道对话框中，输入以下提示词：

复制代码

调用ui-ux-pro-max skill，帮我设计一个医疗健康数据仪表板，需要显示患者趋势、对比数据，要求高对比度、无障碍友好

右击health-dashboard.html -> 在浏览器中预览：

四、商品管理Web应用界面优化实践

4.1 未使用技能，创建商品管理应用

华为云码道具有记忆功能，输入提示词之前，需删除技能并关闭记忆功能。

在华为云码道对话框中，输入以下提示词：

复制代码

使用python+flask，构建简单商品管理web应用，要求如下： 1、UI布局合理，界面美观； 2、实现商品添加、编辑、删除等功能； 3、代码可直接运行。

浏览器访问 http://127.0.0.1:5000

编辑或者添加商品：

4.2 使用技能，优化商品管理应用界面

使用UI-UX-Pro-Max技能，重新设计商品管理系统页面。

参考步骤“3.3 安装UI-UX-Pro-Max技能”重新安装技能。

在华为云码道对话框中，输入以下提示词：

复制代码

调用ui-ux-pro-max skill，帮我重新设计商品管理web应用中所有的界面，风格要现代专业

启动成功后，浏览器输入：http://127.0.0.1:5000/

添加或者编辑商品：

切换至深色模式。

使用UI-UX-Pro-Max技能优化后，界面审美水平与专业度较优化前均有显著提升，视觉层次与交互体验明显改善。

至此，智码美形：华为云码道 × UI-UX-Pro-Max 高品质界面智能生成实践的案例已全部完成。

五、反馈改进建议

如您在案例实操过程中遇到问题或有改进建议，可以到开发者论坛评论区反馈即可，我们会及时响应处理，谢谢！