에이전트 스킬
4fc7bfdbd5ec3fa2d43ce7a6433de60976a5e4b1의 문서·설정·핵심 스크립트를 읽은 결과이며 제작 속도나 디자인 품질을 실측한 결과는 아닙니다.디자인 제작 순서를 에이전트 지시문과 실행 도구로 나눈 저장소입니다. SKILL.md는 작업 종류별 참고 문서를 고르고, 방향 선택·자산 확인·검수의 순서를 정의합니다. scripts/는 브라우저 캡처, 가독성 검사, PDF·PPTX·영상 변환을 수행합니다.
입력은 디자인 요청과 기존 브랜드·제품 자료이고, 출력은 HTML을 중심으로 한 프로토타입·발표자료·영상입니다. 운영용 백엔드 앱과 SEO 사이트는 현재 SKILL.md의 적용 범위에서 제외합니다. 지시문을 읽는 호스트가 실제 작업을 수행하므로 문서만 설치했다고 모든 절차가 코드로 강제되지는 않습니다.
이번 선정은 2026-10-27 TrendShift Daily 5위입니다. 순위는 모멘텀 순위이며 별 수나 사용자 수를 뜻하지 않습니다. 3.0의 변화는 결과물을 많이 만드는 것보다 시안이 서로 닮는 문제를 제작 과정에서 확인하려는 데 있습니다.
| 이전 설명 | 3.0에서 확인한 변화 |
|---|---|
| 모호한 요청에서 세 시안을 만드는 어드바이저 | 새 시각 디자인 전반에 여섯 후보 → 세 실제 초안의 방향 선택 절차 적용. 선택 후 반복 수정과 기계적 변환은 예외 |
| 웹·발표자료 중심 스타일 목록 | 84종 목록과 App·동아시아 영역, 스타일별 견본 |
| 참조 작품 이름만 지정 | 실제 참조 화면을 캡처하고 가져올 구성 규칙을 적는 참조 보드 |
| 작업마다 독립적인 검수 | 최근 프로젝트의 색·글꼴·배치 특징을 로컬 원장과 비교 |
README의 제작 시간·사례 품질은 제작자의 소개입니다. 이 분석은 독립 성능 평가나 다른 상용 디자인 제품과의 기능 동등성 검증을 하지 않았습니다.
| 계층 | 확인한 구성 | 역할 |
|---|---|---|
| 작업 규칙 | SKILL.md, references/modules/ | 웹·deck·정보 그림·모션별 절차와 납품 조건 |
| 시각 부품 | assets/*.jsx, deck_index.html, 스타일 견본 | 기기 프레임·타임라인·발표 외형 재사용 |
| Node 도구 | playwright ^1.59.1, pptxgenjs ^4.0.1, pdf-lib ^1.17.1, sharp ^0.34.5 | package.json의 직접 의존성. npm 버전 범위이며 설치 버전 고정값이 아님 |
| Python 도구 | design_lint.py, ref_board.py, learn.py | 실제 렌더 검사·참조 캡처·로컬 경험 관리 |
| 선택 외부 도구 | FFmpeg·클라우드 음성/영상 기능 | 필요한 출력에만 사용. 전체 도구가 npm 의존성 네 개로 끝나지는 않음 |
Python의 디자인 검사는 Python용 Playwright와 Pillow·Chromium 준비가 따로 필요합니다. npm Playwright를 설치한 것과 같은 조건이 아닙니다. 서버·DB를 배포하는 구조는 아니지만 웹 자산·외부 글꼴·참조 URL을 이용하면 네트워크가 필요할 수 있습니다.
SKILL.md는 브랜드 명세·방향 선택·긴 모션의 구성안을 파일로 남기도록 정의합니다. 일부 긴 영상에는 별도 gate hook이 있지만, 모든 요청의 사용자 선택을 design_lint.py가 검증하는 구조는 아닙니다. 서브에이전트가 없는 호스트에서는 시안을 순서대로 만드는 축소 경로도 문서에 있습니다.
design_lint.py는 브라우저에서 글자 크기·대비·깨진 이미지 등을 수집하고, 캡처의 색과 배치를 외관 지문으로 만듭니다. compare는 후보끼리, ledger check는 이전 결과와 비교합니다. 예쁜지에 대한 점수와 같지 않으며, 계산할 수 없는 이미지·그라데이션 배경도 있어 실제 눈 검토가 남습니다.
html2pptx.js는 HTML을 브라우저로 연 뒤 계산된 스타일을 추출합니다. 본문 크기를 viewport에 반영하고, 출력 페이지의 넘침·프레젠테이션 크기 불일치를 검사합니다. 편집 가능한 객체를 만들지만 임의의 CSS가 모두 같은 모양으로 변환된다고 보장하지는 않습니다. macOS에서는 설치된 Chrome 채널을 지정하는 코드도 확인해야 합니다.
참고 자료는 현재 모듈에 필요한 것부터 읽습니다. ~/.huashu-design/의 로컬 기록은 저장소에 포함된 공용 견본과 다릅니다. HUASHU_DESIGN_HOME으로 별도 경로를 선택할 수 있습니다.
디자인 검사에서 자동화하기 좋은 것은 글자 크기·깨진 자산·대비처럼 비교할 수 있는 사실입니다. 외관 원장은 최근 결과가 반복되는지 알려 주지만 최종 선택은 사용자에게 남깁니다. 테스트 통과를 취향 승인으로 바꾸지 않는 경계를 배울 수 있습니다.
ref_board.py는 URL이나 로컬 이미지를 캡처합니다. 열리지 않는 URL과 거의 단색으로 나온 캡처를 구분하고, 성공한 화면들을 보드로 묶습니다. WebGL·지연 로딩 화면은 캡처가 비어 보일 수 있어 브라우저 요청 성공만으로 참조를 봤다고 할 수 없습니다.
# design_lint.py의 원장 경로 결정식 (필요한 import를 포함한 발췌)
import os
from pathlib import Path
ledger = Path(os.environ.get('HUASHU_DESIGN_HOME') or Path.home() / '.huashu-design') / 'ledger.jsonl'이 코드는 경로를 결정할 뿐 파일을 만들지 않습니다. 실제 추가 기록과 읽기는 별도 함수에서 이뤄집니다. 기본 사용자 경로와 명시한 학습 환경을 나누는 방식을 확인할 수 있습니다.
learn.py는 선호와 경험을 기록하고, design_lint.py는 결과의 외관을 JSONL에 추가합니다. 사용자별 선호가 모든 주제에 무조건 적용되지 않도록 기록의 주제·근거를 같이 다루는 구조를 살펴보세요. 이 루틴에서는 해당 스크립트를 실행하거나 선호 기록을 만들지 않았습니다.
| 작업 | 준비 조건 |
|---|---|
| 규칙 사용 | Markdown 스킬을 읽고 파일·명령·브라우저를 다룰 수 있는 에이전트 |
| Node 내보내기 | package.json의 네 라이브러리와 브라우저. 이 파일에는 Node 최소 버전 선언이 없음 |
| Python 렌더 검사 | Python용 Playwright·Pillow·Chromium. 도구별 import와 준비 안내 확인 |
| 영상·음성 | 출력 경로에 따라 FFmpeg와 선택 서비스 자격 증명 |
GPU·RAM·디스크의 공통 최소값은 확인한 설정에 없습니다. 비용도 에이전트 구독·호출 방식·선택 서비스에 따라 달라집니다. “API 토큰만 들고 정확히 세 배” 같은 고정 비용 설명은 할 수 없습니다. 로컬 내보내기와 선택 클라우드 기능, 참조 사이트·자산 접근을 구분해 사용하세요.
한 주씩 따라가는 계획.
| 주차 | 주제 | 학습 자료 |
|---|---|---|
| 1주차 | Agent Skill 개념 + 설치·첫 산출물 | README · 실습 1~2 · skills.sh 문서 |
| 2주차 | SKILL.md 정독 — 프롬프트 아키텍처 분석 | SKILL.md · references/workflow.md · brand-asset-protocol.md |
| 3주차 | 내보내기 파이프라인 — Playwright·ffmpeg | scripts/ 정독 · 실습 3~4 · Playwright 공식 문서 |
| 4주차 | 나만의 스킬 제작 + 반-slop 디자인 원칙 내재화 | 실습 5 · references/design-styles.md · content-guidelines.md |
| 용어 | 이 저장소에서의 의미 |
|---|---|
| 스킬 | 호스트 에이전트가 읽는 규칙·참고 자료·도구 묶음 |
| 방향 선택 | 세 접근에서 만든 여섯 후보 중 세 실제 초안을 보여 주고 선택받는 과정 |
| 참조 보드 | 실제로 연 작품의 캡처와 가져올 구성 규칙 |
| 외관 지문·원장 | 색·글꼴·배치 특성과 이전 프로젝트 기록. 품질 보증 점수가 아님 |
| Gate 파일 | 브랜드 명세·선택·구성안 등 해당 단계의 기록 |
| 점진적 공개 | 핵심 규칙에서 필요한 작업 모듈로 이동해 참고 자료를 선택하는 방식 |
| DOM → PPTX | 브라우저의 요소·스타일을 발표 객체로 옮기는 변환 |
2026-10-27 재검토 소스: 4fc7bfdbd5ec3fa2d43ce7a6433de60976a5e4b1. 설치·외부 모델 호출·실행 없이 아래 파일을 대조했습니다.
README.en.md · SKILL.md · package.json · scripts/design_lint.py · scripts/ref_board.py · scripts/learn.py · scripts/html2pptx.js