Bring a design from Claude, ChatGPT or another tool

You built something in Claude, ChatGPT, v0, Lovable, Bolt, Webflow, Framer or a plain HTML file, and now you want to keep working on it in Plyed. You can’t just drop the files in: Plyed edits Astro projects that follow a few conventions, and a design from another tool doesn’t. A coding agent can do that conversion for you with the Plyed port skill.

It takes two steps.

Step 1: Start a project in Plyed

1. In Plyed, choose New project.
2. Pick Empty for a clean start, or Plain if you want a working example to look at first. (See Choosing a starter.)

This gives the agent a project that already has everything Plyed needs, so it only has to bring your design across.

Step 2: Let your coding agent port it

1. Install the skill (see below).
2. Open your coding agent inside the project folder you just made. (It is the folder Plyed created for the project.)
3. Give it your design: the files, an export folder, or the pasted artifact code, and ask something like: “Port this into this Plyed project using the plyed-port skill.”
4. When the agent says it is done, go back to Plyed. If the project is open, it updates; otherwise open it from All projects.

Prefer to stay inside Plyed? Its own assistant can also build from a description or from a Figma frame.

Installing the skill

Download plyed-port.zip, then:

• Claude.ai: upload the zip in Settings, Capabilities, Skills.
• Claude Code: unzip it into ~/.claude/skills/ (for every project) or into .claude/skills/ inside the project, so you end up with ~/.claude/skills/plyed-port/SKILL.md.
• Codex: unzip into ~/.codex/skills/, or unzip it into the project and add a line to AGENTS.md: “To port a design into this project, follow plyed-port/SKILL.md.” (Skill support varies by Codex version.)
• Cursor: unzip it into the project and paste the contents of plyed-port/SKILL.md into a rule in .cursor/rules/, or point the chat at the file.
• Any other agent: tell it to read plyed-port/SKILL.md first.

What to expect

• Your layout and look come across, not the code. The agent rebuilds each section with Plyed’s building blocks (headings, text, images, buttons, sections), so you can click any part of it on the canvas and change it.
• Colours, fonts and text styles become project settings, so you can change them in one place from Plyed’s Stylesheet panel.
• Interactive parts are simplified. Menus, tabs, accordions and sliders are rebuilt with Plyed’s lightweight behaviours. Anything that needs a server (sign-in, a database, a form that stores entries) stays static: the agent will tell you what it left out.
• Check it. Click through the pages on the canvas and the phone preview. If a section can’t be selected or edited, tell the agent which one and ask it to rebuild it as plain page content.

Troubleshooting

• The agent wants to create a project from scratch. Stop it and point it to the folder you made in Plyed; the project already has what it needs.
• The agent can’t run its checks. It needs Bun installed, or you can run the project’s commands from Plyed’s code window.
• Plyed asks to install or trust the project when you open it. That is normal for a project whose code was changed outside Plyed. Review and confirm.