대안 찾기
← 스킬 목록

수업자료·발표

Huashu Design

수업용 ⭐ 25,022 MIT

HTML 원생 디자인 스킬로 고품질 프로토타입, 슬라이드, 애니메이션을 제작합니다. 20가지 디자인 철학과 MP4 내보내기 지원.

무엇을 하나요

"문장 한 줄을 입력하면, 납품 가능한 디자인이 돌아온다." 슬라이드·앱 프로토타입·제품 출시 영상·인포그래픽을 3~30분 만에 만들어 주는 디자인 스킬입니다. 60가지 HTML 기본 스타일을 갖추고 있어 결과물이 안정적으로 예쁩니다.

움직이는 결과물 — 영상으로 먼저 보기

▲ 모션 디자인 데모입니다(소리 없음, 약 10초). 원본 화면의 제목을 「시간축 = 코드」로 옮긴 뒤 다시 녹화했습니다. 원본은 공식 저장소 demos/ 폴더에 있습니다(MIT).

공식 예시를 직접 만져보기

▲ 공식 예시(MIT)의 화면 글을 한국어로 옮겼습니다. 프로젝트 이름 huashu-design 은 그대로입니다. 스킬이 한 문장 지시로 만들어 낸 결과물의 예시입니다.

뭘 만들어 주나요

발표·수업용편집 가능한 PPT·슬라이드
안내·설명용인포그래픽·포스터
소개·시연용제품·활동 출시 영상
체험형클릭되는 앱 프로토타입

학교에서의 활용 상상

  • 개학·수업 소개 영상 — "이번 학기 과학 수습 소개 영상" 한 줄로 초안을 만들고, 교사가 다듬기.
  • 수업 지도안 시각화 — 단원 요약을 인포그래픽 한 장으로. 인쇄물 품질로 나옵니다.
  • 학생 활동 프로토타입 — 진로 수업에서 "우리 반 앱을 만든다면" 체험용 화면으로.
솔직한 한계. 저장소의 기본 안내는 중국어입니다. 이 페이지의 예시 화면은 한국어로 옮겨 두었습니다. 영문 안내(demos/*-en.html, README.en.md)도 있습니다. 결과물 품질을 높이려면 학교 로고·색표를 먼저 주는 것이 효과적입니다. AI 에이전트가 필요한 교사 제작 도구이며, 좋은 결과물을 얻으려면 지시문을 몇 번 다듬어야 합니다.

예시 체험

중3 과학 — 전류와 전압의 관계 요약 정보그래픽 만들기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기
선생님이 입력한 내용

중학교 3학년 과학 '전기와 자기' 단원에서 전류와 전압의 관계(옴의 법칙)를 배운 뒤, 수업 마무리 5분에 화면에 띄워 함께 정리하고 출력해 나눠 줄 한 장짜리 요약 정보그래픽이 필요한 상황이다.

중학교 3학년 과학 '전류와 전압의 관계' 수업을 마무리할 때 화면에 띄우고 나눠 줄 한 장짜리 요약 정보그래픽을 만들어 주세요. 세로 한 장으로, 전류·전압·저항의 뜻과 단위, 옴의 법칙 공식, 전압이 커질수록 전류가 어떻게 달라지는지 보여 주는 예시 그래프와 예시 측정 표를 넣어 주세요. 저항이 일정할 때 전압과 전류가 정비례한다는 점을 강조하고, 숫자는 실제 측정값이 아니라 수업용 예시 값이라고 표시해 주세요. 모든 글은 한국어로 써 주세요.
나온 결과 스위스 그리드 스타일의 세로 한 장 정보그래픽. 맨 위 '중학교 3학년 과학 · Ⅵ 전기와 자기' 표제, 큰 제목 '전류와 전압은 어떤 관계일까?', 옴의 법칙 공식 '전압(V) = 전류(A) × 저항(Ω)', 전류·전압·저항을 설명하는 세 칸, '예시 측정 표'(1.0/2.0/3.0 V에 0.20/0.40/0.60 A, V ÷ I = 5.0 Ω), 원점을 지나는 빨간 직선 위에 세 점이 찍힌 '전류–전압 그래프', 검은 띠 안의 결론 문장, 아래쪽 수업용 예시 값 안내가 보인다.
옴의 법칙 전압(V) = 전류(A) × 저항(Ω) 예시 측정 표: 1.0 V → 0.20 A, 2.0 V → 0.40 A, 3.0 V → 0.60 A (V ÷ I = 5.0 Ω) 오늘의 결론: 저항이 일정하면 전압이 2배, 3배가 될 때 전류도 2배, 3배가 된다 — 전압과 전류는 정비례한다.

직접 해 보기 — 3단계

  1. Claude Code 같은 AI 에이전트에 저장소 안내대로 이 스킬을 설치한다.
  2. 학년·단원·꼭 넣을 내용과 '수업용 예시 값' 표시를 적은 문장을 붙여 넣는다. 위 문장을 바꿔 써도 된다.
  3. 만들어진 HTML 파일을 브라우저로 열어 전류·전압·저항 설명과 공식, 그래프의 점 위치와 축 단위를 확인하고 실제 수업에 맞게 고친다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (huashu-design) · 확인일 2026-10-16. 그림은 스킬이 만든 HTML 정보그래픽을 헤드리스 브라우저로 그대로 캡처한 것이다(내용은 고치지 않았다). 이 스킬은 원래 새 작업마다 세 가지 디자인 방향을 먼저 만들어 보여 주고 하나를 고르게 하는 절차를 두지만, 여기서는 고르는 사람이 없어 스킬의 스타일 뽑기(초 단위 난수)로 나온 '스위스 그리드' 한 방향만 만들어 보여 주었다. 이 스킬의 MP4 영상 내보내기와 편집 가능한 PPTX 내보내기는 이 환경에서 돌리지 않아 결과물은 HTML 한 장이다. 표와 그래프에 있는 모든 숫자는 실제 측정값이 아니라 설명을 위해 꾸민 수업용 예시 값이며, 저항 5 Ω도 계산하기 쉽게 잡은 값이다. 실제 수업에서는 전지의 내부 저항과 도선 저항 때문에 값이 조금씩 달라질 수 있으므로, 표·그래프·단위 표기를 학교 실험 조건에 맞게 다시 확인해야 한다.

써 보려면

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

출처

확인일2026-10-16
용도 구분수업용
GitHub 스타25,022

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 소개 글과 화면 예시는 발굴·재구성 과정에서 작성했습니다. 정보 정정 요청

라이선스

라이선스MIT
설치필요
API 키이 기록에는 불필요

변경 이력 (최근 3건)

daily-verifier가 매일 GitHub/GitLab API로 재확인한 사실 변경 기록입니다. 확인 근거는 변경 이력 페이지에 있습니다.

  1. 2026-10-16별 수25,022
  2. 2026-10-15별 수24,957
  3. 2026-10-14별 수24,946