systoai-design

Artboard — Security skill for Claude Code

Security community

Recut a static creative into other aspect ratios as a real re-layout, rebrand it, audit why it works, or generate a new one.

How to install Artboard

This entry records only its repository, not the path inside it, so there is no exact command to give. Open systoai-design/artboard and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Artboard does

Recut a static creative into other aspect ratios as a real re-layout, rebrand it, audit why it works, or generate a new one. Measures perspective and colour off the pixels, and remembers every composition it studies.

Alternatives in Security

Anthropic Cybersecurity Skills — 734+ structured cybersecurity skills for AI agents · MITRE ATT&CK mapped · agentskills.io open standard · Work 3.8k ★
Competitive Audit — Capture a competitor website with Playwright and extract its color system, typography, layout patterns, and 's 309 ★
Cross-Pollinate Hex MCP Servers — Diff-driven audit: find real transferable changes across hex-line-mcp, hex-ssh-mcp, hex-graph-mcp 238 ★

README

Artboard

**Static creative, moved between aspect ratios and brands without falling apart.**

A finished ad is a *layout*, not a picture. The elements sit where they do because of the shape of the frame. Change the frame and the layout has to be rebuilt — or the thing that made it work stops working.

Artboard is an agent skill that treats a ratio change as a re-layout problem: it measures what it must reuse, lifts type and third-party logos rather than regenerating them, and remembers every composition it studies in a library that compounds.

Sample output

[![Systo papier-mache poster](showcase/poster-preview.png)](showcase/poster.png)

1080x1920, generated by [`examples/systo-papier-mache/poster.mjs`](examples/systo-papier-mache/poster.mjs):

npm install
node examples/systo-papier-mache/poster.mjs

Authored rather than assembled, which is the point of the example. The pulp texture modulates the fill in pixel space instead of overlaying a blurred noise layer, because heavy blur collapses uniform noise to near-flat grey and overlay against mid-grey is close to a no-op. The torn edges are built, not stock.

The library ships the *measurements* of every composition studied, never the compositions themselves, so entries covering third-party or photographic creatives carry their geometry and colour without redistributing the artwork.

16:9 source                    9:16 output
┌─────────────────────┐        ┌──────────┐
│ logo                │        │ logo     │
│   HEADLINE          │        │ HEADLINE │
│  ┌──────┐  ┌─────┐  │        │ ┌──────┐ │
│  │ hero │  │card1│  │  ───▶  │ │ hero │ │   cards move from beside
│  │      │  │card2│  │        │ └──────┘ │   the hero to below it
│  │      │  │card3│  │        │ [card 1] │
│  └──────┘  │card4│  │        │ [card 2] │   ← no crop can do this
└─────────────────────┘        │ [card 3] │
                               │ [card 4] │
                               └──────────┘