design-as-code

An AI agent skill that turns a text prompt into a finished design — JPEG, PNG, or PDF — in seconds.

Built for Nimrobo or any AI agent users who need to create design on the go, without sitting in front of Figma or Canva.

---

What it does

You describe what you want. The AI builds it and hands you an image file.

"Create a LinkedIn banner for my startup, export as PNG" "Design an A4 event poster with a dark background" "Make a 16:9 slide with our product launch announcement"

No design tools. No templates to wrestle with. Just a prompt and an output file.

The AI writes a complete web page behind the scenes then delivers a retina-quality, ready to post or print.

---

Dimension presets

Name	Size	Use case
Instagram square	1080×1080	Social posts
Twitter/X card	1200×628	Link previews
LinkedIn banner	1584×396	Profile header
16:9 slide	1920×1080	Presentations
A4 portrait	794×1123	Print documents
A4 landscape	1123×794	Certificates, posters

---

Installation

Prompt-based (fastest)

Paste this into any AI agent that supports skills or tools:

Install the design-as-code skill from https://github.com/Nimrobo/design-as-code

The agent will clone the repo and wire up the skill automatically.

---

Nimrobo/Openclaw

# Create the skill directory
mkdir -p ~/.openclaw/workspace

# Copy skill files
cp SKILL.md presentation.md ~/.openclaw/workspace/skills/design-as-code/
cp scripts/render.js ~/.openclaw/workspace/skills/design-as-code/scripts/

Or clone directly:

git clone https://github.com/Nimrobo/design-as-code.git ~/.openclaw/workspace/skills/design-as-code

---

Claude Code

# Create the skill directory
mkdir -p ~/.claude/skills/design-as-code/scripts

# Copy skill files
cp SKILL.md presentation.md ~/.claude/skills/design-as-code/
cp scripts/render.js ~/.claude/skills/design-as-code/scripts/

Or clone directly:

git clone https://github.com/Nimrobo/design-as-code.git ~/.claude/skills/design-as-code

Then type /design-as-code in Claude Code to use it.

---

OpenHands

git clone https://github.com/Nimrobo/design-as-code.git ~/.openhands/skills/design-as-code

Reference the skill in your agent config or prompt the agent with the skill path.

---

OpenAI Codex (codex CLI)

git clone https://github.com/Nimrobo/design-as-code.git ~/.codex/skills/design-as-code

Point Codex to the skill directory in your codex.yaml or pass --skill ~/.codex/skills/design-as-code at runtime.

---

Docs

Full usage in SKILL.md · Multi-slide decks in presentation.md