클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

트위터 공유 카드

1600×900 16:9 규격의 트위터용 금언·데이터 카드를 HTML로 만들어 주는 디자인 템플릿.

디자인·UI입문★ 8,494⑂ 837AI 점수 5/10마지막 업데이트: 2026. 8. 23.

무엇을 해주나

  • 트윗에 첨부하기 좋은 1600×900(16:9) 공유 카드 레이아웃을 정의합니다.
  • 중앙 대형 인용문(text-6xl, 2~3줄 제한), 하단 작성자 이름·프로필 자리·핸들, 좌측 상단 라벨(Insight/Data/Quote), 우측 하단 브랜드 워터마크까지 위치를 지정합니다.
  • 그리드·노이즈·도트 같은 미세한 질감과 그라디언트 광원 배경으로 스크린샷 그대로 써도 어색하지 않은 완성도를 노립니다.
  • 콘텐츠 정서에 따라 다크/라이트 두 가지 톤 중 하나를 고르게 합니다.

이런 분께 추천

  • X(트위터)에 인사이트·통계·명언을 이미지로 자주 올리는 마케터, 1인 창작자
  • 뉴스레터·블로그 홍보용 카드 이미지를 반복 제작하는 콘텐츠 담당자
  • HTML/Tailwind로 이미지 카드를 뽑아 스크린샷하는 워크플로를 이미 쓰는 개발자

활용 예시

  1. "이번 글의 핵심 문장으로 트위터 금언 카드 만들어줘" → 다크 톤 16:9 카드 HTML 생성 후 캡처.
  2. 주간 지표(예: MAU 32% 상승)를 좌측 상단 "Data" 라벨이 붙은 데이터 카드로 제작.
  3. 인터뷰 인용구 + 화자 핸들을 넣은 라이트 톤 카드 시리즈를 여러 장 일괄 생성.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/nexu-io/html-anything/HEAD/next/src/lib/templates/skills/card-twitter/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 nexu-io/html-anything 의 next/src/lib/templates/skills/card-twitter 폴더를 내 ~/.claude/skills/card-twitter/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/nexu-io/html-anything.git /tmp/html-anything && mkdir -p ~/.claude/skills/card-twitter && cp /tmp/html-anything/next/src/lib/templates/skills/card-twitter/SKILL.md ~/.claude/skills/card-twitter/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 저장소를 내려받습니다: git clone https://github.com/nexu-io/html-anything.git /tmp/html-anything
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills/card-twitter
  4. 파일을 복사합니다: cp /tmp/html-anything/next/src/lib/templates/skills/card-twitter/SKILL.md ~/.claude/skills/card-twitter/
  5. Claude Code를 다시 실행한 뒤 "트위터 금언 카드 만들어줘"처럼 요청해 동작을 확인합니다.
  6. 결과 HTML은 브라우저에서 열어 1600×900으로 캡처하면 바로 트윗에 첨부할 수 있습니다.
GitHub에서 원본 보기 ↗라이선스: Apache-2.0