Cardnews Skill
将主题或网址生成 Instagram 4:5(1080×1350)卡片新闻的 Claude Code 技能,以 HTML/CSS 与 WebGL 着色器制作,并用 Playwright 截取为 PNG。
#cardnews#instagram#webgl#playwright#design#skill
Install
安装
git clone https://github.com/hjsh200219/cardnews-skill ~/.cardnews-skill \
&& cd ~/.cardnews-skill \
&& bash install.shRequirements
- Claude Code (CLI)
- macOS / Linux / WSL
- Node.js 18 이상, Git
- 설치 후 Claude Code를 재시작해 `/cardnews`가 목록에 보이는지 확인
Capabilities
主要功能
- 01`/cardnews <주제>` 또는 `/cardnews <URL>`, 자연어("카드뉴스 만들어줘 — 주제: …")로 호출 — 어느 디렉터리에서든 동작
- 02에피소드를 `~/.cardnews-skill/episodes/YYYYMMDD_<slug>/`에 만들고 `images/card-NN.png`를 1080×1350px로 출력
- 03카드 상단은 WebGL 셰이더 6종(orb·ring·mesh·line-stream·gradient-flow·noise-field), 텍스트 영역은 순백 배경으로 완전 분리
- 04디자인 원칙 — Helvetica Neue 단색 폰트, 흰색 + 액센트 1색, 그라디언트 텍스트 금지. 액센트는 `shared/styles.css`의 `--accent`로 변경
- 05`install.sh`가 저장소 클론, 스킬 등록(`~/.claude/skills/cardnews/`), 경로 설정, Playwright·Chromium 설치까지 한 번에 수행
About
About
cardnews-skill generates Instagram card news in the 4:5 format (1080×1350 px). Given a topic or a URL, the Claude Code skill builds each card in HTML and CSS, draws an abstract WebGL shader in the top zone, keeps the text zone on a plain white background, and captures every card as a PNG with Playwright.
The visual rules are fixed: a single Helvetica Neue family, white plus one accent colour, and no gradient text. Six shader types (orb, ring, mesh, line-stream, gradient-flow and noise-field) map to cover, point, list, statistics, quote and checklist cards, and a data-seed value produces different patterns from the same shader. One install command clones the repository, registers the skill under ~/.claude/skills/cardnews/ and installs Playwright with Chromium. It needs Node.js 18+ and runs on macOS, Linux or WSL.