APPLY_UI_OPTIMIZATIONS.md 3.7 KB
Apply UI Optimizations – Step-by-Step Script
Use this when the Pencil MCP server is connected and ai_agent_dashboard.pen is open.
Step 1: Get Current Node IDs
Run:
get_editor_state
(with include_schema: false if supported)
Or run:
batch_get
with filePath: "designs/ai_agent_dashboard.pen" and no nodeIds/patterns to list top-level children.
From the response, note the IDs for:
- Root frame (e.g.
bi8Au) - Hero card
- Stats grid + statPlays, statLikes, statShares
- Trend card
- Video section
- List items (if any)
Step 2: batch_design – All Optimizations
Replace ROOT_ID, HERO_ID, STATS_ID, STAT_PLAYS_ID, STAT_LIKES_ID, STAT_SHARES_ID, TREND_ID, VIDEO_ID with the actual IDs from Step 1.
batch_design operations (copy-paste and replace IDs):
U("ROOT_ID", {backgroundColor: "#0F172A"})
U("HERO_ID", {y: 164, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)", boxShadow: "inset 0 1px 0 0 rgba(255,255,255,0.05)"})
U("STATS_ID", {y: 334})
U("STAT_PLAYS_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("STAT_LIKES_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("STAT_SHARES_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("TREND_ID", {y: 434, x: 20, width: 353, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("VIDEO_ID", {y: 574, x: 20, width: 353})
genReportBtn=I("ROOT_ID", {type: "frame", x: 20, y: 110, 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"})
Step 3: If Root ID is bi8Au
Pre-filled operations for root bi8Au (adjust other IDs as needed):
U("bi8Au", {backgroundColor: "#0F172A"})
U("HERO_ID", {y: 164, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)", boxShadow: "inset 0 1px 0 0 rgba(255,255,255,0.05)"})
U("STATS_ID", {y: 334})
U("STAT_PLAYS_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("STAT_LIKES_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("STAT_SHARES_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("TREND_ID", {y: 434, x: 20, width: 353, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("VIDEO_ID", {y: 574, x: 20, width: 353})
genReportBtn=I("bi8Au", {type: "frame", x: 20, y: 110, 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"})
Summary of Changes
| Element | Update |
|---|---|
| Root frame | Fill #0F172A (Deep Slate) |
| Glass cards (Hero, Stats, Trend) | Fill rgba(30, 41, 59, 0.7), stroke rgba(100, 116, 139, 0.4) |
| New CTA | "Generate Report" button at y: 110 below header |
| Layout | Hero, Stats, Trend, Video shifted down to make room |