- Home
- Skills
- Branding & Design
- Full Stop. - SOCIAL MEDIA DESIGN KIT
More screenshots
Works with the AI tools you already use
Full Stop. - SOCIAL MEDIA DESIGN KIT
Carousels people save. Designer-grade Instagram carousels in minutes, build a brand identity with no Photoshop needed.
$15
Full Stop. - SOCIAL MEDIA DESIGN KIT
Example session with this skill installed
read the zip file attached, inside are design assets, fonts, layout references, and a skill file. this is a full design reference and skill for branding. I want you to create me a 5 post carousel for my business, which is a insert your business here , I've attached my logos and some photos of my business to use.
my messages are, insert message 1
insert message 2
insert message 3
insert message 4
- Read your context and instructions
- Compiled the full stop
- Generated the image
I have generated the HTML for a text-only carousel tile. This layout uses the --cp-olive ground with --cp-yellow for the display stack and --cp-ivory for the body text, following the approved pairing rules.
Carousel Tile: Field Notes 01
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../references/tokens.css">
<style>
body {
background-color: var(--cp-olive);
color: var(--cp-ivory);
width: 1080px;
height: 1440px;
padding: 54px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.header {
border-bottom: 1.5px solid var(--cp-ivory);
padding-bottom: 12px;
font-family: var(--cp-font-body);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.content {
flex-grow: 1;
padding-top: 120px;
}
h1 {
font-family: var(--cp-font-display);
color: var(--cp-yellow);
font-size: 112px;
line-height: 1;
text-transform: uppercase;
margin: 0 0 40px 0;
letter-spacing: -0.02em;
}
.asterisk {
color: var(--cp-yellow);
font-size: 48px;
margin-bottom: 30px;
}
p {
font-family: var(--cp-font-body);
font-size: 44px;
max-width: 800px;
line-height: 1.4;
}
.footer {
border-top: 1.5px solid var(--cp-ivory);
padding-top: 12px;
font-family: var(--cp-font-body);
letter-spacing: 0.1em;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="header">FIELD NOTES / 01</div>
<div class="content">
<h1>NOTICE WHAT<br>MATTERS.</h1>
<div class="asterisk">*</div>
<p>The world is loud. Your attention is quiet. Look at the things others miss. That is where your story begins.</p>
</div>
<div class="footer">CLARITY BEFORE CONTENT</div>
</body>
</html>
Next steps
- Open this file in a browser and use the print-to-PDF/image function for a 1080x1440 export.
- Review the text-box-trim settings in
tokens.cssto ensure the display type sits exactly on the margin. - Pair this tile with a full-bleed photo tile to create a high-contrast transition in your carousel.
full-stop-social-media-design-kit.png
PNG · 1536×1024
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
Maintaining brand consistency across social tiles and visual content is a friction point for fast-moving business owners. This skill enforces the strict visual and tonal system of "The Content Playbook," a warm editorial aesthetic defined by bold typography and flat color palettes. It eliminates design drift by providing structured HTML templates and precise tokens for type, layout, and voice.
Content Playbook by Carousel Studios turns a simple brief into polished, on-brand 1080×1440 Instagram carousels. It handles the layouts, type and styling, and you add your logo and message. It's built for busy business owners like salons, cafes and trades who want content that looks designer-made without opening a design app.
- Asset generation produces on-brand social carousels, pages, posters, and emails.
- Visual enforcement applies a four-color flat palette and specific typographic scales using bundled Anton and Instrument Sans fonts.
- Layout orchestration manages a precise 3:4 or 2:3 grid with fixed margins, header/footer furniture, and specific photo-to-text ratios.
- Tonal adaptation converts input copy into a warm, mentor-like second-person voice that follows specific punctuation and casing rules.
- Template management utilizes a library of HTML starter files for rapid deployment of new content pieces.
## How it works
- Selection chooses a layout family such as full-bleed photo, vertical split, or text-only ground based on your content needs.
- Configuration links the provided
tokens.cssor references thetokens.jsonto pull exact hex codes and spacing values. - Execution populates the specific HTML templates in the
templates/directory with your messaging. - Validation checks the output against the "Do's and Don'ts" list to ensure no forbidden elements like gradients or icons are used.
Frameworks & tools
This skill uses standard web technologies including HTML5, CSS3 with custom properties (tokens), and JSON. It relies on bundled Open Font License (OFL) typefaces and local asset paths for images and icons.
Why this beats prompting it yourself
Generic prompts often return inconsistent colors or "hallucinated" layouts that break brand rules. This skill uses a fixed reference system and physical templates, ensuring every asset perfectly matches the established editorial grid and specific typographic hierarchy without manual correction.
Use cases
- Generating a 10-tile Instagram carousel with consistent header/footer design
- Designing a multi-page PDF field guide with specific chapter opener layouts.
- Creating a minimalist event poster using the bold Anton display system.
- Drafting an editorial email that mirrors the print aesthetic of the playbook.
Known limitations
Does not support app UI components, icons, or logos. It is restricted to four specific colors and two font families. Not suitable for projects requiring gradients, shadows, or centered text stacks.
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 3 days ago
- Passed all security checks, Safe to install