CC

changroro/code-video

Developer tools

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기

66 stars 품질 65 트렌드 22MIT

에이전트 기술 : 주제를 연구하고 손으로 그리기 + 8 비트 프로모션 비디오 (MP4)

개요

Claude Opus 5.5 및 Claude Sonnet 5.5는 코드에 그려진 비디오와 내 피드를 채웠으므로 둘 다에 대한 기술을 위조했습니다. 이 소개는 그 기술로 만들어졌습니다. 모든 프레임은 코드에 그려집니다. 45초 MP4 시청 code-video는 주제, 디자인, 그리고 MP4로 포맷을 완전히 코드로 변환합니다. Claude Opus 5.5 및 Claude Sonnet 5.5와 함께 작동하도록 설계되었습니다. 주제를 연구하고 코드를 완전히 그려 짧은 비디오로 전환하는 에이전트 기술. 주제와 스타일 (아래의 사전 세트 중 하나, 어떤 사이트 DESIGN.md, 또는 자신의 단어에 설명 된 모습) 및 MP4를 얻을. 비디오 세대 모델 및 재고 부족 없음: 대리인은 장면을 쓰고, 프레임에 의해 프레임을 렌더링하고, 파일을 손으로. 1. 각 구조는 HTML 화포에 그려진 시간의 기능, headless 크롬에 의해 붙잡고, ffmpeg에 의해 암호로 합니다. 음악과 음향 효과는 코드에서도 합성되므로, 동일한 입력은 항상 동일한 비디오를 렌더링합니다. 2. 명세.

개요(AI 번역)

한국어 |

Claude Opus 5.5 및 Claude Sonnet 5.5는 코드에 그려진 비디오와 내 피드를 채웠으므로 둘 다에 대한 기술을 위조했습니다. 이 소개는 그 기술로 만들어졌습니다. 모든 프레임은 코드에 그려집니다. 45초 MP4 시청

두 모델에 대 한 위조

code-video는 주제, 디자인, 그리고 MP4로 포맷을 완전히 코드로 변환합니다. Claude Opus 5.5 및 Claude Sonnet 5.5와 함께 작동하도록 설계되었습니다.

주제를 연구하고 코드를 완전히 그려 짧은 비디오로 전환하는 에이전트 기술. 주제와 스타일 (아래의 사전 세트 중 하나, 어떤 사이트 DESIGN.md, 또는 자신의 단어에 설명 된 모습) 및 MP4를 얻을. 비디오 세대 모델 및 재고 부족 없음: 대리인은 장면을 쓰고, 프레임에 의해 프레임을 렌더링하고, 파일을 손으로.

어떻게 작동합니까?

  1. ** 모든 코드입니다.** 각 프레임은 HTML 캔버스에 그려진 시간의 기능이며, 헤드리스 크롬에 의해 캡처되었으며, ffmpeg에 의해 인코딩됩니다. 음악과 음향 효과는 코드에서도 합성되므로, 동일한 입력은 항상 동일한 비디오를 렌더링합니다.
  2. ** 첫 번째 검색.** 에이전트는 소스와 함께 10 가지 사실을 수집하고 브랜드의 팔레트와 글꼴을 취합니다. 스크린에 각 수에는 근원이 있습니다.
  3. 명세.

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.

README

원문 README의 일부입니다. 원문 보기.

code-video

English | 한국어

Claude Opus 5.5 and Claude Sonnet 5.5 filled my feed with videos drawn in code, so I forged a skill for both. This intro was made with that skill: every frame is drawn in code. Watch the 45-second MP4.

Forged for both models

code-video turns a topic, a design, and a format into an MP4 drawn entirely in code. It is designed to work with both Claude Opus 5.5 and Claude Sonnet 5.5.

An agent skill that researches a topic and turns it into a short video drawn entirely in code. Give it a topic and a style (one of the presets below, any site’s DESIGN.md, or a look described in your own words) and get an MP4. No video-generation model and no stock footage: the agent writes the scenes, renders them frame by frame, and hands you the file.

How it works

  1. Everything is code. Each frame is a function of time drawn on an HTML canvas, captured by headless Chrome, and encoded by ffmpeg. Music and sound effects are synthesized in code too, so the same input always renders the same video.
  2. Research first. The agent collects about ten facts with sources and takes the palette and fonts from the brand. Every number on screen has a source.
  3. Design, research, format. You give the look (a style, a brand preset, any site’s DESIGN.md, or any look in your own words), the topic, and the length, frame, and language. The agent writes the story that fits and shows you a short plan before it builds.
  4. Few rules, on purpose. The skill hands the agent the look and one hard rule (sourced numbers) and leaves the story to it. In our A/B test, cutting the process rules made a video 23–51% cheaper with no visible drop in quality.
  5. Fast enough to iterate. Frames render in parallel headless Chrome pages and are captured as JPEG: a 45-second 1080p video renders in about a minute on a 10-core laptop, and a whole run from research to MP4 took 4–13 minutes in our tests.

A few seconds from an example in each style. Every example is a video about this skill, made by a fresh agent with only this skill; the full MP4s are in the latest release. New styles are added over time, and pull requests for new ones are welcome (see Contributing).

The brand-style presets borrow only the public design language of each site; this project is not affiliated with those companies.

Hand-drawn · @nahiddotai

GitHub에서 전체 README 보기

추천 도구

다른 키워드를 입력하거나 필터를 제거해 보세요.

설치

npx skillfish add changroro/code-video
MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →