Skip to content
Get packs

Twitter Share Card

Makes the agent build a 16:9 dark or light quote or data card to pair with a Twitter post.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

This skill is a design template for an AI agent. When you ask for a Twitter quote or data graphic, the agent builds a 1600×900 HTML page with a large central quote, an author line, a small label such as Insight, Data or Quote, a brand watermark, and subtle grid or noise texture. You can screenshot the result and attach it to a tweet. It is a prototype layout, not a finished brand asset generator.

Great for

  • Social media managers who want quick, consistent quote cards for X/Twitter
  • Creators who share insights or statistics and want clean visuals without a designer

Skip it if

  • Projects that need a specific brand system or exact fonts, since the template has its own fixed look and no design system is required
  • Anything where the quote or data must be accurate and unverified, because the agent may fill in content and the skill itself does not check facts

Try asking

  • “Turn this paragraph into a Twitter quote card with a dark background and my name as author”
  • “Make a 16:9 data card showing these three survey numbers, ready to pair with a post”
  • “Create a light-mode insight card with the quote I pasted and a small Insight label”
Step-by-step guide: how to use Twitter Share CardInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    card-twitter.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip card-twitter.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip card-twitter.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your exact quote or numbers so it does not invent content, and ask it to avoid placeholder images.
  • Keep the quote to two or three lines; the template is designed for short hero text.
  • Check the screenshot's text and any numbers before posting, since the output is only as accurate as your input.

What's inside

  • example.html
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.