后端逻辑用 C# 写得顺手，一到前端就换了一整套语法体系——React/Vue 的 JSX、TypeScript 的类型系统、npm 的包管理……好不容易硬着头皮上了，做出来的界面还总觉得差点意思：组件不够企业级、样式不够专业、没有那种"做了很多中台产品"才有的交互手感。
有没有一种方案，让 .NET 工程师用 C# 直接写前端，而且出来的界面天然就是企业级的？
有。这个项目叫 Ant Design Blazor。
它是什么
Ant Design Blazor 是一套基于 Ant Design 设计规范和 Blazor 框架的企业级 UI 组件库。
换句话说：蚂蚁集团那套在阿里内部经过无数次实战验证的 Ant Design 设计语言，现在原生跑在 Blazor 上，用 C# 就能调用。
你可以在 .razor 组件里这样写：
<Button Type="@ButtonType.Primary">Hello World!</Button>
页面出来的效果，和你在 Ant Design 官网看到的那些企业级组件——Button、Table、Modal、Form——完全一致。配色、间距、动效、交互反馈，全部对齐 Ant Design 4.x 的设计规范。
这意味着什么？用 C# 的开发体验，得到和蚂蚁内部产品同款的 UI 质量。
快速上手：三步跑起来
第一步：装模板（推荐）
dotnet new --install AntDesign.Templates
dotnet new antdesign -o MyAntDesignApp
一条命令，直接生成一个完整可运行的 Ant Design Blazor 项目。dotnet new antdesign 支持四个参数：
-f | | ||
-ho | | webapp、wasm、server | webapp |
--styles | css 或 less | css |
--no-restore |
第二步：在已有项目中引入
如果是在现有项目里添加：
dotnet add package AntDesign
在 Program.cs（Blazor WebApp）或 Startup.cs（旧版 Blazor Server）中注册服务：
// Blazor WebApp (新模板)
builder.Services.AddAntDesign();
// 旧版 Blazor Server (Startup.cs)
services.AddAntDesign();
在 _Imports.razor 中引入命名空间：
@using AntDesign
引入 CSS 和 JS 文件：
<linkhref="_content/AntDesign/css/ant-design-blazor.css"rel="stylesheet">
<scriptsrc="_content/AntDesign/js/ant-design-blazor.js"></script>
第三步：加入容器，写组件
弹出类组件（Modal、Message、Notification 等）需要一个容器。在 App.razor 中添加：
<Routes @rendermode="RenderMode.InteractiveAuto" />
<AntContainer @rendermode="RenderMode.InteractiveAuto" />
然后就可以在任意 .razor 组件里直接用 Ant Design 的组件了：
<Button Type="@ButtonType.Primary" OnClick="ShowMessage">点击我</Button>
<Modal @bind-Visible="@visible" Title="提示">
<p>这是一条来自 Blazor 的消息。</p>
</Modal>
@code {
bool visible = false;
void ShowMessage()
{
visible = true;
}
}
跨平台：Blazor 能跑的地方，它都能跑
这是 Ant Design Blazor 区别于其他方案的一个核心优势：它跑在 Blazor 上，Blazor 能部署的地方，它就能跑。
具体来说：
WebAssembly 客户端渲染
最常见的模式，打包成静态文件部署到任意 Web 服务器，CDN、Nginx、GitHub Pages 都可以。 SignalR 服务端渲染（Blazor Server）
适合需要 SEO 的场景，或者内网应用。 Blazor Hybrid 混合应用
.NET MAUI（iOS/Android/Windows/macOS）、WPF、Windows Forms——同一套组件库，复用 UI 代码。 Electron
用 .NET 做 Electron 的后端，前端用 Ant Design Blazor，桌面应用也能有企业级 UI。 PWA 渐进式 Web 应用
开箱即支持。
组件丰富度：Ant Design 4.x 全家桶
Ant Design Blazor 目前同步的是 Ant Design 4.x 的组件体系，涵盖了企业级中后台应用的方方面面：
基础组件：Button、Icon、Typography、Divider、Layout（栅格、响应式布局）
表单组件：Input、Select、Cascader、DatePicker、TimePicker、Radio、Checkbox、Switch、Slider、Upload、Form（验证、配额、动态表单）
数据展示：Table（虚拟滚动、合并单元格、固定列）、List、Card、Statistic、Timeline、Popover、Tooltip、Carrousel
反馈组件：Modal、Message、Notification、Alert、Spin、Progress、Drawer
导航组件：Menu、NavBar、Tabs、Pagination、Breadcrumb、Steps、Dropdown
据官方披露，正在推进 Ant Design 5.0 样式同步，antd 5.0 的新设计语言（CSS 变量主题、Design Token）后续也会支持。
国际化：几十种语言，开箱即用
做海外业务最头疼的事情之一就是多语言支持。
Ant Design Blazor 内置了几十种语言包，覆盖中文、英文、日文、韩文、法文、德文、西班牙文、阿拉伯文等主流语言。切换语言只需要在 _Imports.razor 中配置对应的语言文化设置，不需要手动写任何资源文件。
这个能力对有出海业务或者多语言中台系统的团队来说，是实打实的工程效率提升。
.NET 基金会项目：不是野路子
Ant Design Blazor 是 .NET Foundation 官方支持的项目，不是个人或小团队维护的玩具项目。
这意味着它有稳定的版本规划、有代码审查流程、有社区互助渠道——Discord（英文）、钉钉群（中文）、GitHub Issues，以及作者维护的 Blazor 中文社区（微信 JamesYeungMVP、QQ 群 1012762441）。
项目采用 MIT 协议，免费商用，无需付费，保留署名即可。放在企业项目里使用，完全没有合规风险。
站在巨人肩膀上：不重复造轮子
很多同学可能会好奇：Blazor 原生也有 UI 组件，为什么要用 Ant Design Blazor？
核心区别在于：Blazor 自带的 UI 能力是"能用"，Ant Design Blazor 做的是"好用且好看"。
Ant Design 之所以被国内大量中台系统采用，靠的不是花哨，而是克制：统一的色彩规范、恰到好处的间距和留白、一致的交互反馈。每一种组件状态（正常、hover、active、disabled、loading）都有清晰的定义，不需要设计师额外标注，开发直接照着组件库来就行。
Ant Design Blazor 把这套经过阿里内部和国内无数企业验证过的设计体系，完整搬到了 Blazor 上。你不需要有设计团队，也能做出专业级的中台界面。
官网有 Demo：先体验再决定
如果你在考虑是否要用，可以先去官网看看实际效果：
组件文档
https://antblazor.com/ — 所有组件都有在线 Demo，可交互 企业级仪表板 Pro
https://pro.antblazor.com/ — 完整的中台系统界面参考
不需要安装任何东西，浏览器打开就能体验。看完再决定，用不用都不会有任何损失。
结语
Ant Design Blazor 解决的是一个很具体的痛点：.NET 工程师想写好前端，但不想换技术栈。
它没有让你抛弃 C#、抛弃 .NET 生态，而是把 Ant Design 这套经过验证的企业级设计语言，直接用 C# 的方式呈现在你面前。你写的还是 .razor 文件，调的还是 C# 方法，但出来的界面，是真正能拿出手的企业级产品。
技术栈不需要大迁移，UI 质量不需要妥协——这件事本身，就值得认真看一眼。
你的下一个 .NET 前端项目，打算试试 Ant Design Blazor 吗？
你们团队的前端用什么技术栈？Blazor、React，还是其他方案？用过 Ant Design Blazor 的体验如何？评论区聊聊。
项目地址：https://github.com/ant-design-blazor/ant-design-blazor/stargazers
