Ghost-Devil Rising:
How Agentic Design
Actually Works
The era of "type a prompt, get a reply" is over. A Ghost-Devil now accepts missions, uses tools, and keeps moving until a goal is done. This is the architecture behind that new power.
BOOM • A new teammate enters the panel
Osama Ali
linkedin.com/in/os3liSame Ghost, Different Power Level
Most "AI" features are one move at a time. Agentic behavior starts when the Ghost-Devil can plan missions, use tools, inspect outcomes, and continue without constant hand-holding.
Command Devil
Single-Move AI
- Acts only when you issue a direct command.
- Completes one task, then waits for the next order.
- No memory of mission strategy.
- You remain the manual operator of every step.
Contract Devil
Agentic Workflow
- Receives a mission goal and writes its own steps.
- Uses tools, checks feedback, and self-corrects.
- Continues across loops until objective quality is met.
- You define boundaries and success criteria.
Two Worlds, Two Physics
The same Ghost-Devil behaves differently by environment. Architecture decides speed, precision, and autonomy.
Web Panel World
v0 · browser-native builders · code-first tools
- Native web grammar and semantics.
- Ghost speaks HTML/CSS and gets instant rendering.
- Easy to test, lint, and iterate quickly.
- Lower instruction overhead.
Canvas Abyss
Figma · Penpot
- Vector scene-graph engine.
- Ghost must describe nodes, constraints, and layout rules.
- Needs plugin/API translation in most workflows.
- Heavier payload and slower iteration loops.
MCP: Passport, Not Master Key
MCP gives the Ghost-Devil a standard way to request context and tools. It improves portability, but each platform still controls what doors are truly open.
(Agentic Runtime)
Open Door ✓
(REST/API Bridge)
Fortified Gate 🔒
Cheap Spell vs Costly Blueprint
You can ask for the same button in both worlds, but the Ghost-Devil pays very different context costs depending on representation format.
<button class="bg-blue-500
text-white px-4 py-2
rounded-lg">
Get Started
</button>
Short instruction, instant visible result. The platform handles many defaults for you.
{
"type": "FRAME",
"name": "Button",
"x": 0, "y": 0,
"width": 140, "height": 44,
"cornerRadius": 8,
"fills": [{"type":"SOLID",
"color":{"r":0.23,
"g":0.51,"b":0.96}}],
"layoutMode": "HORIZONTAL",
"primaryAxisAlignItems":
"CENTER",
"children": [{
"type":"TEXT",
"characters":"Get Started",
"fontSize": 14,
"fontWeight": 600
}]
}
Every layer needs explicit geometry and relationships. Precision rises, but message volume explodes.
Numbers vary by model and tooling, but the pattern is stable: semantic formats stay lighter than explicit scene graphs.
When the Devil Lies, Who Catches It?
Failure is inevitable. Recovery depends on observability: can the system detect what went wrong in machine-readable form?
SyntaxError: Unexpected token <
at app.js:42:8
Ghost reads error log via MCP →
Ghost rewrites app.js:42 →
✓ Fixed autonomously.
Logs, stack traces, and failing tests create visible clues. The Ghost-Devil can run a repair loop quickly.
Figma canvas: visually broken, no code error.
The visual result can break without emitting explicit errors. Without vision checks or human review, the Devil misses the bug.
You Are the Devil Tamer
Your leverage shifts from manual craft alone to system direction: goals, safeguards, evaluation loops, and decision authority.
Outputs
Guardrails
Agents
Strategy
Final Page: The Rulebook
Keep the story, keep the speed, keep the control. Use this checklist whenever you deploy a Ghost-Devil workflow.
Define outcome, constraints, and measurable success before the first prompt.
Web-native stacks optimize speed; canvas stacks optimize explicit visual structure.
Use MCP and APIs as bridges, then verify exactly what capabilities are exposed.
Design workflows around payload cost; verbosity is a product and architecture decision.
Logs, tests, and visual checks convert failures into recoverable signals.
The Ghost-Devil can execute at speed, but humans must own goals, ethics, and final decisions.
Built by Osama Ali • os3li.com
← Previous Arc