Can I define mandatory fields in the prototype?

Yes, the Markdown table includes an '是否必输' (Is Mandatory) column that adds visual cues to the generated prototype for required fields.

How do I see the resulting prototype image?

After execution, the skill saves a PNG file to your local directory and provides a summary message containing the file path for easy access.

Do I need to install any external dependencies to use this?

Yes, the skill relies on a Python script and Playwright. You may need to install the necessary Python packages and browser binaries as prompted by the error handler.

Is it possible to generate prototypes for complex SAP layouts?

Currently, the skill focuses on form-based layouts and input screens defined via field tables, which covers the majority of SAP transaction and search scenarios.

SAP Prototype Generator

Name: SAP Prototype Generator
Author: nerver111

bynerver111

0•

デザインツール

Generates professional SAP-style UI prototype images directly from Markdown table definitions.

The SAP Prototype Generator is a specialized Claude Code skill designed to streamline the creation of high-fidelity SAP interface mockups. By transforming simple Markdown tables into visual PNG images using Playwright, it allows developers and functional consultants to instantly visualize SAP input screens, forms, and search dialogs without manual design tools. The skill supports standard SAP UI elements including Input fields, Radio buttons, Checkboxes, and Select-options, making it an essential utility for rapid prototyping, requirement validation, and technical documentation within SAP environments.

主な機能

01Includes visual indicators for mandatory fields and default values

02Automated rendering using Playwright for high-quality PNG output

03Supports core SAP field types: Input, Radio-Button, Check-Box, and Select-option

04Provides a natural language summary with file paths and metadata

05Converts Markdown tables into visual SAP-style UI prototypes

060 GitHub stars

ユースケース

01Visualizing SAP search screens and input forms for business requirement documents

02Creating rapid UI mockups during client workshops or design sprints

03Generating visual documentation for custom SAP interface specifications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nerver111/git-skill-test generate-sap-prototype

For use in Claude.ai and ChatGPT

主な機能

01Includes visual indicators for mandatory fields and default values

02Automated rendering using Playwright for high-quality PNG output

03Supports core SAP field types: Input, Radio-Button, Check-Box, and Select-option

04Provides a natural language summary with file paths and metadata

05Converts Markdown tables into visual SAP-style UI prototypes

060 GitHub stars

ユースケース

01Visualizing SAP search screens and input forms for business requirement documents

02Creating rapid UI mockups during client workshops or design sprints

03Generating visual documentation for custom SAP interface specifications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nerver111/git-skill-test generate-sap-prototype

For use in Claude.ai and ChatGPT