skills.rest
basta
bastaCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/basta/OpenDesign --skill port-basta
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
bastabasta
24

frame

Create or update HTML frames on the OpenDesign canvas from project docs.

Community
Intermediate
bastabasta
24

suggest

Generate three design token variants for an OpenDesign project.

Community
Intermediate
Skro11XSkro11X

aif

Analyze project tech stacks, install skills, and configure MCP servers.

Community
Advanced
qapdex-makerqapdex-maker

stitch::manage-design-system

Manage Stitch design systems by retrieving assets and applying them to screens.

Community
Advanced