DataOps-platform/designs/pencil-new.pen

{
  "version": "2.7",
  "children": [
    {
      "type": "frame",
      "id": "bi8Au",
      "x": 0,
      "y": 0,
      "name": "AI Agent Dashboard",
      "clip": true,
      "width": 393,
      "height": 852,
      "fill": "#050510",
      "layout": "none",
      "children": [
        {
          "type": "ellipse",
          "id": "pbW4E",
          "x": -100,
          "y": -100,
          "name": "blob1",
          "opacity": 0.6,
          "fill": "#7F00FF",
          "width": 400,
          "height": 400
        },
        {
          "type": "ellipse",
          "id": "bpEUM",
          "x": 193,
          "y": 552,
          "name": "blob2",
          "opacity": 0.5,
          "fill": "#00C6FF",
          "width": 300,
          "height": 300
        },
        {
          "type": "frame",
          "id": "6pPpx",
          "x": 0,
          "y": 0,
          "name": "Status Bar Area",
          "width": 393,
          "height": 54,
          "children": [
            {
              "type": "rectangle",
              "cornerRadius": 18,
              "id": "22wBA",
              "name": "island",
              "fill": "#000000",
              "width": 141,
              "height": 36
            }
          ]
        },
        {
          "type": "frame",
          "id": "MCDbX",
          "x": 24,
          "y": 64,
          "name": "header",
          "width": 345,
          "height": 50,
          "gap": 12,
          "children": [
            {
              "type": "ellipse",
              "id": "On0yj",
              "name": "avatar",
              "fill": "#D9D9D9",
              "width": 44,
              "height": 44
            },
            {
              "type": "frame",
              "id": "BJsPy",
              "name": "titles",
              "layout": "vertical",
              "gap": 4,
              "children": [
                {
                  "type": "text",
                  "id": "Ueqf1",
                  "name": "title",
                  "fill": "#FFFFFF",
                  "content": "AI Insight",
                  "fontFamily": "Inter",
                  "fontSize": 18,
                  "fontWeight": "bold"
                },
                {
                  "type": "text",
                  "id": "R53fG",
                  "name": "subtitle",
                  "fill": "#AAAAAA",
                  "content": "@VideoAgent_01",
                  "fontFamily": "Inter",
                  "fontSize": 14,
                  "fontWeight": "normal"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "Lhyxe",
          "x": 24,
          "y": 134,
          "name": "Hero Card",
          "width": 345,
          "height": 120,
          "fill": "rgba(255, 255, 255, 0.15)",
          "cornerRadius": 24,
          "children": [
            {
              "type": "frame",
              "id": "yJv7E",
              "name": "heroContent",
              "width": "fill_container",
              "height": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "children": [
                {
                  "type": "text",
                  "id": "xW3Nd",
                  "name": "heroLabel",
                  "fill": "#CCCCCC",
                  "content": "Total Followers",
                  "fontFamily": "Inter",
                  "fontSize": 14,
                  "fontWeight": "normal"
                },
                {
                  "type": "frame",
                  "id": "SH83D",
                  "name": "heroNumRow",
                  "gap": 12,
                  "children": [
                    {
                      "type": "text",
                      "id": "abuUb",
                      "name": "heroNum",
                      "fill": "#FFFFFF",
                      "content": "128.5K",
                      "fontFamily": "Inter",
                      "fontSize": 48,
                      "fontWeight": "bold"
                    },
                    {
                      "type": "frame",
                      "id": "K67A0",
                      "name": "badge",
                      "fill": "rgba(0, 255, 100, 0.2)",
                      "cornerRadius": 8,
                      "padding": 6,
                      "children": [
                        {
                          "type": "text",
                          "id": "tIN8p",
                          "name": "badgeText",
                          "fill": "#00FF66",
                          "content": "+1.2K",
                          "fontFamily": "Inter",
                          "fontSize": 14,
                          "fontWeight": "bold"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "8ESjs",
          "x": 24,
          "y": 270,
          "name": "Stats Row",
          "width": 345,
          "height": 110,
          "gap": 12,
          "children": [
            {
              "type": "frame",
              "id": "0ph40",
              "name": "statCard1",
              "width": "fill_container",
              "height": "fill_container",
              "fill": "rgba(255, 255, 255, 0.15)",
              "cornerRadius": 24,
              "children": [
                {
                  "type": "frame",
                  "id": "LLCtW",
                  "name": "stat1Col",
                  "width": "fill_container",
                  "height": "fill_container",
                  "layout": "vertical",
                  "gap": 4,
                  "padding": 16,
                  "children": [
                    {
                      "type": "text",
                      "id": "hHjyL",
                      "name": "stat1Num",
                      "fill": "#FFFFFF",
                      "content": "892K",
                      "fontFamily": "Inter",
                      "fontSize": 20,
                      "fontWeight": "bold"
                    },
                    {
                      "type": "text",
                      "id": "qreQs",
                      "name": "stat1Label",
                      "fill": "#AAAAAA",
                      "content": "Plays",
                      "fontFamily": "Inter",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "ZfZVk",
              "name": "statCard2",
              "width": "fill_container",
              "height": "fill_container",
              "fill": "rgba(255, 255, 255, 0.15)",
              "cornerRadius": 24,
              "children": [
                {
                  "type": "frame",
                  "id": "e4H8Y",
                  "name": "stat2Col",
                  "width": "fill_container",
                  "height": "fill_container",
                  "layout": "vertical",
                  "gap": 4,
                  "padding": 16,
                  "children": [
                    {
                      "type": "text",
                      "id": "2toWe",
                      "name": "stat2Num",
                      "fill": "#FFFFFF",
                      "content": "42.1K",
                      "fontFamily": "Inter",
                      "fontSize": 20,
                      "fontWeight": "bold"
                    },
                    {
                      "type": "text",
                      "id": "YsJ6P",
                      "name": "stat2Label",
                      "fill": "#AAAAAA",
                      "content": "Likes",
                      "fontFamily": "Inter",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "vS24Y",
              "name": "statCard3",
              "width": "fill_container",
              "height": "fill_container",
              "fill": "rgba(255, 255, 255, 0.15)",
              "cornerRadius": 24,
              "children": [
                {
                  "type": "frame",
                  "id": "YuBf0",
                  "name": "stat3Col",
                  "width": "fill_container",
                  "height": "fill_container",
                  "layout": "vertical",
                  "gap": 4,
                  "padding": 16,
                  "children": [
                    {
                      "type": "text",
                      "id": "hjUgQ",
                      "name": "stat3Num",
                      "fill": "#FFFFFF",
                      "content": "8.3K",
                      "fontFamily": "Inter",
                      "fontSize": 20,
                      "fontWeight": "bold"
                    },
                    {
                      "type": "text",
                      "id": "YyX2o",
                      "name": "stat3Label",
                      "fill": "#AAAAAA",
                      "content": "Shares",
                      "fontFamily": "Inter",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ZgUTs",
          "x": 24,
          "y": 400,
          "name": "Trend Card",
          "width": 345,
          "height": 180,
          "fill": "rgba(255, 255, 255, 0.15)",
          "cornerRadius": 24,
          "children": [
            {
              "type": "frame",
              "id": "ymvVv",
              "name": "trendContent",
              "width": "fill_container",
              "height": "fill_container",
              "layout": "vertical",
              "gap": 16,
              "padding": 20,
              "children": [
                {
                  "type": "text",
                  "id": "maxtp",
                  "name": "trendTitle",
                  "fill": "#FFFFFF",
                  "content": "Fan Trend (7d)",
                  "fontFamily": "Inter",
                  "fontSize": 16,
                  "fontWeight": "bold"
                },
                {
                  "type": "frame",
                  "id": "XCK9l",
                  "name": "chartArea",
                  "width": "fill_container",
                  "height": "fill_container",
                  "gap": 28,
                  "children": [
                    {
                      "type": "rectangle",
                      "cornerRadius": 8,
                      "id": "oV4dL",
                      "name": "bar1",
                      "fill": "#5555FF",
                      "width": 16,
                      "height": 40
                    },
                    {
                      "type": "rectangle",
                      "cornerRadius": 8,
                      "id": "QyQi6",
                      "name": "bar2",
                      "fill": "#6666FF",
                      "width": 16,
                      "height": 55
                    },
                    {
                      "type": "rectangle",
                      "cornerRadius": 8,
                      "id": "PEO2N",
                      "name": "bar3",
                      "fill": "#7777FF",
                      "width": 16,
                      "height": 45
                    },
                    {
                      "type": "rectangle",
                      "cornerRadius": 8,
                      "id": "jtsel",
                      "name": "bar4",
                      "fill": "#8888FF",
                      "width": 16,
                      "height": 70
                    },
                    {
                      "type": "rectangle",
                      "cornerRadius": 8,
                      "id": "L9RFO",
                      "name": "bar5",
                      "fill": "#9999FF",
                      "width": 16,
                      "height": 60
                    },
                    {
                      "type": "rectangle",
                      "cornerRadius": 8,
                      "id": "rQOCl",
                      "name": "bar6",
                      "fill": "#AAAAFF",
                      "width": 16,
                      "height": 85
                    },
                    {
                      "type": "rectangle",
                      "cornerRadius": 8,
                      "id": "GVhnm",
                      "name": "bar7",
                      "fill": "#BBBBFF",
                      "width": 16,
                      "height": 100
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "text",
          "id": "nECIf",
          "x": 24,
          "y": 600,
          "name": "listTitle",
          "fill": "#FFFFFF",
          "content": "Recent Videos",
          "fontFamily": "Inter",
          "fontSize": 18,
          "fontWeight": "bold"
        },
        {
          "type": "frame",
          "id": "iLghe",
          "x": 24,
          "y": 636,
          "name": "Video Item 1",
          "width": 345,
          "height": 80,
          "fill": "rgba(255, 255, 255, 0.1)",
          "cornerRadius": 16,
          "gap": 12,
          "padding": 10,
          "children": [
            {
              "type": "rectangle",
              "cornerRadius": 8,
              "id": "IvOUa",
              "name": "thumb1",
              "fill": "#333333",
              "width": 60,
              "height": 60
            },
            {
              "type": "frame",
              "id": "dmY4n",
              "name": "info1",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 4,
              "children": [
                {
                  "type": "text",
                  "id": "uKvCu",
                  "name": "vTitle1",
                  "fill": "#FFFFFF",
                  "content": "AI Art Generation Tutorial",
                  "fontFamily": "Inter",
                  "fontSize": 15,
                  "fontWeight": "500"
                },
                {
                  "type": "text",
                  "id": "FhS0V",
                  "name": "vStats1",
                  "fill": "#999999",
                  "content": "▶ 120K  ♥ 15K",
                  "fontFamily": "Inter",
                  "fontSize": 12,
                  "fontWeight": "normal"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "kIgFy",
          "x": 24,
          "y": 728,
          "name": "Video Item 2",
          "width": 345,
          "height": 80,
          "fill": "rgba(255, 255, 255, 0.1)",
          "cornerRadius": 16,
          "gap": 12,
          "padding": 10,
          "children": [
            {
              "type": "rectangle",
              "cornerRadius": 8,
              "id": "dAsT3",
              "name": "thumb2",
              "fill": "#333333",
              "width": 60,
              "height": 60
            },
            {
              "type": "frame",
              "id": "TEWoa",
              "name": "info2",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 4,
              "children": [
                {
                  "type": "text",
                  "id": "dkQLH",
                  "name": "vTitle2",
                  "fill": "#FFFFFF",
                  "content": "Future of Agents in 2026",
                  "fontFamily": "Inter",
                  "fontSize": 15,
                  "fontWeight": "500"
                },
                {
                  "type": "text",
                  "id": "9hg2Z",
                  "name": "vStats2",
                  "fill": "#999999",
                  "content": "▶ 85K  ♥ 9.2K",
                  "fontFamily": "Inter",
                  "fontSize": 12,
                  "fontWeight": "normal"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ykQa6",
          "x": 0,
          "y": 768,
          "name": "Tab Bar",
          "width": 393,
          "height": 84,
          "fill": "rgba(10, 10, 20, 0.8)",
          "children": [
            {
              "type": "frame",
              "id": "g2y7c",
              "name": "tabRow",
              "width": "fill_container",
              "height": 60,
              "children": [
                {
                  "type": "frame",
                  "id": "XKeZ7",
                  "name": "t1",
                  "width": 60,
                  "layout": "vertical",
                  "gap": 4,
                  "children": [
                    {
                      "type": "ellipse",
                      "id": "S6FqW",
                      "name": "i1",
                      "fill": "#00C6FF",
                      "width": 24,
                      "height": 24
                    },
                    {
                      "type": "text",
                      "id": "CsAAj",
                      "name": "l1",
                      "fill": "#00C6FF",
                      "content": "Dash",
                      "fontFamily": "Inter",
                      "fontSize": 10,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "qyxEV",
                  "name": "t2",
                  "width": 60,
                  "layout": "vertical",
                  "gap": 4,
                  "children": [
                    {
                      "type": "ellipse",
                      "id": "QxJxp",
                      "name": "i2",
                      "fill": "#666666",
                      "width": 24,
                      "height": 24
                    },
                    {
                      "type": "text",
                      "id": "EqPgC",
                      "name": "l2",
                      "fill": "#666666",
                      "content": "Content",
                      "fontFamily": "Inter",
                      "fontSize": 10,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "GQned",
                  "name": "t3",
                  "width": 60,
                  "layout": "vertical",
                  "gap": 4,
                  "children": [
                    {
                      "type": "ellipse",
                      "id": "EmD4y",
                      "name": "i3",
                      "fill": "#FFFFFF",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "type": "text",
                      "id": "oOnRF",
                      "name": "l3",
                      "fill": "#FFFFFF",
                      "content": "AI Chat",
                      "fontFamily": "Inter",
                      "fontSize": 10,
                      "fontWeight": "bold"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "t3rWX",
                  "name": "t4",
                  "width": 60,
                  "layout": "vertical",
                  "gap": 4,
                  "children": [
                    {
                      "type": "ellipse",
                      "id": "ntZh5",
                      "name": "i4",
                      "fill": "#666666",
                      "width": 24,
                      "height": 24
                    },
                    {
                      "type": "text",
                      "id": "DELEM",
                      "name": "l4",
                      "fill": "#666666",
                      "content": "Settings",
                      "fontFamily": "Inter",
                      "fontSize": 10,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}