skills.rest
AtlasOmnia
AtlasOmniaCOMMUNITY
Explore all skills by this author →
Website𝕏@AtlasOmniaGitHub

marketing-collateral-design

Design and render marketing collateral as deterministic HTML/CSS/SVG with preflight validation and PNG/PDF export.

115|9|Updated Aug 5, 2026
Search Tags:#playwright#svg#pdf export#marketing collateral#print design#html css#flyer design
One-click install
npx skills add https://github.com/AtlasOmnia/donna-starter --skill marketing-collateral-design-atlasomnia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: marketing-collateral-design
Source: https://github.com/AtlasOmnia/donna-starter/tree/main/skills/creative/marketing-collateral-design
Command: npx skills add https://github.com/AtlasOmnia/donna-starter --skill marketing-collateral-design-atlasomnia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, Pillow, pypdf, and includes scripts (resource) components.

What problem does it solve? Creating flyers, social graphics, postcards, and brochures with AI image generators produces unreliable text, fake contact details, and uneditable output. This Skill separates imagery generation from typesetting, composing all final wording as real HTML/SVG text so claims, prices, and contact details stay exact and editable. ## Core Features & Use Cases - Hybrid production workflow: Generate or source imagery separately, then compose typography deterministically in HTML/CSS/SVG starting from archetype-neutral templates. - Safe rendering pipeline: Render artboards to PNG and PDF via pinned Playwright Chromium with JavaScript and network access blocked by default, staged outputs, and overflow/font validation. - Preflight and visual QA: Static and raster preflight scripts catch placeholders, missing assets, and wrong dimensions; PDF preflight checks page geometry, fonts, and basic prepress signals. - Use Case: A small business needs a print flyer and matching Instagram post. The Skill generates a background photo, typesets the exact offer and phone number in HTML, renders 1080x1350 PNG and 8.5x11in PDF, and runs a rendered visual critique before delivery. ## Quick Start Use the marketing-collateral-design skill to create a one-page promotional flyer for my business and export it as PNG and PDF.

Frequently Asked Questions about marketing-collateral-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a flyer with AI without garbled text?▼

Generate the imagery separately with an image model, then typeset all wording as real HTML/SVG text rather than baking text into the image. This Skill renders the composed artboard to PNG and PDF with Playwright after preflight validation.

How to render HTML to PNG and PDF with Python?▼

Use the render_artifact.py script, which loads the HTML in pinned Playwright Chromium, validates artboard dimensions and overflow, then exports staged PNG screenshots and a print-background PDF. JavaScript and network requests are blocked unless explicitly allowed.

Does the renderer allow JavaScript or remote fonts?▼

No, JavaScript and HTTP/HTTPS requests are blocked by default and external resources fail preflight. You can opt in with --allow-javascript, --allow-network, or --allow-system-browser flags after reviewing the source.

Can the PDF output be sent straight to a commercial printer?▼

Not automatically. Browser exports are RGB, and the preflight script only checks basic signals like TrimBox, BleedBox, and font embedding. CMYK conversion, ICC profiles, and PDF/X conformance still require dedicated prepress software.

When should I not use this skill for design work?▼

Avoid it for websites or product UI, slide decks, prose-heavy documents, and logo identity systems. It also must not be used to clone a competitor's distinctive branding, copyrighted illustration, or proprietary campaign layout.

Related Skills

Explore More Design & Creative Skills→
Pika-LabsPika-Labs
38

build-a-brand

Build a complete brand identity and 15-page brand guidelines PDF.

Official
Advanced
KumarAdi8KumarAdi8

banner-design

Design platform-optimized banners for social media, ads, websites, and print.

Community
Intermediate
kayroalexandrekayroalexandre

design-inclusive-visuals-specialist

Generate culturally specific images and videos with explicit negative constraints.

Community
Advanced
iamtatsuki05iamtatsuki05

PowerPoint

Plan, generate, and validate editable PowerPoint decks with native charts.

Community
Advanced