skills.rest
RIVO-Noord
RIVO-NoordOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mockup-forge

Generate UI mockups from wireframes, screen designs, or Excel tables.

3|Updated Jan 18, 2023
Search Tags:#excel#ui design#wireframe#screen design#mockup generation
One-click install
npx skills add https://github.com/RIVO-Noord/zorgviewer-ig --skill mockup-forge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-forge
Source: https://github.com/RIVO-Noord/zorgviewer-ig/tree/main/skills/mockup-forge
Command: npx skills add https://github.com/RIVO-Noord/zorgviewer-ig --skill mockup-forge

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires openpyxl, weasyprint, pdftoppm, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation of professional UI mockups from wireframes, screen designs, or Excel tables, saving time and effort in the design process.

Core Features & Use Cases

  • Wireframe to Mockup: Convert wireframes into polished mockups.
  • Mockup Professionalization: Upgrade and refine existing mockups.
  • Composite Mockup Upgrade: Enhance combined mockups with wireframe elements.
  • Excel to Mockup: Generate mockups directly from Excel tables.
  • Use Case: When you need a quick UI mockup from a wireframe, or you want to enhance an existing mockup with a specific design style.

Quick Start

Use the mockup-forge skill to generate a mockup from the provided wireframe and design.

Frequently Asked Questions about mockup-forge

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

FAQPage Schema
How do I generate UI mockups from Excel tables?▼

UI mockup generation from Excel tables processes spreadsheet data through the Claude API and Weasyprint, translating tabular rows into structured screen designs to produce rendered visual mockups.

What is the best way to convert wireframes into polished UI mockups?▼

Converting wireframes into polished UI mockups requires processing the initial screen designs through the Claude API. The system applies design principles and UI component styling to refine wireframe elements into high-quality, professionalized mockup outputs.

Do I need design knowledge to use a mockup generation tool for screen design?▼

Yes, accurate mockup rendering requires knowledge of design principles and UI component styling. While the tool automates layout processing through Weasyprint and Playwright, design understanding ensures the generated screen designs meet professional standards.

Can I upgrade existing mockups with wireframe elements using a mockup generation workflow?▼

Yes, you can upgrade existing mockups through composite mockup enhancement. This process takes combined mockups and integrates wireframe elements, refining the overall screen design using the Claude API and Weasyprint to produce professionalized outputs.

Does Weasyprint work with the Claude API for UI screen design rendering?▼

Weasyprint works with the Claude API to render UI screen designs by converting processed design data into visual mockups. The workflow uses Weasyprint alongside Playwright to apply UI component styling and generate high-quality mockup outputs.

Related Skills

Explore More Design & Creative Skills→
bloknayrbbloknayrb
2

Excel Analysis

Analyzes and transforms data in .xlsx files using Python libraries.

Community
Intermediate
black-ytblack-yt
7

pdf-to-images

Convert PDF pages into PNG or JPEG images with Ghostscript or Poppler.

Community
Intermediate
dousudousu
3

gradio-screenshot-capture

Capture screenshots of Gradio web UIs with Playwright.

Community
Intermediate
gvinokurgvinokur

ui-ux-designer

Generate standalone HTML mockups with React and MUI v7 components.

Community
Intermediate