Müller-Brockmann Grid Systems
International Typographic Style의 진짜 모듈러 그리드 위에 에디토리얼·매거진 페이지를 빌드한다. CSS 변수 단일 정본, 인터랙티브 그리드 토글, 8px 베이스라인 락, 디스플레이 타입의 광학 정렬, 그리고 Puppeteer로 0px 부합을 검증하는 하니스를 포함한다.
Note스크립트: grid_tokens.py · verify_grid.js
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 위에서 가상 사업체를 자율 운영하는 워크플로우다.
즉흥적 장식이 아니라 검증 가능한 그리드, 일관된 사이니지, 신문 그래픽 디스크의 차트 규범. 이 다섯 개 스킬은 "어떻게 보이게 할까"가 아니라 "어떤 규율을 따라야 하는가"를 명시한다.
International Typographic Style의 진짜 모듈러 그리드 위에 에디토리얼·매거진 페이지를 빌드한다. CSS 변수 단일 정본, 인터랙티브 그리드 토글, 8px 베이스라인 락, 디스플레이 타입의 광학 정렬, 그리고 Puppeteer로 0px 부합을 검증하는 하니스를 포함한다.
Note스크립트: grid_tokens.py · verify_grid.js
Massimo Vignelli의 The Vignelli Canon에서 Intangibles(semantics·discipline·timelessness)와 Tangibles(그리드·6개 기본 서체·2단 타입 스케일)를 추출한다. Grandi Stazioni·NYC Subway의 사이니지 모듈 로직과 토큰 생성기까지 한 묶음.
Note스크립트: vignelli_system.py
The New York Times Graphics와 The Upshot의 디시플린을 차트 생성에 강제한다. 팔레트·타이포그래피·주석·차트 타입 선택까지 NYT 규율로 묶인 6개 파이썬 모듈로 구성된다.
Notepalette · typography · chart_selector · annotate · render
창업자의 앱을 위해 트렌드를 반영한 3개의 브랜드 컨셉을 NO-SCROLL 단일 페이지 bento 레이아웃으로 동시에 출력한다. 로고+태그라인·앱 스크린·OOH·머치·팔레트·타입·보이스를 한 화면에 staggered pop 애니메이션으로 조립.
Note템플릿: brandbook_template.html
브랜드 아이덴티티 → 표준 로고 자산 → MTA 전 노선 OOH 캠페인 목업을 일관된 이미지 생성으로 직렬화한다. 모든 image-gen 호출에 같은 로고 자산을 재사용해 브랜드 일관성을 유지하는 게 포인트.
Note템플릿: campaign_page_template.html
하루치 일정을 30초 트레일러로, 팟캐스트 오디오를 클레이 인형 뮤직비디오로. 네 개 스킬 모두 텍스트 → 정지 이미지 → image-to-video → ffmpeg 합성이라는 동일한 골격을 공유한다.
Gmail·Calendar·Slack에서 가져온 실제 하루를 30초짜리 시네마틱 "coming soon" 무비 트레일러로 변환한다. 트레일러 자체가 그날의 브리핑이며, 포토리얼 푸티지 위에 텍스트 온 스크린으로 전개된다.
Noterender_text.py · build_trailer.py
클레이메이션 스타일 설명·광고 영상 엔드투엔드 파이프라인. 스토리보드 → 캐릭터 레퍼런스 → 씬 스틸 → Veo image-to-video → TTS 보이스오버 → ffmpeg 패스트컷 어셈블 → 웹페이지 산출물까지.
Note스크립트: assemble.py
팟캐스트 오디오 + 화자 사진을 Aardman 스타일 클레이 인형 뮤직비디오 컷으로 변환. 2~3초마다 새 샷이 등장하며, 보이스오버와 동기화된 익스퍼트 그레이드 캡션이 번 인된다.
Notemake_captions · build_graphics_overlay · assemble_video
Veo 3.1 비디오와 Hyperframes 모션 그래픽 오버레이를 합성하는 런치 비디오 파이프라인. 모든 샷이 텍스트 오버레이를 위한 1/3 콘트라스트 존을 예약하는 Text Zone Composition 원칙 위에 빌드된다.
Note스크립트 미첨부 · 외부 참조 위주
가상의 사업체를 에이전트가 운영하는 시뮬레이션, 작업 흐름을 칸반으로 박제하는 워크플로우, 고객 뒷마당 사진을 받아 즉석 견적 페이지를 띄우는 인터랙티브 제품.
가게·식당·SaaS·부티크·펀드·에이전시·NGO 어떤 사업체든 Hyperagent 위에서 자율 오퍼레이터 에이전트로 실시간 시뮬레이션하는 방법론. 캘린더 디시플린·계좌·일일 운영 결정까지 모두 에이전트가 처리한다.
Note스크립트: simclock.py
Airtable 칸반 테이블을 작업 추적기로 사용한다. 한 레코드 = 한 스레드 모델로, 진행 중 상태를 ready-for-review로 플립하고 새 태스크 레코드를 요청 시 자동 생성한다.
Note스크립트 미첨부 · 일반 워크플로우
고객 뒷마당 사진과 주소를 입력받아 깨끗한 before 컷, 다중 AI 디자인 컨셉, 추정 측정값, 스타일 전환 before/after 히어로, 라이브 재계산 견적이 묶인 인터랙티브 페이지를 생성한다.
Note스크립트 미첨부 · 인터랙티브 데모 중심