제품 출시를 위한 에이전트가 작성한 HTML 런치 페이지와 소셜 카드

What they did

그들은 저장소에 있던 평범한 markdown 체인지로그와 대략적인 제품 브리프에서 시작했습니다. 문서를 직접 손으로 편집하는 대신, html-anything을 저장소로 향하게 하고 PATH에서 이미 로그인된 coding-agent CLI를 감지하도록 했습니다(API 키 불필요). 롱폼 런치 페이지에는 매거진 아티클 surface를, 소셜 티저에는 트윗 카드 surface를 선택한 뒤, 에이전트가 markdown 소스에서 HTML을 직접 구성하도록 했습니다. 레이아웃은 CSS를 직접 건드리는 대신 자연어로 에이전트에 변경을 요청하며 반복했습니다 — 히어로를 타이트하게 다듬고, 액센트 색상을 바꾸고, 기능 그리드를 다시 흐르게 하는 식으로요. 마지막으로 페이지는 호스팅용 .html로, 카드는 게시용 .png로 내보냈고, 신경 쓰는 소셜 채널에는 원클릭 내보내기 경로를 사용했습니다.

How it went

단일 작업 세션에서 디자인 도구도, 수동 CSS도 없이 발표 가능한 런치 페이지와 공유 이미지 세트를 완성했습니다. 결과물은 렌더링된 마크다운 파일이 아니라 디자인된 페이지처럼 보였고, .png 내보내기는 소셜 게시물에 그대로 사용할 수 있었습니다. 완성도는 내부 배포에 충분했고, 카피를 몇 번 다듬으면 공개 준비도 거의 끝나는 수준이었습니다.

Worth knowing

품질은 어떤 코딩 에이전트 CLI가 설치되고 로그인되어 있는지, 그리고 어떤 스킬 템플릿을 선택했는지에 크게 좌우됩니다. 75개 템플릿에 따라 결과가 달라집니다. 이 도구는 로컬 우선 방식이므로 호스팅해 주는 것이 없으며, .html을 게시할 곳은 여전히 직접 마련해야 합니다. 브랜드 특성이 강한 디자인 시스템은 추가 프롬프팅이 필요할 수 있고, 내보낸 이미지는 게시 전에 폰트 렌더링을 표본 점검해야 합니다.

Wiring

html-anything을 로컬에 설치하고, 지원되는 코딩 에이전트 CLI(Claude Code, Cursor Agent, Codex, Gemini CLI, GitHub Copilot CLI, OpenCode, Qwen Coder, Aider, IBM Bob 중 하나)가 PATH에 있고 이미 인증되어 있는지 확인하세요. html-anything은 해당 세션을 재사용하므로 API 키는 설정되지 않습니다. 저장소를 대상으로 에디터를 열고, 스킬 선택기에서 결과물 표면(매거진 기사, 트윗 카드, 이력서 등)을 고른 뒤 마크다운 소스 파일을 지정하세요. 에이전트가 프로젝트에 HTML을 작성하며, 자연어 프롬프트로 반복 작업합니다. 내장 타깃(WeChat / X / Zhihu)으로 내보내거나 .html / .png로 다운로드하세요.

Try it yourself

I can't complete this request as specified. I don't have access to your repository, so I can't read `CHANGELOG.md`, `docs/` briefs, or any other markdown files. I also don't have a tool called `html-anything`, and I can't render HTML to `.png` or write files to your filesystem.

Here's what I can do instead, if you paste the source material:

1. **Launch page (HTML)** — I'll write a self-contained, responsive magazine-style page with a hero, feature grid, and pull quotes, using a restrained two-color palette and copy faithful to your markdown.
2. **Tweet cards (HTML snippets)** — three standalone, responsive card snippets for the top three features.
3. **Spec sheet (HTML)** — a one-page résumé-layout spec sheet.

For the exports, you'd run them yourself:
- Save each snippet as `.html`.
- For `.png` cards, use a headless browser, e.g. `npx playwright screenshot card.html card.png` or `npx puppeteer` with a fixed viewport, or open in a browser and screenshot at a set width.

To get started, paste the contents of `CHANGELOG.md` and any relevant `docs/` briefs (or just the sections covering the latest release and the top three features). Once I have that, I'll produce all three deliverables in one pass.