아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.
"강점카드 뽑기" 인터랙션을 단일 HTML 파일로 만들어줘. VIA 성격강점검사(VIA Character Strengths)의 24가지 강점을 기반으로 해줘.
- VIA의 6개 덕목(지혜와 지식/용기/인간애/정의/절제/초월) 아래 각각 속한 24가지 강점을
전부 목록으로 정리해서 사용 (예: 지혜와 지식 → 창의성·호기심·판단력·학구열·통찰력 등)
- 각 강점마다 아이콘 + 이름 + 소속 덕목 + 한 줄 설명을 준비
- 카드 하나가 화면 중앙에 있고, 처음엔 뒷면("?")이 보임
- "카드 뽑기" 버튼을 누르면 카드가 3D로 뒤집히는 애니메이션과 함께 24가지 중 하나를 무작위로 보여줘
(뒷면에 소속 덕목 배지, 아이콘, 강점 이름, 설명이 보이게)
- 버튼을 다시 누르면 카드가 리셋됐다가 새로 뒤집히면서 다른 강점이 나오게 해줘
- 하단에 VIA 성격강점이 무엇인지 짧게 설명하는 카드도 추가해줘
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어 UI로 출력해줘