Lovable Skill Wireframe — Design skill for Claude Code

/wireframe

`/wireframe` reads the active page of your Lovable app and creates a `WIREFRAME-{page}.md` file with that page's real text, layout, buttons, and interactive elements — written in plain language that anyone can read and share. Use `/wireframe all` to map every page into a single file.

It is a community-built Lovable Skill by [Lucio Amorim](https://www.linkedin.com/in/lucioamorim), Lovable Partner in Brazil.

Central catalog: [`lucioamor/lovable-skills`](https://github.com/lucioamor/lovable-skills) Standalone import repo: [`lucioamor/lovable-skill-wireframe`](https://github.com/lucioamor/lovable-skill-wireframe)

Why this exists

At some point, almost every builder needs to show someone else what their app looks like — a teammate, a client, a reviewer, or another AI tool.

Screenshots are hard to search through. Sending raw code is confusing. Describing the app from memory is unreliable.

`/wireframe` creates a plain-text document of what the app actually shows: every page, every button, every piece of text, and every interactive element like filters and dropdowns. That document is easy to read, easy to share, and easy to hand off to any AI tool without uploading screenshots or copying piles of code.

What it creates

`/wireframe` reads your app and writes a `WIREFRAME.md` file with:

• a list of all pages in the app
• shared elements like the top bar, bottom bar, and pop-up dialogs
• a layout diagram for each page, in the order things appear on screen
• every word of real text: headings, descriptions, button labels, links, error messages, and small captions
• interactive elements like filters, dropdowns, date pickers, and tabs — including what each one does and what it looks like by default
• different states of each page: what shows when you are signed in, signed out, or when there is no data yet

When a page contains a very large table or a long block of text, the file shows an abbreviated version and tells you the best way to review the full