古法编程

如何使用 AI 快速构建 Makepad Widgets UI 界面

为 Makepad 开发者提供一套完整的组件知识库，让 AI 能够精准生成符合 Makepad 规范的 Rust UI 代码，涵盖从基础容器到高级交互组件的配置。

为什么需要这个技能

Makepad 是一个高性能的 Rust GUI 框架，其组件定义方式采用了独特的声明式语法。对于开发者而言，记住所有组件（如 PortalList、StackNavigation）的属性名称、变体（Variants）以及 Shader 绘制参数（如 draw_bg）具有较高挑战。

通过该技能，AI 可以充当“活的文档”，直接为你生成正确的组件结构代码，避免在查阅 widgets-core.md 等参考文件和编写代码之间频繁切换，极大地提升 UI 原型开发速度。

适用场景

  • 快速原型构建：需要快速搭建一个包含按钮、输入框和列表的界面布局。
  • 视觉样式调整：不确定如何通过 draw_bg 或 draw_text 配置渐变色、圆角或字体样式。
  • 复杂组件选型：在 80 多个内置组件中寻找最适合的容器（如决定使用 ScrollYView 还是 PortalList）。
  • 学习 Makepad 架构：通过 AI 解释 WidgetNode 和 Widget trait 的具体实现逻辑。

核心工作流

  1. 需求描述：告知 AI 你需要的界面元素（例如：“创建一个带圆角深色背景的登录面板，包含两个输入框和一个蓝色按钮”）。
  2. 组件映射：AI 根据内置的组件矩阵（Basic, Input, Container, Navigation 等）选择最合适的 Widget 变体。
  3. 代码生成：AI 按照 Makepad 的声明式语法生成代码，自动配置 width、height 以及 show_bg 等关键属性。
  4. 文档验证：AI 会自动检索 ./references/ 下的本地文档，确保生成的属性名称与当前版本一致。

典型代码示例（由 AI 生成） 

<View> {
    width: Fill
    height: Fill
    flow: Down
    padding: 16.0
    show_bg: true
    draw_bg: { color: #1A1A1A }

    <Label> { 
        text: "欢迎登录" 
        draw_text: { color: #FFFFFF; text_style: { font_size: 16.0 } }
    }
    
    <TextInput> {
        width: Fill
        height: Fit
        text: "请输入用户名"
    }

    <Button> {
        text: "提交"
        draw_bg: {
            color: #0066CC
            border_radius: 4.0
        }
    }
}

下载和安装

下载 makepad-widgets 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐