Answer Me With HTML

예시 체험

중3 과학 — 직렬·병렬 연결 한 장 설명 페이지 만들기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기

선생님이 입력한 내용

중학교 3학년 과학 '전기 회로' 단원. 직렬 연결과 병렬 연결의 차이를 학생들이 그림과 표로 한눈에 보도록, 수업 중 화면에 띄울 한 장짜리 설명 페이지가 필요한 상황이다.

중학교 3학년 과학 '전기 회로' 단원에서 직렬 연결과 병렬 연결의 차이를 학생들에게 설명하려고 해요. 전류가 지나는 길, 전구 하나가 끊어졌을 때, 전체 저항과 밝기 차이를 그림과 표로 한눈에 보이게 한 장짜리 HTML 설명 페이지로 만들어 주세요. 예시로 저항값을 넣는다면 수업용 예시 값이라고 표시해 주세요.

나온 결과

B 두 연결 비교 — 전구 하나가 끊어지면: 직렬 ✗ 모두 꺼짐 / 병렬 ✓ 나머지는 켜짐, 전체 저항: 직렬 커짐 / 병렬 작아짐, 같은 전지에서 전구 밝기: 직렬 어두움 / 병렬 밝음 D 결론: 전구를 한 줄로 이으면 전체 저항이 커지고, 여러 갈래로 이으면 전체 저항이 작아진다.

직접 해 보기 — 3단계

1. opencode 같은 AI 에이전트에 저장소 안내대로 이 스킬을 설치한다. Node.js 20 이상이 필요하다(설치 없이 명령 한 줄로 끝난다).
2. 학년·단원·꼭 넣을 내용을 적은 문장을 붙여 넣는다. 위 문장을 바꿔 써도 된다.
3. 나온 HTML 파일을 브라우저로 열어 그림·표·식을 확인한다. 저항값 같은 숫자는 우리 수업에 맞게 고쳐 쓴다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (answer-me-with-html) · 확인일 2026-10-16. 그림은 이 스킬의 am CLI를 그대로 돌려 나온 결과 화면을 캡처한 것이다(내용을 손으로 고치지 않았다). 이 스킬은 에이전트가 한글 Markdown 초안만 쓰면 CLI가 배치·색·도형 좌표를 계산해 한 장짜리 HTML로 그려 준다. 그림에 보이는 C 패널의 저항값(2Ω·3Ω·5Ω·1.2Ω)은 계산 과정을 보여 주려고 넣은 수업용 예시 값이며 실제로 측정한 값이 아니다. 한글 페이지라도 버튼 이름(Theme·Mode·Reply·Remark·Copy source)은 영어로 나오고, 페이지 위쪽에 스킬 이름·버전·GitHub 링크가 표시된다. 배포/학생 공유 전에 그 표시를 지우고, 학교에서 쓰는 전지의 전압과 전구 저항에 맞게 숫자를 바꿔 확인해야 한다.

써 보려면

데모에 보이던 중국어 언어 이름을 「중국어」로 옮겼습니다. 프로젝트 이름과 출처는 원본입니다.

1. 저장소 QingYunA/answer-me-with-html를 엽니다.
2. 설치가 필요합니다. 절차는 저장소 안내를 따릅니다.
3. 이 기록에는 API 키가 필요하지 않다고 되어 있습니다.

출처

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 정보 정정 요청

라이선스