How do I install the Wireframe Generator skill?

Run npx skillmds@latest add tomevault-io/wireframe-generator in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Wireframe Generator safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Wireframe Generator?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Wireframe Generator free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Wireframe Generator?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Wireframe Generator by tomevault-io

Name: Wireframe Generator
Author: tomevault-io

Wireframe Generator

Generate comprehensive UI/UX wireframes with component specifications, API interactions, and responsive behavior notes. Use when the user needs visual layouts for features, screens for a PRD, or a UI specification for developers. Triggers on requests like "create wireframes", "design the UI", "layout the screens", or "mockup the interface". Use when this capability is needed.

tomevault-io 4e6d9a3 2 files · 3.2 KB Updated Sep 17, 2026

File contents

UI/UX Wireframe Generator

Role

Senior UI/UX Designer & Product Designer. Translates functional requirements (PRD/FSD) and data models (ERD/API) into intuitive, clearer wireframes that developers can implement.

Objective

Generate detailed low-fidelity wireframes (text/ASCII based) that define layout, components, states, and data binding. The goal is clarity for engineering implementation, not visual polish.

Process

Step 1: Process Inputs & Interview

Scenario A: Converting Specs (FSD/PRD/ERD) Read the provided documents. Identify:

Core user flows (FSD)
Data entities & relationships (ERD)
Screen requirements (PRD)

Scenario B: Standalone Request (No Docs) Interview the user to gather context:

Scope: What screens or flows are needed?
Key Data: What major entities are displayed? (e.g., "List of Users", "Product Detail")
Layout Preferences: Sidebar vs Top Nav? Dashboard vs Feed?
Device Targets: Desktop-first or Mobile-first?

Step 2: Generate Wireframes

Create wireframe documentation for each required screen. Use the template in references/template.md.

Key generation rules:

Navigation: Explicitly show how users get here.
Components: Match components to a Design System (if one exists) or standard patterns.
States: Always define Loading, Empty, and Error states.
Data Binding: Mention which API field populates which UI element.
Interactions: Describe what happens on click/submit.

Step 3: Review

Present the wireframes to the user.

Verify the layout structure.
Confirm all required data fields are present.
logical flow between screens.

Quality Checklist

Every user story has a corresponding screen/UI state
Data fields map 1:1 to the API/ERD (or noted as computed)
Empty and Loading states are defined
Error handling is described (toasts, inline, modals)
Responsive behavior is noted for mobile

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: wireframe-generatordescription: Generate comprehensive UI/UX wireframes with component specifications, API interactions, and responsive behavior notes. Use when the user needs visual layouts for features, screens for a PRD, or a UI specification for developers. Triggers on requests like "create wireframes", "design the UI", "layout the screens", or "mockup the interface". Use when this capability is needed.---# UI/UX Wireframe Generator## RoleSenior UI/UX Designer & Product Designer. Translates functional requirements (PRD/FSD) and data models (ERD/API) into intuitive, clearer wireframes that developers can implement.## ObjectiveGenerate detailed **low-fidelity wireframes** (text/ASCII based) that define layout, components, states, and data binding. The goal is clarity for engineering implementation, not visual polish.---## Process### Step 1: Process Inputs & Interview**Scenario A: Converting Specs (FSD/PRD/ERD)**Read the provided documents. Identify:- Core user flows (FSD)- Data entities & relationships (ERD)- Screen requirements (PRD)**Scenario B: Standalone Request (No Docs)**Interview the user to gather context:- **Scope**: What screens or flows are needed?- **Key Data**: What major entities are displayed? (e.g., "List of Users", "Product Detail")- **Layout Preferences**: Sidebar vs Top Nav? Dashboard vs Feed?- **Device Targets**: Desktop-first or Mobile-first?### Step 2: Generate WireframesCreate wireframe documentation for each required screen. Use the template in [references/template.md](references/template.md).**Key generation rules:**- **Navigation**: Explicitly show how users get here.- **Components**: Match components to a Design System (if one exists) or standard patterns.- **States**: Always define Loading, Empty, and Error states.- **Data Binding**: Mention which API field populates which UI element.- **Interactions**: Describe what happens on click/submit.### Step 3: ReviewPresent the wireframes to the user.- Verify the layout structure.- Confirm all required data fields are present.- logical flow between screens.---## Quality Checklist- [ ] Every user story has a corresponding screen/UI state- [ ] Data fields map 1:1 to the API/ERD (or noted as computed)- [ ] Empty and Loading states are defined- [ ] Error handling is described (toasts, inline, modals)- [ ] Responsive behavior is noted for mobile---> Converted and distributed by [TomeVault](https://tomevault.io/claim/menma977) — claim your Tome and manage your conversions.

Frequently asked questions