링크·아이디어를 조사하고 질문한 뒤, 생각을 웹페이지 한 장으로 바꿔주는 Claude Code 스킬.
단순 "HTML 변환기"가 아니다. 이 스킬의 진짜 상품은 HTML 생성이 아니라 그 앞단의 구조화 능력 — 입력이 무엇인지 판별하고, 필요하면 웹을 조사하고, 정보가 비면 질문하고, 확신 없는 건 추측 대신 정직하게 비워두는 과정이다. 그 결과만 외부 프레임워크 없이 인라인 CSS로 자급하는 모바일 반응형 단일 HTML로 떨어진다.
입력 — 웹사이트 링크 / 거친 아이디어 / 제품·서비스 설명 / 이벤트·커뮤니티 공지 / 이들의 혼합
출력 — index.html 단일 파일 (반응형 · 인라인 CSS · 출처 섹션 · JS 없음)
이 스킬을 다른 "링크 → HTML" 도구와 가르는 지점.
- 추측으로 채우지 않는다. 페이지에 없는 수치·기능·가격은 지어내지 않고 "미확인"으로 남긴다.
- 조사·질문이 먼저다.
WebFetch/WebSearch로 사실을 확보하고, 모호하면AskUserQuestion으로 한 번에 묻는다. - 게으른 기본값을 거부한다. 순수 흑백·Tailwind 기본색·장식 이모지·가짜 수치(99%/10x)·균등 중앙정렬을 피하고, 톤 있는 색 + 비대칭 강조로 첫인상을 만든다.
| 유형 | 언제 |
|---|---|
| Reading Note | 원문이 영문인 글·아티클·스레드 — 번역 전문 → 해석 → 레퍼런스 → 액션 아이템 2~3개 |
| Brief Page | 링크·아이디어를 요약·정리 (한글 소스 범용 기본값) |
| Landing Page | 서비스·제품·이벤트 소개·설득 + CTA |
| Research Card | 웹사이트·제품 조사 결과 카드 (강점·약점·메타 중심) |
Reading Note는 영문 원문을 소화할 때 번역 전문을 맨 위에 그대로(요약 금지) 싣고, 그 아래 해석·레퍼런스·실천 액션을 붙인다. 본문이 로그인 벽 등으로 막히면 Research Card로 폴백한다.
Claude Code에서 스킬을 호출하고 입력을 함께 준다.
/idea-to-html-brief https://example.com/some-article
/idea-to-html-brief 이런 서비스 아이디어를 랜딩페이지처럼 보여줘
자연어 트리거로도 발동한다 — "이 링크 한 페이지로 정리해줘", "영문 글 번역해서 정리", "리서치 카드로 만들어줘" 등.
워크플로우: ① 입력 유형 판별 → ② (URL이면) 조사 → ③ 모호하면 질문(최대 5개) → ④ 출력 유형 선택 → ⑤ index.html 생성 → ⑥ 요약·경로 안내.
출력은 기본적으로 현재 작업 디렉토리의 index.html. 동명 파일이 있으면 덮어쓰기 전에 물어본다.
| 입력 | 조사 방식 | 결과 |
|---|---|---|
| X(트위터) 게시물 | 본문이 막혀(402) 카드 메타만 확보 | Research Card (미확인 항목 정직 표기) |
| YouTube 영상 | 자막(yt-dlp) + 영상 프레임 전수 분석으로 명령어 검증 | Brief Page |
| Codeberg 저장소 | README 전문(raw) 확보 | Landing Page (터미널 설치 블록) |
이 스킬은 SKILL.md가 든 디렉토리다. 전역에서 쓰려면 ~/.claude/skills/에 두거나 심볼릭 링크한다.
# zip을 풀었다면
unzip idea-to-html-brief.zip -d ~/.claude/skills/
# 또는 소스 폴더를 심볼릭 링크
ln -s /path/to/idea-to-html-brief ~/.claude/skills/idea-to-html-briefidea-to-html-brief/
├── SKILL.md # 스킬 본체 — 워크플로우·규칙·가드레일
├── README.md # 이 문서
└── references/
└── templates.md # Reading Note / Brief / Landing / Research Card HTML 골격 + 공통 디자인 토큰
SKILL.md의 Step 5에서 Claude가 references/templates.md를 읽어 해당 유형의 골격(섹션 순서 + CSS 토큰)을 차용한다. 골격은 복붙용 완성품이 아니라 구조 가이드 — 내용에 맞게 변형된다.
입력을 조사·질문·구조화해 단일 HTML 한 장까지만 만든다. 멀티 페이지 사이트·백엔드·폼 처리·복잡한 인터랙션은 범위 밖이다.