무료GitHub에 공개

social-x-post-card

Turn supplied text or data into an X-style post card for video overlays or image sharing. Create a single HTML file with profile details, engagement counts, and light or dark styling in landscape or square formats.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享

nexu-io/html-anything

연동 도구X (Twitter)

설치 방법 보기

이럴 때 유용합니다

Creating post cards for video overlays
Preparing quotes for sharing as images
Summarizing data as a short post card
Presenting a post with engagement counts

포함된 파일(3)

SKILL.md2.5 KB
example.html4.3 KB
example.md333 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

【模板: X (Twitter) 帖子卡】【意图】把一段推文内容 (或用户的金句) 渲染成一张拟真度极高的 X 帖子卡片, 用于视频叠加、推特发图、知识沉淀。Inspired by hyperframes x-post。

【画布】1280×720 或 1080×1080, 暗背景 #0f1419 或亮背景 #ffffff (按 X 主题); 卡片居中, 阴影柔和。

【卡片结构】

外框: 圆角 16px, 1px border #2f3336 (dark) / #eff3f4 (light), 内边距 16px。
顶部 row: 头像 (48×48 圆形, 用 CSS gradient 占位) + 用户名 + handle @username + verified 蓝勾 + 时间 (mono, 12px, 灰)。
正文: 17-22px, 字重 400; 链接用 X 蓝 #1d9bf0; hashtag 同色; mention 同色; 段落间空 0.6em。
可选: 引用卡 (小卡内嵌, 灰底, 圆角 12px)。
可选: 1 张图 (CSS 渐变 + 描述占位, 不能外链图片), 比例 16:9, 圆角 12px。
互动 row: 4 个 icon + 数字 (回复 / 转推 / 引用 / 点赞), icon 用 inline SVG (X 官方风格), 灰色, hover 时变色。
顶部右上 X logo 单线 SVG。
浏览量 row: 👁️ + 数字 (小字)。

【字体】

西文: Chirp (X 的字体) → fallback Inter 或 Segoe UI。
中文: Noto Sans SC / PingFang SC。
数字: 同主字体, 不用 mono。

【设计细节】

配色 light: bg #fff, text #0f1419, secondary #536471, border #eff3f4, accent #1d9bf0。
配色 dark (推荐, 视频叠加用): bg #000, text #e7e9ea, secondary #71767b, border #2f3336, accent #1d9bf0。
数字格式化: 1.2K / 4.5M (不要原始 1234)。
内容必须来自用户输入, 不能编造推文。
若用户输入是数据 → 自动总结成一句"金句"推文 (≤ 280 字符)。
单文件 HTML; icon 内联 SVG; 不要任何外部图片 URL。
可选: 卡片背后加微妙径向高光 radial-gradient(...) 增加视频叠加的可读性。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬

article-magazine

무료

Format long articles for blogs and newsletters with a magazine-style layout inspired by Substack and Medium. A centered text column, contrasting headings, styled quotations, and labeled code blocks give readers clear visual cues throughout the page.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

Formatting a long blog article
Preparing an essay or newsletter for publication
Laying out articles with quotations and code examples

nexu-io/html-anything9.2천2026년 10월 13일 업데이트

article-sketchnote-editorial

무료

Turn a concept’s origins into a magazine-style visual story. Six distinct layouts combine diagrams, annotations, and typography to trace a concrete problem through failed attempts and a turning point, revealing the concept’s name at the end.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

Illustrating how a concept emerged
Creating visual learning materials about failed attempts
Presenting a concept’s history as a magazine feature

nexu-io/html-anything9.2천2026년 10월 13일 업데이트

blog-post

무료

Create magazine-style pages for long blog posts, essays, and case studies. The layout combines readable single-column text with a prominent title, captioned figures, highlighted quotations, author details, and related article cards.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

Designing a long-form blog page
Presenting an essay with magazine-style typography
Laying out a case study with figures and quotations

nexu-io/html-anything9.2천2026년 10월 13일 업데이트

card-twitter

무료

Create a landscape card for an X post, featuring a short quote, insight, or data point. The layout combines prominent text with attribution, a handle, a category label, and a brand watermark.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

Sharing a quote with author attribution on X
Highlighting a data point in a social post
Creating branded cards for short insights

nexu-io/html-anything9.2천2026년 10월 13일 업데이트

card-xiaohongshu

무료

Create a series of Xiaohongshu-style knowledge cards with a cover, focused content cards, and a closing summary. Soft colors, large text, and spacious layouts make the cards suitable for mobile reading and screenshots for social posts.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

Turn practical tips into a series of social media cards
Explain one key idea per card for mobile readers
Prepare card layouts for social post screenshots

nexu-io/html-anything9.2천2026년 10월 13일 업데이트

competitive-teardown

무료

Turn supplied competitor research into a product strategy report. Compare positioning, features, pricing, and user feedback, then identify opportunities and propose actions for the next 30, 90, and 180 days, while marking missing evidence.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

Comparing competitors to guide product decisions
Reviewing pricing and plan differences
Turning research notes into a strategy report

nexu-io/html-anything9.2천2026년 10월 13일 업데이트

nexu-io의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

npx skills add https://github.com/nexu-io/html-anything --skill social-x-post-card

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/social-x-post-card

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/social-x-post-card/, Codex는 ~/.agents/skills/social-x-post-card/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: nexu-io/html-anything
스타: 9,208
포크: 881
카테고리: 디자인
라이선스: Apache-2.0
원문 언어: 중국어
최종 업데이트: 2026년 10월 13일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.