od-vue-export

Convert accepted OpenDesign artifacts into Vue 3 single-file components with structured styling and logic.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#Vue #vuejs #Frontend #design-to-code #HANDOFF #Export

One-click install

npx skills add https://github.com/nexu-io/open-design --skill od-vue-export

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: od-vue-export
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/scenarios/od-vue-export
Command: npx skills add https://github.com/nexu-io/open-design --skill od-vue-export

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the manual effort required to translate design artifacts into functional frontend code, ensuring consistency between design systems and Vue 3 implementations.

Core Features & Use Cases

Component Generation: Automatically creates Vue 3 single-file components from design artifacts.
Styling Integration: Supports Tailwind CSS, scoped CSS, or plain CSS based on project requirements.
Use Case: A designer hands off a landing page hero section; use this Skill to generate the corresponding Vue component with proper props, emits, and accessibility semantics ready for immediate integration.

Quick Start

Export the current artifact as a Vue 3 component named LandingHero using Tailwind CSS for styling.

Frequently Asked Questions about od-vue-export

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I export an OpenDesign artifact to Vue?▼

Use the od-vue-export skill to convert your accepted artifact into a Vue 3 single-file component. Specify the component name and preferred styling method to generate the template, script, and style blocks.

Does this plugin support Tailwind CSS?▼

Yes, the plugin supports Tailwind CSS as a primary styling option. It also provides alternatives like scoped CSS or plain CSS if your target project does not utilize Tailwind.

Can I use this for complex state management?▼

The plugin is designed for component-level handoff. It uses the Composition API for necessary state and lifecycle hooks but keeps props and emits minimal to avoid unnecessary complexity in static content.

How does the plugin handle accessibility?▼

The plugin preserves accessibility semantics from the design artifact, including headings, buttons, links, labels, focus states, and alt text, ensuring the generated component meets basic web standards.