前端提效神器｜小米 HiUI 5.0 一句话搞定中后台页面

做B端中后台的小伙伴应该都懂：项目里80%页面都是重复模板。列表、筛选、分页、弹窗、表单……每次新项目都要从零搭建，调样式、对规范、改验收问题，耗时又枯燥。

现阶段 AI 页面生成工具层出不穷，大多能快速输出一个"Demo "，但是在企业级应用开发中，更多的是要求团队之间的视觉、交互、代码各个层面的规范与统一，这些demo往往只能作为探索与演示，无法真正的在企业级项目中落地。

今天分享一套可直接落地的HiUI5.0 DesignSkill实操教程。作为小米开源的企业级中后台设计系统，它最大的亮点不是“AI画图”，而是一句话生成可直接投产的生产级代码，自带规范、自带验收、自带业务页型模板，设计师、前端、产品都能用。

实操教程：4步生成完整中后台页面

Step1：环境准备

先配置环境，必须安装Node.js，地址：https://nodejs.org/zh-cn

安装完成后，打开电脑的「终端/命令提示符」，输入node -v 和 npm -v，能看到版本号就是安装成功。

Step2：创建项目

在Agent中输入：

新建一个react项目

Step3：安装skill

在Agent中输入：

npx skills add XiaoMi/hiui/skills/hiui-workflow --skill '*' 完成后把hiui design接入到当前项目中

这一步会安装4个skill，这4个skill会按照hiui-workflow编排的流程进行执行

• hiui-page-workflow：形成从需求到页面生成再到验收的开发流程闭环

• hiui-refine：负责把模糊需求、PRD 片段或业务想法细化成可进入页面实现的输入

• hiui-design：负责按 HiUI 规范规划页型、生成或修改页面，并执行工程侧校验（必须接入项目才能正常使用）

• ux-walkthrough：负责做系统性 B 端体验走查，输出结构化 UX 问题和正式报告

Step4：输入需求

在Agent中输入需求，可以是模糊需求也可以是具体的文档，例如：

@hiui-page-workflow 帮我做一个订单管理页，细化需求生成页面并验收

hiui-refine会给你一些选项，来澄清需求，需求澄清后，hiui-design进行页面的生成，生成后，ux-walkthrough进行体验走查，输出走查文档，你可以采纳意见并修复。

需求细化

方案确认

输出结果

使用小技巧

• 如果在已有项目中接入，可以先把项目代码拉下来，执行“Step3：安装skill”即可，完成后就可以输入需求了

• 需求探索阶段 运用 hiui-page-workflow 帮助从模糊需求直接产出符合规范的前端页面，收益最高

• hiui-refine（需求拆解细化）、hiui-design（页面生成）、ux-walkthrough（体验走查）都可以按场景独立调用

不同岗位精准提效

🔹 前端开发者

90%通用后台页面无需手写，表格、表单、详情页一键生成，规避基础bug，专注复杂业务逻辑、性能优化、工程架构，大幅降低重复搬砖成本。

🔹 B端设计师

不用反复输出基础页面稿、不用反复对齐前端还原度，Design Skill 生成页面自带统一规范，可把精力聚焦在业务流程、用户体验、细节交互优化上，彻底告别无效对齐工作。

🔹 产品经理

不会代码也能快速搭建真实可交互页面原型，不用等待开发排期，快速验证需求逻辑、演示业务流程，有效缩短项目迭代周期。

开源获取地址

HiUI 5.0 已正式开源，所有核心能力（Design Skill、体验走查、全套组件模板）全部开放，无限制。

做B端项目不用再重复造轮子，用好HiUI 5.0 Design Skill，让设计交付、前端开发真正「高效、规范、零返工」。

✅ 官网：https://xiaomi.github.io/hiui/

✅ GitHub开源仓库：https://github.com/xiaomi/hiui