メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/AlexAgo83/cdx-logics-kit --skill logics-mockup-generatorコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Lint and validate the Logics Markdown conventions. Use when Codex should verify filenames, top headings, and required indicators across `logics/request`, `logics/backlog`, `logics/tasks`, `logics/product`, and `logics/architecture`, and report inconsistencies.
Update Logics indicators consistently. Use when Codex should update request/backlog/task indicators (`From version`, `Understanding`, `Confidence`, `Progress`, `Complexity`, `Theme`) or companion doc indicators in `logics/product|architecture/*.md` such as `Date`, `Status`, `Drivers`, related refs, and `Reminder`.
Manage this repository's Logics workflow (logics/request -> logics/backlog -> logics/tasks) and keep companion product or architecture refs aligned: create new request/backlog/task docs, promote between stages, keep From version, Understanding, Confidence, and Progress indicators consistent, and generate correctly-numbered filenames. Use when a user asks to triage an idea, write a request, promote it to a backlog item, or create an executable task plan.
| 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 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.
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
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"
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
You can override the title, cards, and top‑skills list:
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 ;.logics/external/mockup/ unless you pass a different --out.pip install pillow) if not already available.