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.
Informações da origem
- Repositório
- tomevault-io/skills-registry
- Última atividade na origem
- 28 de abril de 2026 às 22:53
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 1
- Forks
- 0
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Explorador de arquivos
2 arquivosExibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- 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 -->
Ver no GitHub