Home Explore Help
Sign In
mxl_citu
/
DataOps-platform
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
DataOps-plat...
/
designs
/
ai_agent_dashboard_DESIGN_SPEC.md

ai_agent_dashboard_DESIGN_SPEC.md 4.3 KB
Permalink History Raw

AI Agent Dashboard – Design Spec for Pencil (.pen)

This document describes the design structure for ai_agent_dashboard.pen. Use these batch_design operations when the Pencil MCP server is connected.

Canvas Specs

  • Size: 393 × 852 (iPhone)
  • Background: #0F172A (deep slate – evaluation/analytics look)
  • Font: San Francisco / system-ui

batch_design Operations

Run these operations via batch_design after opening ai_agent_dashboard.pen:

root=I("", {width: 393, height: 852, backgroundColor: "#0F172A"})
blob1=I("root", {type: "ellipse", width: 280, height: 280, x: -60, y: -80, fill: "linear-gradient(135deg, #7F00FF 0%, #00C6FF 100%)", opacity: 0.5, filter: "blur(80px)"})
blob2=I("root", {type: "ellipse", width: 200, height: 200, x: -50, y: 552, fill: "linear-gradient(225deg, #00C6FF 0%, #7F00FF 100%)", opacity: 0.5, filter: "blur(80px)"})
blob3=I("root", {type: "ellipse", width: 150, height: 150, x: 333, y: 400, fill: "linear-gradient(180deg, #7F00FF 0%, #00C6FF 50%)", opacity: 0.5, filter: "blur(80px)"})
dynamicIsland=I("root", {type: "rect", width: 126, height: 37, x: 133.5, y: 12, fill: "#000000", borderRadius: 20})
header=I("root", {type: "frame", layout: "row", y: 60, padding: 20})
title=I("header", {type: "text", content: "AI Insight", fontSize: 24, fontWeight: 600, color: "#FFFFFF"})
avatar=I("header", {type: "ellipse", width: 40, height: 40, fill: "linear-gradient(135deg, #7F00FF 0%, #00C6FF 100%)", border: "2px solid rgba(255,255,255,0.3)"})
heroCard=I("root", {type: "frame", y: 164, 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: "rgba(226,232,240,0.85)"})
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", {type: "frame", layout: "row", y: 334, x: 20, 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})
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})
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})
trendCard=I("root", {type: "frame", y: 434, 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})
genReportBtn=I("root", {type: "frame", y: 100, x: 20, width: 353, height: 48, layout: "row", justifyContent: "center", alignItems: "center", fill: "linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)", borderRadius: 16, name: "Generate Report"})
genReportLabel=I("genReportBtn", {type: "text", content: "Generate Report", fontSize: 16, fontWeight: 600, color: "#FFFFFF"})
videoSection=I("root", {type: "frame", y: 574, x: 20, width: 353})
videoTitle=I("videoSection", {type: "text", content: "Recent Videos", fontSize: 18, fontWeight: 600, marginBottom: 12, color: "#f8fafc"})
tabBar=I("root", {type: "frame", position: "fixed", bottom: 0, width: 393, height: 83, layout: "row", background: "rgba(15,23,42,0.9)", backdropFilter: "blur(20px)", borderTop: "1px solid rgba(100,116,139,0.3)"})

Style Reference

  • Glassmorphism: background: rgba(30,41,59,0.7), backdrop-filter: blur(20px), border: 1px solid rgba(100,116,139,0.4)
  • Corners: borderRadius: 24 (equivalent to rounded-3xl)
  • Text: Primary #f8fafc, secondary rgba(226,232,240,0.85) for accessible contrast on slate

HTML Prototype

An HTML prototype is available at designs/ai_agent_dashboard.html – open it in a browser to preview the design.