port

Port existing codebases into OpenDesign projects as inline HTML frames per screen.

24|5|Updated Apr 20, 2026

Search Tags:#automation #codebase #port #screens #frames #open-design

Ready to run

npx skills add https://github.com/basta/OpenDesign --skill port-basta

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: port
Source: https://github.com/basta/OpenDesign/tree/main/.claude/skills/port
Command: npx skills add https://github.com/basta/OpenDesign --skill port-basta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Porting legacy or external apps into OpenDesign as one frame per screen enables rapid redesign without source changes. It coordinates an agent-driven workflow to analyze the codebase and produce frame-ready HTML snapshots for each screen.

Core Features & Use Cases

Analyze a codebase and map screens to OpenDesign frames.
Generate an inline HTML frame per screen suitable for redesign.
Use with --append to extend an existing project or --redesign to rewrite DESIGN.md via a frontend-design skill.

Quick Start

Provide the source path and optional project name to create a new OpenDesign project with one frame per screen.

Frequently Asked Questions about port

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

FAQPage Schema

How do I convert an existing codebase into OpenDesign frames for UI redesign?▼

You can port an existing app by providing a source path and optional project name to initialize a new OpenDesign project. The Skill analyzes the codebase and generates one frame per screen as inline HTML snapshots.

Can I append new screens to an existing OpenDesign project?▼

Yes, you can append new screens to an existing OpenDesign project by using the --append argument. This extends your current project with additional HTML frames generated from the analyzed source codebase.

What is the best way to redesign legacy app UI without changing the source code?▼

Redesigning without source changes involves porting the app into OpenDesign as inline HTML frames. Using the --redesign argument triggers a rewrite of DESIGN.md via a frontend-design skill for UI iteration.

Does the OpenDesign porting process require specific dependencies?▼

No specific dependencies are required for the porting process. The Skill handles argument parsing, project initialization, source analysis, and frame generation via the OpenDesign API internally without external dependencies.

How does codebase analysis map application screens to OpenDesign frames?▼

Codebase analysis maps screens to OpenDesign frames by identifying individual application screens within the source code and generating a corresponding inline HTML snapshot for each one to enable visual redesign.