아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.
- 'AI 코드 자동완성이란?'이라는 주제로 교육용 인터랙티브 데모 HTML 페이지를 만들어줘 - 상단에는 개념 제목과 한 줄 설명, 파란 배경의 안내 배너를 넣어줘 - 가운데에는 모의 코드 에디터 박스(모노스페이스 폰트)를 만들고, '할인 가격 계산 함수(calculate_discount_price)'를 한 줄씩 타이핑되는 것처럼 애니메이션으로 보여줘 - 타이핑이 끝나면 흐릿한 회색 기울임체로 된 'AI 제안' 고스트 텍스트가 나타나고, 옆에 'Tab 눌러서 수락'이라는 작은 라벨을 붙여줘 - '▶ 타이핑 시작', '✅ 수락', '↺ 다시 보기' 버튼을 만들어서 각각 애니메이션 시작, 제안 수락(고스트 스타일 해제), 초기화 기능을 하도록 해줘 - 하단에는 개념을 3~6문장으로 쉽게 설명하는 카드와, 이 페이지를 만드는 데 사용한 프롬프트를 복사할 수 있는 카드를 추가해줘 - 라이트/다크 모드를 모두 지원하고, 부드러운 둥근 테두리의 미니멀한 디자인으로 만들어줘 - CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘