social visual director
Turn campaign ideas into professional, mobile-ready social media visual systems and art direction.
$5
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentssocial visual director
Example session with this skill installed
I need a visual system for an Instagram campaign for a new organic energy drink called 'Spark'. It needs to look high-energy but premium. We're doing feed posts and stories.
- Read your context and instructions
- Compiled the social visual director
- Generated the UI component
I have developed a high-energy, premium visual system for the 'Spark' campaign, focusing on high-contrast layouts and mobile-optimized typography.
Visual Concept
The concept "Refined Kineticism" balances the raw energy of organic ingredients with a minimalist, luxury aesthetic. We will use blurred motion backgrounds contrasted against sharp, centered product photography.
Format System
| Format | Primary Goal | Visual Strategy |
|---|---|---|
| Feed Post | Brand Awareness | Centered hero product with 15% text overlay. |
| Stories | Engagement | Vertical split-screen: Top for lifestyle, Bottom for CTA. |
| Carousel | Education | Progressive zoom into ingredient details. |
Layout Rules
- Margins: 108px (10%) safety margin on all sides for Feed; 250px top/bottom for Stories.
- Composition: Rule of thirds for lifestyle; Dead center for product shots.
- Visual Weight: Keep the bottom 20% of the canvas clear of critical text to avoid platform UI.
Image Direction
- Lighting: Hard directional light to create sharp shadows (luxury feel).
- Viewpoint: Low-angle "hero" shots for the bottle; macro photography for ingredients.
- Color Palette: #F2F2F2 (Off-white), #1A1A1A (Carbon), #CCFF00 (Neon Lime accent).
Type Hierarchy
- Headline: Montserrat Bold, All Caps, 84pt. Letter spacing +5%.
- Subheadline: Montserrat Regular, 32pt. Used for short benefit claims.
- CTA: Montserrat Semi-Bold, 24pt, enclosed in a #CCFF00 button block.
Production Checklist
- Verify text is readable at 20% screen brightness.
- Ensure the 'Spark' logo does not overlap the Instagram 'Send' icon in Stories.
- Check that motion blur backgrounds don't vibrate against the text.
Next steps
- Apply the #CCFF00 accent color to your CTA buttons first.
- Capture product shots using a single-point light source for the hard shadow effect.
- Test the Headline font size on a physical mobile device.
social-visual-director.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
Generating cohesive social media visuals often results in a mess of inconsistent fonts, unreadable mobile text, and ignored safe areas. This skill acts as a professional art director to transform raw campaign ideas into a structured visual system ready for production.
What it does
- Visual Art Direction creates a unified aesthetic concept for social campaigns.
- Platform-Specific Layouts defines rules for stories, carousels, and feed posts.
- Mobile-First Typography establishes a type hierarchy that remains readable on small screens.
- Imagery Guidelines provides concrete direction for lighting, viewpoint, and composition.
- Safe Area Management ensures critical text and UI elements do not overlap with platform icons.
How it works
- Input Analysis involves processing your campaign message, target platforms, and brand assets.
- Concept Extraction identifies the core visual hook and audience triggers.
- System Mapping builds the specific rules for layouts, colors, and image styles.
- Quality Audit runs the design through mobile-readability and brand-consistency gates.
Frameworks & tools
This skill is framework-agnostic and works for platforms like Instagram, TikTok, LinkedIn, and Facebook. It focuses on design principles for tools like Figma, Canva, or the Adobe Creative Suite.
Why this beats prompting it yourself
Generic prompts often produce "pretty" but unusable graphics that ignore platform constraints like safe zones or text density. This skill enforces technical production standards and series consistency, ensuring your 10th post looks as professional as your first.
Use cases
- Launching a new product across Instagram, X, and LinkedIn with a unified look.
- Scaling a content series where different team members need to follow the same rules.
- Translating a text-heavy whitepaper into a readable carousel sequence.
- Auditing existing social assets to improve mobile readability and engagement.
Known limitations
This skill provides art direction, layout rules, and visual specifications. It does not generate final image files, export code, or manage social media scheduling platforms.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 2 days ago
- Passed all security checks, Safe to install