extract-design-system

Give Image2 UI Skill a screenshot, design mockup, or app reference and it guides Codex to produce a working clickable demo. Text, buttons, navigation, forms, icons, and interaction states are implemented in code, while complex photography, textures, illustrations, or product imagery are generated with image2. Those assets are saved inside the project and wired into the interface, so the result is a usable prototype rather than a disconnected set of generated images.

This collection combines Anthony Fu’s opinionated project and design conventions with skills generated from official Vue, Nuxt, Vite, Vitest, UnoCSS, pnpm, and related documentation. Vendored skills extend the set to adjacent tools, while git submodules help track upstream sources. It targets modern Vue/Vite work and remains a proof of concept that has not been fully tested in practice.

Add focused skills for Vue 3 Composition API and Options API work, Vue Router, Pinia, component and end-to-end testing, JSX, debugging, and adaptable composables. You can install the bundle or selected skills, and explicitly asking the agent to use a Vue skill improves activation reliability; the maintainer labels the project an early community experiment whose guidance may be incomplete or inaccurate.

This collection offers 75 skills for designers and builders working on web interfaces, animation, asset sourcing, and prompt creation from videos or existing pages. Its plain Markdown, folder-based format lets compatible agents load only the relevant SKILL.md workflow instead of depending on a single vendor-specific runtime.