무료GitHub에 공개한국어 소개

social-x-post-card

입력한 글이나 데이터를 좋아요, 재게시, 조회 수가 있는 X 스타일 게시물 카드로 만듭니다. 영상 위에 겹쳐 표시하거나 이미지로 공유할 단일 HTML을 생성합니다.

원문원문 설명 보기

Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.

nexu-io/open-design

연동 도구X (Twitter)

AI 평가100점/ 100 설치 방법 보기

이럴 때 유용합니다

영상 위에 게시물 카드 표시
인상적인 문구를 공유용 카드로 제작
입력 데이터를 짧은 게시글로 요약
게시물 내용과 반응 수를 함께 표시

한국어 소개

할 수 있는 일

입력한 글을 X 게시물 화면과 비슷한 카드로 만들고 단일 HTML 파일로 제공합니다. 사용자 이름, 계정명, 시각, 인증 표시와 함께 답글, 재게시, 인용, 좋아요, 조회 수를 배치합니다. 숫자는 1.2K처럼 짧게 표시하고 링크와 해시태그는 X 스타일의 파란색으로 표현합니다. 인용 게시물 카드도 추가할 수 있습니다.

이럴 때 유용합니다

영상 위에 게시물 모양의 카드를 겹쳐 표시하거나 짧은 문구를 공유용 이미지로 구성할 때 유용합니다. 1280×720 가로형과 1080×1080 정사각형을 상정하며 밝거나 어두운 배경을 선택할 수 있습니다. 데이터를 입력하면 280자 이내의 짧은 게시글로 요약합니다.

사용 예시

“이 글을 영상 위에 표시할 어두운 배경의 X 스타일 카드로 만들어 주세요.”
“이 데이터를 짧은 게시글로 요약하고 지정한 반응 수와 함께 배치해 주세요.”

주의 사항

본문은 사용자 입력을 사용하며 게시물 내용을 지어내지 않는 방침입니다. 외부 이미지 주소를 사용하지 않고 아이콘은 HTML 안에 SVG로 삽입합니다. 아바타와 선택적 이미지 영역은 CSS 그라데이션으로 표현합니다. 결과물은 HTML이며 이미지나 영상으로 내보내는 절차는 기재되어 있지 않습니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호입력 글을 반응 수가 있는 X 스타일 카드로 만들어 영상 위에 표시하는 용도를 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호화면 크기, 카드 구조, 색상, 숫자 표기와 단일 HTML 출력 형식을 구체적으로 제시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호게시물 조작과 외부 이미지 주소 사용을 금지하며 파일 삭제나 인증 정보 읽기를 지시하지 않습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호단일 HTML과 내장 SVG를 사용하며 API 키나 외부 서비스 설치를 요구하지 않습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(3)

SKILL.md3.6 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(...) 增加视频叠加的可读性。

리뷰

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

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

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

같은 저장소의 스킬