logics-mockup-generator
Generate quick PNG UI mockups (dashboards/panels) and store them under logics/external. Use when the user asks for on-the-fly visual mockups or PNG previews. Use when this capability is needed.
Quellinformationen
- Repository
- tomevault-io/skills-registry
- Letzte Quellaktivität
- 28. April 2026 um 22:53
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 1
- Forks
- 0
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Datei-Explorer
2 DateienSKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- name
- logics-mockup-generator
- description
- Generate quick PNG UI mockups (dashboards/panels) and store them under logics/external. Use when the user asks for on-the-fly visual mockups or PNG previews. Use when this capability is needed.
- metadata
- {"author":"alexago83"}
# Mockup generator (PNG)
Use this skill to create fast, disposable UI mockups (PNG) directly in the repo. Output goes to `logics/external/mockup/` by default. Defaults are neutral (non-domain-specific); pass your own labels when you want domain-specific content.
Always generate **both** mobile and desktop variants unless the user explicitly asks for only one.
For VS Code extensions, use the `vscode` preset and generate **desktop only**.
## Quick start (dashboard preset)
```bash
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--layout desktop \
--out logics/external/mockup/dashboard-desktop.png
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--layout mobile \
--out logics/external/mockup/dashboard-mobile.png
```
## VS Code extension preset (desktop only)
```bash
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--preset vscode \
--out logics/external/mockup/logics-orchestrator-desktop.png \
--title "LOGICS ORCHESTRATOR" \
--columns "Requests|Backlog|Tasks|Specs" \
--detail-title "Details" \
--detail-lines "ID: req_000_kickoff|Stage: request|Status: draft|Owner: you|Updated: today"
```
## Breakdown tab (base + modifiers)
```bash
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--mode breakdown \
--layout desktop \
--out logics/external/mockup/breakdown-desktop.png
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--mode breakdown \
--layout mobile \
--out logics/external/mockup/breakdown-mobile.png
```
## Customize (optional)
You can override the title, cards, and top‑skills list:
```bash
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--out logics/external/mockup/dashboard-mock.png \
--title "OVERVIEW" \
--cards "Metric A|52,180|+9.1%;Metric B|8,340|+2.6%;Metric C|1,284|+3.4%;Metric D|9h 10m|-18m" \
--action-time "Active time|6h 22m|+41m" \
--skills "Category A|1h 32m|24%;Category B|1h 06m|17%;Category C|58m|15%;Category D|46m|12%;Category E|39m|10%" \
--tabs "Overview|Breakdown" \
--layout desktop
```
Formats:
- `--cards`: `Label|Value|Delta` entries separated by `;`.
- `--action-time`: single `Label|Value|Delta`.
- `--skills`: `Name|Time|Share` entries separated by `;`.
## Notes
- Outputs are placed under `logics/external/mockup/` unless you pass a different `--out`.
- Requires Python 3 and Pillow (`pip install pillow`) if not already available.
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/alexago83) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->
Auf GitHub ansehen