■  设计系统 · Go · 开源

服务端直出的设计系统。

71 个 Go 组件，基于 templ、Tailwind、HTMX 和 Alpine。无需 Node，无需打包工具，页面运行时不从 CDN 加载任何东西。只需 go get 即可安装使用。

浏览组件 试试白标定制
$ go get github.com/vapulab/malphas

开源，MIT 许可证。 在 GitHub 上查看

组件
71
npm 依赖
0
CDN 请求
0
对比度
AA

浅色和深色主题均达标

包含什么

从基础到复杂

按钮、表单、模态框，还有 Data Table、Date Picker、Combobox、Command Palette、可调整面板大小的 Sidebar，以及面向 AI 界面的聊天组件。

服务端说了算

HTML 在服务端就已生成完毕，HTMX 只替换有变化的部分。即使关闭 JavaScript，Data Table 的搜索也照常可用。

可访问性经过测试

键盘、焦点和 ARIA 都通过 chromedp 在真实的 Chrome 中测试。模态框会锁定焦点、禁止滚动，并让背景内容不可交互。

基于 design token 的白标

更换品牌、主色和背景，整个界面随之调整。本页就是使用自身配色的 Malphas；演示页会在配色组合难以辨认时发出提醒。

此刻由服务端渲染

以下内容都不是图片。这就是 Malphas，由 Go 在本次请求中实时组装。

已通过处理中已作废草稿
正在同步历史记录 72%

打开命令面板：CtrlK

组件目录

每个组件都有独立页面，附在线示例和对应代码。

四步上手

Malphas 是一个按 tag 发布版本的 Go 模块，对宿主应用没有任何依赖。

1 · 安装

go get github.com/vapulab/malphas

2 · 配置 Tailwind

// tailwind.config.js：preset 提供颜色、
// 字体和主题 token
const dir = execSync("go list -m -f {{.Dir}}
  github.com/vapulab/malphas")
presets: [require(dir + "/theme/preset.js")]

3 · 提供静态资源

mux.Handle("/malphas-assets/",
  http.StripPrefix("/malphas-assets",
    http.FileServer(http.FS(malphas.Assets()))))

4 · 渲染

@components.Button(
  components.ButtonProps{}) {
  开具发票
}

完整步骤见 README

为稳定而生

设计系统承载着你发布的每一个页面。所以每个组件在到达你手里之前，都要通过同样的检验。

在真实浏览器中测试

每次改动都会在真实的 Chrome 中运行：点击、键盘和焦点，和你的用户使用时一模一样。出了问题，就不会进入发布版本。

修好的缺陷不会复发

每个修复都附带一个证明它有效的测试：把缺陷放回去，测试就会失败。回归问题在到达你之前就被拦下。

按你的节奏升级

每个版本都是一个 Go 模块标签。你锁定版本、查看变更，在合适的时候再升级，构建里不会有意外。

浏览组件在 GitHub 上查看