# AI Agent Dashboard – Deep Slate (New Document Creation)

Optimized design for **iPhone 17 (393×852)** with **Deep Slate** evaluation style.

## Execution Steps (Pencil MCP Required)

### 1. Open new document
```
open_document("new")
```

### 2. Get editor state
```
get_editor_state()
```
From the response, extract the **root node ID** (e.g. `root` or the document root id). Use it as `ROOT_ID` in the script below.

### 3. Run batch_design

Replace `ROOT_ID` with the actual root node ID from step 2. Run **Batch 1** first, then **Batch 2** (each batch ≤25 ops).

**Important**: Ensure the root/canvas has size 393×852 and background `#0F172A`. If the new document root differs, run first:
```
U("ROOT_ID", {width: 393, height: 852, backgroundColor: "#0F172A"})
```

---

## batch_design – Batch 1 (Blobs → Stats Grid)

**Glass style**: `background: rgba(30,41,59,0.7)`, `backdropFilter: blur(20px)`, `border: 1px solid rgba(100,116,139,0.4)`, `borderRadius: 24`  
**Text**: Primary `#F8FAFC`, Secondary `#94A3B8`

```
blob1=I("ROOT_ID", {type: "ellipse", width: 280, height: 280, x: -60, y: -80, fill: "#6366F1", opacity: 0.35, filter: "blur(80px)"})
blob2=I("ROOT_ID", {type: "ellipse", width: 200, height: 200, x: -50, y: 552, fill: "#A855F7", opacity: 0.35, filter: "blur(80px)"})
blob3=I("ROOT_ID", {type: "ellipse", width: 150, height: 150, x: 333, y: 400, fill: "#6366F1", opacity: 0.25, filter: "blur(80px)"})
dynamicIsland=I("ROOT_ID", {type: "rect", width: 126, height: 37, x: 133.5, y: 12, fill: "#000000", borderRadius: 20})
header=I("ROOT_ID", {type: "frame", layout: "row", y: 64, x: 20, width: 353, justifyContent: "space-between", alignItems: "center"})
title=I("header", {type: "text", content: "AI Insight", fontSize: 24, fontWeight: 600, color: "#F8FAFC"})
avatar=I("header", {type: "ellipse", width: 40, height: 40, fill: "linear-gradient(135deg, #6366F1 0%, #A855F7 100%)", border: "2px solid rgba(255,255,255,0.3)"})
ctaBtn=I("ROOT_ID", {type: "frame", y: 124, x: 20, width: 353, height: 48, layout: "row", justifyContent: "center", alignItems: "center", background: "linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)", borderRadius: 24})
ctaLabel=I("ctaBtn", {type: "text", content: "Generate Report", fontSize: 16, fontWeight: 600, color: "#FFFFFF"})
heroCard=I("ROOT_ID", {type: "frame", y: 184, x: 20, width: 353, padding: 24, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
heroLabel=I("heroCard", {type: "text", content: "Total Followers", fontSize: 14, color: "#94A3B8"})
heroValue=I("heroCard", {type: "text", content: "128.5K", fontSize: 36, fontWeight: 700, color: "#F8FAFC"})
heroBadge=I("heroCard", {type: "frame", content: "+1.2K", background: "rgba(34,197,94,0.3)", color: "#22c55e", padding: "6px 12px", borderRadius: 12})
statsGrid=I("ROOT_ID", {type: "frame", layout: "row", y: 320, x: 20, width: 353, gap: 12})
statPlays=I("statsGrid", {type: "frame", flex: 1, padding: 16, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
statPlaysLabel=I("statPlays", {type: "text", content: "Plays", fontSize: 12, color: "#94A3B8"})
statPlaysVal=I("statPlays", {type: "text", content: "892K", fontSize: 20, fontWeight: 700, color: "#F8FAFC"})
statLikes=I("statsGrid", {type: "frame", flex: 1, padding: 16, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
statLikesLabel=I("statLikes", {type: "text", content: "Likes", fontSize: 12, color: "#94A3B8"})
statLikesVal=I("statLikes", {type: "text", content: "42.1K", fontSize: 20, fontWeight: 700, color: "#F8FAFC"})
statShares=I("statsGrid", {type: "frame", flex: 1, padding: 16, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
statSharesLabel=I("statShares", {type: "text", content: "Shares", fontSize: 12, color: "#94A3B8"})
statSharesVal=I("statShares", {type: "text", content: "8.3K", fontSize: 20, fontWeight: 700, color: "#F8FAFC"})
```

---

## batch_design – Batch 2 (Trend Chart → Tab Bar)

```
trendCard=I("ROOT_ID", {type: "frame", y: 450, x: 20, width: 353, padding: 20, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
trendTitle=I("trendCard", {type: "text", content: "Fan Trend (7d)", fontSize: 16, fontWeight: 600, color: "#F8FAFC"})
chartBars=I("trendCard", {type: "frame", layout: "row", gap: 8, height: 80, alignItems: "flex-end"})
bar1=I("chartBars", {type: "rect", flex: 1, height: 20, fill: "linear-gradient(180deg, #6366F1 0%, #A855F7 100%)", borderRadius: 6})
bar2=I("chartBars", {type: "rect", flex: 1, height: 28, fill: "linear-gradient(180deg, #6366F1 0%, #A855F7 100%)", borderRadius: 6})
bar3=I("chartBars", {type: "rect", flex: 1, height: 36, fill: "linear-gradient(180deg, #6366F1 0%, #A855F7 100%)", borderRadius: 6})
bar4=I("chartBars", {type: "rect", flex: 1, height: 44, fill: "linear-gradient(180deg, #6366F1 0%, #A855F7 100%)", borderRadius: 6})
bar5=I("chartBars", {type: "rect", flex: 1, height: 56, fill: "linear-gradient(180deg, #6366F1 0%, #A855F7 100%)", borderRadius: 6})
bar6=I("chartBars", {type: "rect", flex: 1, height: 68, fill: "linear-gradient(180deg, #6366F1 0%, #A855F7 100%)", borderRadius: 6})
bar7=I("chartBars", {type: "rect", flex: 1, height: 80, fill: "linear-gradient(180deg, #6366F1 0%, #A855F7 100%)", borderRadius: 6})
videoSection=I("ROOT_ID", {type: "frame", y: 650, x: 20, width: 353})
videoTitle=I("videoSection", {type: "text", content: "Recent Videos", fontSize: 18, fontWeight: 600, marginBottom: 12, color: "#F8FAFC"})
videoList=I("videoSection", {type: "frame", padding: 16, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
tabBar=I("ROOT_ID", {type: "frame", y: 768, x: 0, width: 393, height: 84, layout: "row", background: "rgba(15,23,42,0.9)", backdropFilter: "blur(20px)", borderTop: "1px solid rgba(100,116,139,0.3)"})
```

---

## Specs Summary

| Element | Position | Specs |
|---------|----------|-------|
| Canvas | — | 393×852, `#0F172A` |
| Blobs | Various | Indigo `#6366F1`, Purple `#A855F7`, low opacity |
| Header | y=64 | "AI Insight" + Avatar |
| CTA Button | y=124 | Full-width, gradient #6366F1→#8B5CF6 |
| Hero Card | y=184 | Total Followers 128.5K, glass |
| Stats Grid | y=320 | Plays, Likes, Shares, glass |
| Trend Chart | y=450 | Fan Trend (7d), neon bars |
| Video List | y=650 | Recent Videos, glass |
| Tab Bar | y=768 | Deep `rgba(15,23,42,0.9)` |

**Note**: If `ROOT_ID` in Pencil is literally `"root"`, use `root` in the script. For a new document, the root may have a different auto-generated id—always use the value from `get_editor_state()`.