ai_agent_dashboard_deep_slate_CREATE.md 6.7 KB
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().