Carousel Generator

Card News Generator (카드뉴스 자동 생성기)

This skill creates professional Instagram/Threads card news (4:5 ratio, 1080x1350px) through a complete pipeline: brand selection, topic confirmation, deep research, card flow planning, HTML generation with neumorphism design, and PNG download capability.

The goal is not just pretty cards -- it's a full content pipeline where research quality and message flow matter more than decoration.

---

Brand Templates

This generator supports multiple brand presets. If the user doesn't specify a brand, ask which one to use via AskUserQuestion. If context makes the brand obvious (e.g., the user mentions a specific brand name or account), use that preset directly.

The presets below are worked examples (real brands run with this skill in production). Treat them as the template for defining YOUR brand's preset: copy one, swap the account/palette/tone/footer, and add it as a new preset section. If a brand has its own dedicated card-news skill installed, that skill wins over these presets.

Preset: CREAL (댄정 @crealwork)

Account: @crealwork Brand name: 댄정 Footer text: 댄정 @crealwork Content domain: AI + Marketing (AI 활용법, 마케팅 자동화, 생산성, 트렌드 등) Language: Korean CTA button text: Follow Dan

Tone: 쉽고 실용적인 정보형 -- 전문 용어를 쓰더라도 한 번은 쉽게 풀어서 설명하고, 독자가 "이거 저장해야지"라고 느낄 수 있게 구체적이고 실행 가능한 내용 위주로 쓴다. 가볍지만 근거 있는 톤. 과장하지 않되, 임팩트는 살린다.

Color Palette (CREAL B.I. Guideline):

• Navy (Primary): #1A2A4F -- headings, key text, dark backgrounds
• Yellow (Accent): #FFCC4E -- highlights, CTAs, emphasis, badges
• Black: #000000 -- body text on light backgrounds
• White: #FFFFFF -- text on dark backgrounds
• Warm Gray: #A39F94 -- secondary text, dividers, subtle elements
• Coral: #D77A61 -- charts, secondary accents
• Background: #F8F5F0 (ivory cream) for light mode, #1A2A4F for dark mode

Default style: Style A (Light Neumorphism) for general audiences. Logo: CREAL Text logo in footer. White/Yellow on dark, Black/Blue on light.

Preset: Red Seal Pro

Account: @redseal.pro Brand name: RED SEAL PRO Footer text: RED SEAL PRO @redseal.pro Content domain: Contractor tips, home improvement, trades, HVAC, plumbing, electrical Language: English CTA button text: Follow @redseal.pro

Tone: Direct, authoritative, practical. Speaks contractor-to-contractor. No fluff, real-world advice. Professional but approachable.

Color Palette:

• Dark charcoal (Primary): #1A1A1A -- backgrounds, headings
• Red (Accent): #C0392B -- highlights, CTAs, emphasis
• White: #FFFFFF -- text on dark backgrounds
• Light gray: #F5F5F5 -- secondary backgrounds
• Medium gray: #888888 -- secondary text

Default style: Style B (Dark Neumorphism) for premium/professional feel.

Preset: Sundayable

(Synced to the live site sundayable.com on 2026-07-16. If in doubt, the live site and the brand portal at proof.getsundayable.com/brand win over this file.)

Account: @sundayable Brand name: Sundayable. Footer text: Sundayable. (wordmark only, period included, never burgundy) Content domain: Sunday, the AI operator, ships finished work for small business — pages, ads, reels, cold outreach, CRM ops, weekly workflows. Positioning: "AI + Revenue Growth Team for Small Business". Key line: "People don't need more software. They need the work done." Never call Sunday a tool or copilot; it's an operator that ships. Language: English (Korean OK for Korean-market audiences) CTA button text: Book a Free Demo (site CTA) or Follow Dan Jeong at Sundayable for follow-type cards Site: sundayable.com · Brand kit: proof.getsundayable.com/brand

Tone: Editorial-minimal. Magazine typography meets a clean iOS message thread. Direct, declarative, no jargon. No em-dashes. No emojis. No exclamation marks. Contractions OK. Talks like a person, not a brand.

Color Palette (warm — never cool grays, never pure-white backgrounds):

• Paper (Background): #EFECE6 -- warm cream, main background
• Card: #FFFFFF -- cards/panels sitting on paper
• Ink (Primary): #0A0A0A -- headings, primary text, wordmark
• Body: #1F1F1F -- body text on paper
• Muted: #5F5A50 -- subtext, descriptions, meta labels
• Subtle: #98927F -- disclaimers, fine print
• Divider: #DDD8CC -- borders, separators
• Surface: #E7E3D9 -- card insets, alternating sections
• Burgundy (Accent): #800020 -- italic emphasis, CTA fills, accent bars (hover #660019)
• No burgundy tints (rose-soft #F2DEE3 was killed 2026-07-16): full-strength burgundy or nothing. Sunday's bubbles/status pills sit on Surface #E7E3D9 with the burgundy S avatar for differentiation

Typography (override Pretendard with these):

• Display headings: Instrument Serif (400) -- Google Fonts
• Italic emphasis only: DM Serif Display (400 italic) -- burgundy color
• Body: Inter (300-700) -- Google Fonts
• Wordmark Sundayable. is always Instrument Serif, ink color, period included

Italic emphasis pattern -- ONE per card max (max 2-3 per deck total):

phrase

Hard rules (Sundayable-specific):

1. Hard ban: em-dashes, emojis, exclamation marks. No exceptions.
2. Hard ban words: leverage, unlock, seamless, dive into, AI-powered, robust, navigate the complexities, in the realm of.
3. One italic emphasis per card max. Don't stack.
4. Wordmark Sundayable. -- the period is part of the wordmark, never colored separately, never burgundy.

4b. S mark is minimal-use ONLY (Dan, 2026-07-16): favicons, point icons, Sunday's chat avatar. Never next to the wordmark, never as a card's brand mark, no lockups. On cards the brand is always the wordmark.

1. Burgundy is for: italic emphasis spans, CTA button fills, accent bars only. Nothing else competes.
2. No gradients. No multi-tone shadows. No stock photos. No illustrations.
3. Body never below 16px (cards: ≥ 24px since cards are mobile-first social).
4. CTAs are pill-shaped (border-radius: 999px) with burgundy fill, white text.
5. Footer pattern: Sundayable. wordmark left, topic-slug · NN / NN muted right.

Default style: Custom editorial (NOT neumorphism). Warm cream paper background, generous whitespace, restrained shadows, ink typography. Minimal divider lines instead of card outlines.

Phone mockup specs (when used):

• iMessage user (the owner / viewer): #007AFF blue, RIGHT-aligned, border-bottom-right-radius: 6px
• iMessage other party (Sunday / coach / etc.): #E9E9EB gray, LEFT-aligned, border-bottom-left-radius: 6px
• Sunday avatar (when shown): #800020 burgundy circle with cream "S" (official monogram SVG in the brand kit)

Operator profile series — fixed closing card (Sundayable IG @sundayable.ai):

When building IG profile cards on iconic salespeople / operators (Tom Ferry, Joe Girard, future ones), the last card is ALWAYS this exact CTA, industry-unspecific:

• Hero: Sales,decoded.
• Lead: Sundayable studies the operators who built modern sales. The math, the scripts, the discipline. Follow for more.
• CTA button: Follow @sundayable.ai linking to https://instagram.com/sundayable.ai
• Background: dark ink (var(--ink))
• Italic emphasis color: #FFB6C1 (lighter pink for contrast on dark)

Never use industry-specific language ("real estate sales", "car sales", etc.) in this closing because the same closing must work across operators from different industries (Tom Ferry = real estate, Joe Girard = cars, etc.). One-off campaigns (skill launches, product announcements) can have custom closings.

Custom Brand

When the user specifies a brand not in the presets, collect:

1. Brand name and account handle
2. Footer text
3. Color palette (at minimum: primary, accent, background)
4. Tone description (1-2 sentences)
5. Content domain/topic focus
6. Language (Korean, English, etc.)
7. CTA button text
8. Logo (optional -- file path or "none")

Use provided values and fill reasonable defaults for anything not specified.

---

Step 0: Brand & Topic Confirmation

Determine the brand and topic. If the user's message makes both clear, confirm and proceed. Otherwise ask via AskUserQuestion:

1. Brand -- Which brand template? (CREAL / Red Seal Pro / custom)
2. Topic -- What specific subject?
3. Purpose -- What's the main goal? (저장/공유 유도 / 팔로워 증가 / 교육 / 브랜드 신뢰)

Optionally check:

1. Card count preference -- 짧게 5-7장 / 일반 8-12장 / 깊이 있게 13-19장
2. Must-include or must-avoid -- 특정 서비스, 통계, 금지 표현 등

Don't over-interview. Once brand + topic are clear, move to research quickly.

---

Step 1: Deep Research

Once you have the user's input, do thorough web research. This is the most important step -- the quality of your research directly determines whether the card news is worth saving or just looks nice but says nothing.

What to search for (5-10 searches)

• Key statistics and recent numbers
• Latest trends and market changes
• Comparable data points for before/after or vs. comparisons
• Visualizable data (percentages, growth rates, rankings)
• Real examples or quotable insights
• Source-backed facts (not vague claims)

For general/beginner audiences, also find

• Empathy hooks: why people struggle, common misconceptions, relatable frustrations
• Shock points: surprising stats that flip assumptions
• Success stories: ordinary people who got results (non-experts, side-hustlers, beginners)
• Low barrier evidence: free tools exist, low cost, quick first results

Organize your research

After researching, compile:

Topic summary (1 line)
Key data points (5-8)
Chart-ready data (numbers that can become visuals)
Memorable example or quote
Reader empathy points (3)
Shock stat (1-2)
Key takeaways (3)

Show the draft plan before designing

Present to the user:

• Proposed card flow (which cards cover what)
• Key messages per card
• Main data points you'll use
• Expected card count

Wait for approval before proceeding to design. This prevents expensive rework.

---

Step 1.5: Hooking Strategy

The first 1-2 cards decide whether anyone reads the rest. Design them strategically.

Reader persona (quick sketch)

Think about:

• What's their situation/job?
• What problem are they dealing with?
• What scares them most about this topic?
• What result do they want?

Cover card (Card 1) must do three things simultaneously

1. Stop the scroll -- a bold statement or surprising number
2. Communicate the topic instantly -- no ambiguity
3. Hint at value -- why should I keep reading?

Card 2 answers "Why should I care?"

• Name the reader's problem clearly
• Show what they'll gain from reading
• Build trust (data-backed, not hype)

Hooking styles to choose from

• Info-shock: lead with a surprising number or counterintuitive fact
• Empathy: lead with the reader's frustration or situation
• Success story: lead with a relatable person's result

---

Step 2: Design System

Choose one of two base styles based on the brand mood and topic:

Style A: Light Neumorphism

Best for: bright/friendly brands, beginner audiences, readability-first, Instagram-native feel. Features: light background, soft shadows for depth, high readability, approachable feel.

Style B: Dark Neumorphism

Best for: tech/IT feel, premium brands, immersive experience, high-contrast data display. Features: dark background, sophisticated atmosphere, numbers and highlights pop harder.

Bento Grid Layout

Inside each card, use a bento grid approach -- information blocks of varying sizes arranged together so cards feel dynamic, not like a boring slide deck.

The key balance: cards should share the same design language but vary enough in internal layout that scrolling through them feels engaging, not repetitive.

---

Step 3: Card Flow Design

Card count is flexible (5-19 cards) based on how much good content you have from research.

Recommended flow

1. Hook cover -- stop the scroll
2. Problem/empathy -- why this matters to you
3. Shock data -- key evidence
4. Background -- context that makes the data meaningful
5. Solution/method -- what to actually do
6. Real example -- proof it works
7. Common mistakes -- what to avoid
8. Key tips -- actionable advice
9. Summary -- core takeaways in one card
10. CTA -- follow, save, share, comment

CTA card (last card) design rules

The CTA card is the final card that encourages follow/save/share. Follow these rules strictly:

1. Follow button text: Use the brand's CTA button text from the Brand Templates section
2. Center alignment: The follow button and all CTA content must be centered horizontally
3. Visibility: Section headers must have strong contrast against the background.

Never use a light/faded color that blends into the background.

1. Button style: Brand accent color background with contrasting text, rounded corners,

centered in the card. Make it visually prominent.

1. Layout: Center all elements vertically and horizontally. Don't left-align the button

while centering other text -- everything should be consistently centered.

For shorter card news, compress the middle. For longer ones, expand with more data/examples.

One message per card

Each card should communicate exactly one key point. If you catch yourself putting 2-3 ideas on one card, split them. Cards are meant to be swiped through quickly.

---

Step 4: Data Visualization

For stable PNG rendering, do NOT use external chart libraries like Chart.js or canvas-based tools. They break during PNG capture.

Allowed methods

• Inline SVG
• HTML/CSS div-based charts (width percentages, flexbox bars, etc.)

Recommended chart types (mix at least 3 different types)

• Donut charts (SVG)
• Bar charts (CSS divs)
• Comparison bars (side-by-side CSS)
• Progress bars
• Ratio cards (big number + label)
• Number counter blocks

Visualization checklist

• Numbers in the chart match the text
• Percentages add up correctly
• Sources are mentioned naturally in context when needed
• No card has too many charts crammed together

---

Step 5: HTML Generation

Generate a single HTML file containing all cards. This is the core deliverable.

Critical rules for Cowork compatibility

These rules ensure the card news displays correctly in Claude's preview AND exports cleanly as PNG:

Rule 1: Static HTML only for cards. Every ` must exist directly in the `. Never generate cards with JavaScript. JS-generated cards won't show in Cowork preview.

Rule 2: JavaScript is only for the download button. No JS for card rendering. Only for PNG capture and ZIP download.

Rule 3: Use Pretendard font via CDN.

Pretendard is the designated brand font. Load it via CDN ` tag in the HTML `:

Then set the font stack and Korean text rules:

:root {
  --font-main: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo',
               'Malgun Gothic', 'NanumGothic', sans-serif;
}

* {
  word-break: keep-all;
  overflow-wrap: break-word;
}

word-break: keep-all is essential for Korean. Without it, the browser breaks lines in the middle of words (character by character), which looks broken. keep-all forces line breaks only at spaces, keeping Korean phrases intact.

This CSS-only `` tag works in Cowork preview (unlike JS-based font loading). For PNG capture, inline the font in the download JS to ensure it embeds in the PNG output.

Rule 4: Deliver the HTML file directly. No separate viewer files. One self-contained HTML file in the client's project folder.

Rule 5: Inline ALL images as base64 data URIs.

Never reference external images via relative path or absolute URL — they break during dom-to-image-more PNG capture due to file:// CORS restrictions and resource loading races.

Always do this:

1. Resize source

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: crealwork
• Source: crealwork/ai-marketing-kit
• License: MIT

Install and usage instructions live in the source repository linked above.