Tools · Design · The Reading Room

Hyperagent의 12개 스킬, 디자인 디시플린을 에이전트에 주입하다

Airtable의 Alex McDonnell이 6월 초 공개한 카탈로그는 코드 자동화가 아니라 디자인 규율을 강제하는 메타 스킬에 가깝다. Müller-Brockmann의 모듈러 그리드, Vignelli Canon, NYT 그래픽 디스크의 규범이 JSON 한 줄로 패키징되어 있다.

이 리포에는 README가 없다. LICENSE도 없다. 그저 12개의 JSON 파일이 평면적으로 놓여 있을 뿐이다. 하지만 그 안을 들여다보면, "에이전트가 디자인을 망치지 않도록 고전 디자인 시스템의 디시플린을 강제로 주입하라"는 일관된 의도가 드러난다.

스킬 12개 중 절반은 디자인 규율 — 스위스 모더니즘 그리드, Vignelli의 6서체 시스템, NYT 그래픽 디스크의 차트 규범 — 을 코드와 검증 하니스로 다시 짓는다. 나머지는 Veo 3.1과 ffmpeg로 30초 시즐 영상을 짜내거나, Hyperagent 위에서 가상 사업체를 자율 운영하는 워크플로우다.

수록 스킬
12
평면 JSON 번들
디자인 디시플린
5
전체의 42%
README · LICENSE
0
권리 유보 상태
authType
none
12 / 12 · 자격증명 미요구
Chapter 1 of 3 · Design Discipline

에이전트에 강제하는 디자인 규율

즉흥적 장식이 아니라 검증 가능한 그리드, 일관된 사이니지, 신문 그래픽 디스크의 차트 규범. 이 다섯 개 스킬은 "어떻게 보이게 할까"가 아니라 "어떤 규율을 따라야 하는가"를 명시한다.

Skill 01 · Editorial Grid

Müller-Brockmann Grid Systems

International Typographic Style의 진짜 모듈러 그리드 위에 에디토리얼·매거진 페이지를 빌드한다. CSS 변수 단일 정본, 인터랙티브 그리드 토글, 8px 베이스라인 락, 디스플레이 타입의 광학 정렬, 그리고 Puppeteer로 0px 부합을 검증하는 하니스를 포함한다.

grid swiss-modernism baseline verification

Note스크립트: grid_tokens.py · verify_grid.js

Skill 02 · Design System

Vignelli Canon Design System

Massimo Vignelli의 The Vignelli Canon에서 Intangibles(semantics·discipline·timelessness)와 Tangibles(그리드·6개 기본 서체·2단 타입 스케일)를 추출한다. Grandi Stazioni·NYC Subway의 사이니지 모듈 로직과 토큰 생성기까지 한 묶음.

typography wayfinding vignelli identity

Note스크립트: vignelli_system.py

Skill 03 · Data Visualization

nyt-data-viz

The New York Times Graphics와 The Upshot의 디시플린을 차트 생성에 강제한다. 팔레트·타이포그래피·주석·차트 타입 선택까지 NYT 규율로 묶인 6개 파이썬 모듈로 구성된다.

data-viz nyt tufte editorial

Notepalette · typography · chart_selector · annotate · render

Skill 04 · Brand Identity

Brand Book Generator

창업자의 앱을 위해 트렌드를 반영한 3개의 브랜드 컨셉을 NO-SCROLL 단일 페이지 bento 레이아웃으로 동시에 출력한다. 로고+태그라인·앱 스크린·OOH·머치·팔레트·타입·보이스를 한 화면에 staggered pop 애니메이션으로 조립.

branding founders webpage identity

Note템플릿: brandbook_template.html

Skill 05 · Out-of-Home

NYC Subway Campaign

브랜드 아이덴티티 → 표준 로고 자산 → MTA 전 노선 OOH 캠페인 목업을 일관된 이미지 생성으로 직렬화한다. 모든 image-gen 호출에 같은 로고 자산을 재사용해 브랜드 일관성을 유지하는 게 포인트.

advertising image-gen subway OOH

Note템플릿: campaign_page_template.html

Chapter 2 of 3 · Video & Sizzle

Veo 3.1과 ffmpeg로 직조한 영상 파이프라인

하루치 일정을 30초 트레일러로, 팟캐스트 오디오를 클레이 인형 뮤직비디오로. 네 개 스킬 모두 텍스트 → 정지 이미지 → image-to-video → ffmpeg 합성이라는 동일한 골격을 공유한다.

Skill 06 · Cinematic Trailer

briefing-trailer

Gmail·Calendar·Slack에서 가져온 실제 하루를 30초짜리 시네마틱 "coming soon" 무비 트레일러로 변환한다. 트레일러 자체가 그날의 브리핑이며, 포토리얼 푸티지 위에 텍스트 온 스크린으로 전개된다.

sizzle trailer veo ffmpeg

Noterender_text.py · build_trailer.py

Skill 07 · Explainer Video

Claymation Explainer

클레이메이션 스타일 설명·광고 영상 엔드투엔드 파이프라인. 스토리보드 → 캐릭터 레퍼런스 → 씬 스틸 → Veo image-to-video → TTS 보이스오버 → ffmpeg 패스트컷 어셈블 → 웹페이지 산출물까지.

claymation explainer voiceover veo

Note스크립트: assemble.py

Skill 08 · Podcast Clip

Claymation Podcast Clips

팟캐스트 오디오 + 화자 사진을 Aardman 스타일 클레이 인형 뮤직비디오 컷으로 변환. 2~3초마다 새 샷이 등장하며, 보이스오버와 동기화된 익스퍼트 그레이드 캡션이 번 인된다.

stop-motion podcast captions ffmpeg

Notemake_captions · build_graphics_overlay · assemble_video

Skill 09 · Launch Video

Veo + Hyperframes

Veo 3.1 비디오와 Hyperframes 모션 그래픽 오버레이를 합성하는 런치 비디오 파이프라인. 모든 샷이 텍스트 오버레이를 위한 1/3 콘트라스트 존을 예약하는 Text Zone Composition 원칙 위에 빌드된다.

launch-video motion-graphics gsap compositing

Note스크립트 미첨부 · 외부 참조 위주

Chapter 3 of 3 · Operations & Interactive

자율 오퍼레이터와 인터랙티브 견적

가상의 사업체를 에이전트가 운영하는 시뮬레이션, 작업 흐름을 칸반으로 박제하는 워크플로우, 고객 뒷마당 사진을 받아 즉석 견적 페이지를 띄우는 인터랙티브 제품.

Skill 10 · Simulation

Business Simulation Operator Method

가게·식당·SaaS·부티크·펀드·에이전시·NGO 어떤 사업체든 Hyperagent 위에서 자율 오퍼레이터 에이전트로 실시간 시뮬레이션하는 방법론. 캘린더 디시플린·계좌·일일 운영 결정까지 모두 에이전트가 처리한다.

simulation autonomous-agent methodology

Note스크립트: simclock.py

Skill 11 · Workflow

Airtable Kanban Work Tracker

Airtable 칸반 테이블을 작업 추적기로 사용한다. 한 레코드 = 한 스레드 모델로, 진행 중 상태를 ready-for-review로 플립하고 새 태스크 레코드를 요청 시 자동 생성한다.

airtable kanban task-tracking workflow

Note스크립트 미첨부 · 일반 워크플로우

Skill 12 · Interactive Page

Landscaping Design & Quote

고객 뒷마당 사진과 주소를 입력받아 깨끗한 before 컷, 다중 AI 디자인 컨셉, 추정 측정값, 스타일 전환 before/after 히어로, 라이브 재계산 견적이 묶인 인터랙티브 페이지를 생성한다.

home-services image-gen interactive-webpage estimating

Note스크립트 미첨부 · 인터랙티브 데모 중심