前端提效神器｜小米 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