BuilderIO/agent-native-product-visuals

Última atividade de origem registrada: 28 de outubro de 2026 às 17:38

Catálogo do SkillsMP atualizado: 5 de novembro de 2026 às 19:57

skills coletadas: 3

Estrelas no GitHub: 0
Forks no GitHub: 0

Instalar com um assistente de IA

Copie este prompt para o assistente de IA que você usa.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/BuilderIO/agent-native-product-visuals.

README do repositório

Arquivo de origem do README: README.md

Ler o README original

Expandir README completo

# Agent-Native Product Visuals Product screenshots and short product videos of the open-source [agent-native](https://github.com/BuilderIO/agent-native) apps (Clips, Slides, Analytics, Design, Plan, …), made by talking to an AI agent. Every screen is rebuilt in code from the real app, so it looks exactly like the product, in **light and dark**, at any size, with invented example data. ## Get started (no coding needed) 1. Open **Claude Code** (desktop app or terminal) in any folder. 2. Paste this and send it: > https://github.com/BuilderIO/agent-native-product-visuals — set this up for me. The agent downloads this repo to `~/Documents/agent-native-product-visuals`, installs what it needs, downloads the agent-native app code, and makes a test screenshot. Next time, open Claude Code **in that folder** and just ask. ## What to ask for - *"A screenshot of the Analytics app showing a revenue dashboard, light and dark."* - *"A square screenshot of Slides generating a pitch deck, for LinkedIn."* - *"A close-up of the Clips share menu for a blog post."* - *"A 10-second video of Clips turning a meeting into notes."* Screenshots land in `out/screenshots/<name>/` (PNG, 2x resolution). Videos land in `out/videos/<name>/` (MP4). The agent opens the folder for you. The agent-native app code refreshes itself automatically every two days, so new screenshots match the current product. ## Good to know - The agent follows a written quality bar, [docs/taste.md](docs/taste.md). If you notice something it should always or never do, tell it; it will pass the suggestion on. - Nothing is shared until you say so. When you're happy with a screenshot or video, the agent can save it to the shared library (a pull request). - Motion follows [Emil Kowalski's design-engineering skills](https://github.com/emilkowalski/skills), included in this repo. ## For developers ```bash npm run setup # packages, agent-native code (.agent-native/), render browser npm run sync # refresh .agent-native/ if older than 48h (-- --force) npm run shot -- <slug> # render src/screenshots/<slug>/ → out/screenshots/<slug>/ npm run video -- <slug> [--mp4] # review frames or the MP4 for src/product-videos/<slug>/ npm run studio # Remotion Studio ``` Requires Node.js 22+. Agent rules: [AGENTS.md](AGENTS.md). App map: [docs/apps.md](docs/apps.md).

Carregando o README do repositório…

Skills neste repositório

classificação pendente

skill

ocupação

descrição

atualizado

product-screenshot

sem classificação

Make a product screenshot (still, product image, hero image, "picture of the app") of any agent-native app (Clips, Slides, Analytics, Design, Plan, Content, Chat, Mail, Calendar, Forms, CRM, Tasks…) in light and dark mode, built in code from the real app's…

Idioma do texto original: inglês

2026-10-28

product-video

sem classificação

Make a short product video (launch video, feature video, demo clip, animated product visual, social video) of any agent-native app built in code with Remotion from the real app's source, with motion held to Emil Kowalski's animation standards. Use when…

Idioma do texto original: inglês

2026-10-28

setup

sem classificação

Set up Product Visuals on this computer, or check that it's ready. Clones the repo if the user only pasted its link, installs packages, downloads the agent-native code and the render browser. Use when the user pastes the repo link and says "set this up", "set…

Idioma do texto original: inglês

2026-10-28

Mostrando 3 de 3 skills coletadas.