{"product_id":"ai-skill-create-stunning-banners-in-3-styles-instantly","title":"AI Skill: Create Stunning Banners in 3 Styles Instantly","description":"\u003ch3\u003eAI Skill: Create Stunning Banners in 3 Styles\u003c\/h3\u003e\n\n\u003cp\u003eThis AI skill enables the creation of visually diverse banners, offering three distinctive art directions utilizing a single set of tokens. The output formats include HTML and SVG, designed to meet platform-specific requirements such as safe zones and crop behavior. Users can export designs as PNGs via Playwright, ensuring ready-to-use assets across various applications like social media, websites, and print.\u003c\/p\u003e\n\n\u003ch3\u003eWhat this skill does\u003c\/h3\u003e\n\u003cul\u003e\n    \u003cli\u003e\n\u003cstrong\u003eInitiate Brief:\u003c\/strong\u003e Establish the design's goal, platforms, audience, central message, call-to-action, and mandatory elements based on inferred details and up to two user questions.\u003c\/li\u003e\n    \u003cli\u003e\n\u003cstrong\u003eDevelop Three Directions:\u003c\/strong\u003e Use `references\/directions.md` to create three truly different design ideas, each characterized by distinct concepts, hierarchy, color use, and visual flow.\u003c\/li\u003e\n    \u003cli\u003e\n\u003cstrong\u003eCompose and Reflow:\u003c\/strong\u003e Draft the largest design version first, adhering to hierarchical rules, then reflow into other sizes, maintaining design integrity without scaling.\u003c\/li\u003e\n    \u003cli\u003e\n\u003cstrong\u003eGenerate Output:\u003c\/strong\u003e Produce an HTML file for each design direction and size, along with an index page for previewing all variations collectively.\u003c\/li\u003e\n    \u003cli\u003e\n\u003cstrong\u003eVerify and Export:\u003c\/strong\u003e Check safe zones, crop behavior, and file sizes, then export as 2x PNGs where Node and Playwright are available.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eWho it is for\u003c\/h3\u003e\n\u003cp\u003eThis skill is intended for developers and teams employing AI coding agents like Claude Code, Cursor, and Codex who require efficient and automated banner design capabilities within their workflows.\u003c\/p\u003e\n\n\u003ch3\u003eUse cases\u003c\/h3\u003e\n\u003cul\u003e\n    \u003cli\u003eCreating branded social media covers and ad creatives for platforms such as LinkedIn, X (formerly Twitter), and YouTube.\u003c\/li\u003e\n    \u003cli\u003eDesigning website hero images and email headers that conform to varying platform specifications.\u003c\/li\u003e\n    \u003cli\u003eDeveloping print-ready materials such as posters and banners for marketing campaigns.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eTechnical details\u003c\/h3\u003e\n\u003cul\u003e\n    \u003cli\u003eReads configuration files: `brand-guidelines.md` and `design-tokens.json`; defaults to brand Light and tokens Minimal if absent.\u003c\/li\u003e\n    \u003cli\u003eVerifies size changes with `references\/sizes.md` against current platform specifications when internet access is available.\u003c\/li\u003e\n    \u003cli\u003eEmploys Node.js scripts and Playwright for exporting PNG assets, optimizing for platform compliance and visual consistency.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c!-- mcpcart:static-blocks:start --\u003e\n\u003chr\u003e\n\u003ch3\u003eSource \u0026amp; Licence\u003c\/h3\u003e\n\u003cp\u003eThis package is built on open-source work published by \u003cstrong\u003eHarrypatria\u003c\/strong\u003e (\u003ca href=\"https:\/\/github.com\/Harrypatria\/tastemaker\" rel=\"nofollow noopener\" target=\"_blank\"\u003eHarrypatria\/tastemaker\u003c\/a\u003e) and distributed under \u003cstrong\u003eMIT\u003c\/strong\u003e. The original licence text and copyright notice are included in your download.\u003c\/p\u003e\n\u003cp\u003ePersonal and commercial use, modification and redistribution are permitted, provided the original copyright and licence notice are retained.\u003c\/p\u003e\n\u003cp\u003eYour purchase covers curation, licence verification, packaging, documentation and instant delivery. It does not grant exclusive rights to the underlying open-source code, which remains available under its original licence.\u003c\/p\u003e\n\u003ch3\u003eDelivery \u0026amp; Support\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eDelivery:\u003c\/strong\u003e instant — a secure download link is emailed to you as soon as payment is confirmed.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFormat:\u003c\/strong\u003e ZIP archive containing the skill files, documentation and the original licence.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSupport:\u003c\/strong\u003e \u003ca href=\"mailto:support@mcpcart.com\"\u003esupport@mcpcart.com\u003c\/a\u003e — we aim to reply within 2 business days.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eUpdates:\u003c\/strong\u003e updates are included only where stated on this page.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eRefunds\u003c\/h3\u003e\n\u003cp\u003eThis is a digital product delivered immediately after purchase. By completing your order you request immediate delivery and acknowledge that, once the download has been accessed, the statutory right to cancel no longer applies to the extent permitted by law. Refund requests are handled in accordance with our published Refund Policy.\u003c\/p\u003e\n\u003cp style=\"font-size:0.85em;color:#666;\"\u003eClaude, Codex, Gemini and Cursor are trademarks of their respective owners. MCP Cart is an independent marketplace and is not affiliated with, endorsed by, or sponsored by any of them. Compatibility references describe interoperability only.\u003c\/p\u003e\n\u003c!-- mcpcart:static-blocks:end --\u003e","brand":"MCP Cart","offers":[{"title":"Default Title","offer_id":53473325973815,"sku":"MCP-HARRYPATRIA-TASTEMAKER-TASTE-BANNERS","price":53.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0981\/3950\/4951\/files\/BoPB-pC5cLv_nrTLaLzXs_3103ca026f8342b2b2120f76098f1e17.jpg?v=1793441152","url":"https:\/\/mcpcart.com\/products\/ai-skill-create-stunning-banners-in-3-styles-instantly","provider":"SPF PRO","version":"1.0","type":"link"}