BuilderIO/agent-native-product-visuals

Letzte erfasste Quellaktivität: 28. Oktober 2026 um 17:38

SkillsMP-Katalog aktualisiert: 5. November 2026 um 19:57

gesammelte Skills: 3

GitHub-Stars: 0
GitHub-Forks: 0

Mit einem KI-Assistenten installieren

Diesen Prompt kopieren und in den verwendeten KI-Assistenten einfügen.

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

README des Repositorys

README-Quelldatei: README.md

README-Quelldatei lesen

Vollständige README anzeigen

# 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).

README des Repositorys wird geladen…

Skills in diesem Repository

Klassifizierung ausstehend

Skill

Beruf

Beschreibung

Aktualisiert

product-screenshot

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-28

product-video

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-28

setup

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-28

Es werden 3 von 3 gesammelten Skills angezeigt.