🧩 What it is / what it does
Precise definition based on the canvas-design SKILL.md.
Original visual art in .png and .pdf, organized by design philosophy.
O canvas-design creates museum-quality still images. The process has two stages: first it generates a design philosophy (manifesto for an aesthetic movement, in a .md file), then expresses this philosophy visually — 90% imagery, 10% essential text — producing the final .pdf or .png file. It never copies existing artists, avoiding copyright infringement.
The critical distinction: the skill doesn't create documents with decoration. It creates art objects that communicate through shape, space, color, and composition—not through explanatory paragraphs. Text appears as a rare and powerful visual element, never as a block of continuous prose.
✓ canvas-design produces
- ✓ Event posters / visual campaigns
- ✓ OG images and meta thumbnails
- ✓ Static hero images for landing pages
- ✓ Printed promotional material (.pdf)
- ✓ Conceptual and editorial artwork
- ✓ Static visual identity assets
✗ canvas-design doesn't do
- ✗ Animations or videos (→ use remotion)
- ✗ Interactive HTML pages (→ use frontend-design)
- ✗ Code/algorithm-generated art (→ use algorithmic-art)
- ✗ Token systems or palettes (→ use theme-factory)
- ✗ Imitating specific artists' styles
🎣 When it triggers
The exact triggers that make Claude activate canvas-design.
"Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations."
Words and contexts that trigger the skill
"Create a poster for event X", "I want a promotional poster", "make a futuristic-style poster"
"Create a piece of art for my brand", "I want a static design", "make a visual piece"
"I need an OG image for the site", "create a static thumbnail", "I want a hero image"
"I need visual materials for a campaign", "create promotional assets", "I want a static flyer / banner"
The trigger is semantic: any request for final static image (non-animated, not HTML) with visual/artistic intent triggers the skill. When in doubt between canvas-design and algorithmic-art, the difference is in the execution — canvas uses a manual aesthetic philosophy; algorithmic uses code (p5.js, etc.).
🚀 How it improves your pages
Concrete value canvas-design brings to web and identity projects.
HTML pages are built from code — but what users see at first glance is often a static image: the OG image in the WhatsApp/Slack preview, the hero section, the course thumbnail. canvas-design elevates exactly this layer.
OG Images & Meta
When your link is shared on WhatsApp, Twitter, Slack, or LinkedIn, the OG image is what appears. A poster generated with canvas-design replaces the generic automatic screenshot with an intentional, professional visual.
Static Heroes
When the hero section doesn’t need animation, a .png generated from a design philosophy is lighter, more controlled, and can have editorial quality — something HTML/CSS rarely achieves without a lot of effort.
Promotional Material
Instagram posts, launch banners, course covers — assets that need to work outside the web context. canvas-design generates these assets in the same workflow as page development.
For a landing page project, the ideal workflow is: brand-guidelines defines the identity → theme-factory generates the color tokens → canvas-design creates the poster and OG image → frontend-design builds the page using the generated assets. canvas-design is the link between visual identity and web presence.
✓ High-impact cases
- ✓ Course OG image — appears in every share
- ✓ Module thumbnail — consistent visual identity
- ✓ Launch poster — promotion integrated into development
- ✓ E-book / PDF cover — editorial quality straight from Claude
✗ When it doesn’t solve the problem
- ✗ Need interactivity → use frontend-design
- ✗ Need motion → use animation-designer or remotion
- ✗ Need systematic variations → use algorithmic-art
- ✗ Need to edit an existing photo (retouch, remove background) → dedicated tool
⚙️ How it works under the hood
Actual stack, approach, files, and steps for canvas-design.
canvas-design is a two-phase process: Phase 1 generates the philosophical manifesto; Phase 2 interprets and expresses this manifesto visually. The same Claude instance receives the philosophy and executes it — it’s like writing an artistic manifesto and then painting according to it.
Internal pipeline — step by step
The SKILL.md instructs Claude to treat the user's input not as a literal constraint, but as starting point to infer an implicit cultural/aesthetic reference. E.g.: "poster for a late-night jazz festival" → reference: 1960s graphic minimalism.
Generates a 4-6 paragraph manifesto: names the aesthetic movement ("Chromatic Silence", "Brutalist Joy"), explains how it is expressed through space, color, scale, composition, and hierarchy. Emphasizes craftsmanship — the result should look like it was made by someone at the top of their field over countless hours of work.
The second phase uses the philosophy as a scientific bible. It creates a unique composition: repeated patterns, perfect shapes, overlapping layers. Total priority is given to quality—composition, spacing, color choices, typography—it all screams expert-level craftsmanship.
Delivers two files: the philosophy in .md and the visual file in .pdf or .png. The multi-page option (.pdf with several pages) is available when the context calls for it — by default, it’s a single page.
The SKILL.md is explicit: never copy the style of existing artists. The skill creates original aesthetic designs. If the user asks for "in the style of Mondrian" or "like Saul Bass," canvas-design should interpret the essence philosophical (grid, primary geometry; clean typographic contrast) and create something new—not a reproduction.
💬 Practical example + Ready-to-use PROMPT
Real prompts to paste into Claude Code and activate canvas-design.
Scenario A — OG image for an online course
You created a design course landing page and need an OG image that appears when the link is shared (1200×630px).
Scenario B — Product launch poster
You're launching an automation SaaS and want a social media poster (square format, 1080×1080px).
Scenario C — Static hero image for a landing page
- • Specify dimensions and format (.png or .pdf)
- • Provide emotional/thematic context (not layout instructions)
- • Limit the text that should appear — less is better for the skill
- • Never ask to "copy X's style" — ask for "inspiration from X's philosophy"
- • For multi-page, explicitly say: "I want 3 pages with different layouts"
🧬 Works well with / limitations
Powerful compositions with other skills and when not to use canvas-design.
canvas-design sits at the center of Track 2, between brand identity (brand-guidelines, module 2.2) and code-generated art (algorithmic-art, module 2.4). Understanding all three together reveals when to use each one:
Define brand rules, palette, and voice. It is the set of constraints within which canvas-design will create. Feeds the design philosophy the right colors and tone.
Creates static art using philosophy. It takes the brand-guidelines constraints and turns them into editorial-quality images. Output: .png and .pdf.
Generates art with code (p5.js, scripts). Where canvas-design creates unique, hand-crafted pieces, algorithmic-art generates systems and infinite variations. For generative wallpapers, procedural patterns, and interactive art.
Compositions with other skills
Use theme-factory to generate the brand color tokens (primary, secondary, accent) → pass them to canvas-design as the palette → ensure the poster and OG image use exactly the same colors as the site's design system.
brand-guidelines defines the voice and visual constraints → canvas-design receives that brief and creates within the rules → result: complete consistency between the document identity and the visual expression of the pieces.
canvas-design creates the main poster of the campaign (single piece, high impact) → algorithmic-art generates the variations and patterns procedural assets based on the same aesthetic (wallpapers, textures, backgrounds). Together, they cover one-off pieces and visual systems.
canvas-design delivers the hero image and OG image as .png → frontend-design uses these assets when building the HTML page. Clear separation of responsibilities: visual art ≠ web code.
- ✗ Need animation — any motion or transition → use animation-designer, remotion, or seedance.
- ✗ Bulk variations — dozens of versions of one piece → use algorithmic-art (code systems generate infinite variations).
- ✗ Editing an existing photo — remove backgrounds, retouch, resize → use dedicated editing tools (this isn’t the skill’s domain).
- ✗ Interactive content — form, button, UI component → use frontend-design or web-artifacts-builder.
- ✗ Technical diagrams — flowcharts, system architecture → use beautiful-mermaid or excalidraw.
📋 Module 2.3 Summary
What you learned
- ✓ canvas-design creates visual art in .png and .pdf based on a design philosophy
- ✓ Two-phase process: .md manifest → visual expression on the canvas
- ✓ Triggers for requests involving posters, artwork, static design, OG images
- ✓ Ideal for OG images, static heroes, and promotional materials
- ✓ Never copy artists — create original aesthetic movements
- ✓ Complements brand-guidelines (feeding it information) and algorithmic-art (variations)
- ✓ Doesn't create animations, bulk variations, or interactive UI
Quick reference
Code-generated art — procedural visual systems with p5.js, infinite variations, and algorithmic patterns. The perfect complement to canvas-design.