od-nextjs-export

Convert accepted OpenDesign artifacts into structured Next.js App Router components and routes.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#NextJS #Frontend #design-to-code #HANDOFF #reAct #Export

One-click install

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

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill bridges the gap between design prototypes and production code, eliminating the manual effort required to translate visual artifacts into functional Next.js project structures.

Core Features & Use Cases

Component Generation: Automatically converts design elements into server-first React components.
Framework Integration: Adapts styling and assets to Next.js App Router conventions, including Tailwind CSS support.
Use Case: When a design system component is approved in OpenDesign, use this Skill to generate the corresponding Next.js file structure, complete with proper client/server boundary annotations.

Quick Start

Export the current design artifact to the app/components directory using Tailwind CSS for styling.

Frequently Asked Questions about od-nextjs-export

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

FAQPage Schema

How do I export a design to Next.js?▼

Use the od-nextjs-export skill to transform an accepted artifact into a Next.js App Router component. The skill handles file placement and applies framework-specific conventions like 'use client' directives where necessary.

Does this skill support Tailwind CSS?▼

Yes, the skill defaults to Tailwind CSS for styling. You can specify the styling preference during the export process to ensure the generated code matches your project's existing CSS architecture.

How are server and client components handled?▼

The skill follows a server-first approach by default. It only applies the 'use client' directive when the artifact requires interactivity, browser APIs, or client-side state management.

Can I choose the destination path for exported files?▼

Yes, you can provide a specific route path as an input parameter to control exactly where the generated files are placed within your Next.js project structure.