Zhimalab

AI 界面生成器

描述你想要的界面，AI 生成 JSON 界面规范并实时渲染；也可以直接粘贴 JSON 规范预览效果。

AI 生成（一句话描述界面）

JSON Spec（可编辑，右侧实时预览）

{
  "root": "frame-1",
  "elements": {
    "frame-1": {
      "type": "Frame",
      "props": {
        "gap": 24,
        "padding": "p-8",
        "bg": "bg-neutral-50 dark:bg-neutral-900"
      },
      "children": [
        "card-1"
      ]
    },
    "card-1": {
      "type": "Card",
      "props": {
        "title": "Welcome to JSON UI",
        "subtitle": "Paste a spec on the left, or let AI generate one.",
        "shadow": true
      },
      "children": [
        "row-1",
        "button-1"
      ]
    },
    "row-1": {
      "type": "Row",
      "props": {
        "gap": 12,
        "align": "center"
      },
      "children": [
        "badge-1",
        "text-1"
      ]
    },
    "badge-1": {
      "type": "Badge",
      "props": {
        "text": "json-render",
        "color": "purple"
      },
      "children": []
    },
    "text-1": {
      "type": "Text",
      "props": {
        "text": "Live preview — edits render instantly.",
        "variant": "small",
        "color": "text-neutral-500"
      },
      "children": []
    },
    "button-1": {
      "type": "Button",
      "props": {
        "label": "Generate with AI",
        "variant": "primary"
      },
      "children": []
    }
  }
}

实时预览

Welcome to JSON UI

Paste a spec on the left, or let AI generate one.

json-render

Live preview — edits render instantly.