跳到正文
DEV Community· Shouvik Palit·· 2 小時前AI 評分61

living-canvas Claude Skill 為 3 個知名程式碼庫的 README 製作動畫

I pointed my Claude skill at 3 famous repos, and it animated their READMEs 🎨

AI 導讀

作者建立的 Claude Skill living-canvas 讀取程式碼庫的 README,提取核心概念並製作由左至右呈現的短篇動畫,已用於 3 個項目。每個動畫是約 8 KB 的自包含 SVG,不使用 JavaScript、外部字型或圖片,並會在停用動畫時同時顯示全部三個階段。

正文

A README has about two seconds to tell a stranger what a project does. Most banners spend those two seconds on a logo and a gradient. 🫠

I built living-canvas to do better: it's a Claude skill that reads a repo's README, finds the one idea at its heart, and turns it into a short animated story, left to right: the problem → what the project does → the result.

To see if it holds up, I pointed it at three projects I love. 👇

🐴 Ponytail: the lazy senior dev

Ponytail by Dietrich Gebert is a skill that makes your AI coding agent think like the laziest senior dev in the room, so it writes less code.

The story comes straight from Ponytail's README. You ask for a date picker. Without Ponytail, the agent builds a whole calendar by hand: 335 lines. Ponytail first climbs its ladder of checks (does this need to exist? is it already in the codebase? the standard library? a native platform feature?) and finds that every browser already has a date picker. Result: 10 lines. 🪶

🦙 Ollama: open models on your machine

Ollama lets you run open models locally, with complete privacy.

On the left, every prompt (and your data) goes to someone else's cloud, with an API key and a meter running. In the middle, one command: ollama run gemma4. On the right, the model answers on your own machine at localhost:11434. No key, no cloud, and it works offline. 🔒

Ollama

⚡ uv: one tool, 10–100x faster

uv by Astral is an extremely fast Python package and project manager, written in Rust.

Six tools for one Python project (pip, pip-tools, pipx, poetry, pyenv, virtualenv) become one binary. uv add ruff resolves and installs in a blink, and the speed bars show uv's 10–100x lead over pip. 🏎️

uv

🧩 How it works

Every banner follows the same rules:

  • 🖼️ One self-contained SVG, around 8 KB each for these three
  • 🚫 No JavaScript, no external fonts or images, so it renders right inside a GitHub README
  • 🏷️ Every stage is labeled in plain words, so a single screenshot tells the whole story
  • 📖 Real numbers from the README, never invented ones
  • ♿ Respects reduced motion: viewers who turn animation off see all three stages at once

🚀 Try it on your repo

In Claude Code:

git clone https://github.com/shouvik12/living-canvas ~/.claude/skills/living-canvas

Then ask:

/living-canvas https://github.com/you/your-repo

Commit the SVG it gives you and add one line to the top of your README:

<p align="center"><img src="assets/your-banner.svg" alt="Your project" width="100%"></p>



🔗 Links

If you maintain one of these and want the SVG for your README, it's yours. Just say the word. 🙌

來源:DEV Community · dev.to