ccc-design / capture — Design capture workflows
Adapted from MengTo/Skills — MIT licensed. This is a routing wrapper, not a port — full workflows stay in vendor/mengto-skills/; each row below points at the source spec.
CCC's frontend-design covers building UI. This sub-skill covers capturing an existing reference (someone else's site, a screen recording, a mockup) and turning it into a reusable, screenshot-backed prompt — the missing "reverse" direction.
What's inside
| Workflow |
What it does |
When to use |
Vendor source |
video-to-superprompt |
Analyzes a reference video (design, UI, animation, transitions, scroll interactions, typography, colors, WebGL) and writes a detailed recreation/inspiration prompt |
User shares/uploads/links a video and wants the design or motion recreated |
vendor/mengto-skills/agent-skills/codex/video-to-superprompt/SKILL.md |
html-to-interaction-prompts |
Converts an HTML page (supplied or generated) into a screenshot-backed article of multiple reusable interaction prompts |
User has an HTML file/exported page/live reference and wants its animations/interactions extracted as reusable prompts |
vendor/mengto-skills/agent-skills/codex/html-to-interaction-prompts/SKILL.md |
stitched-full-page-capture |
Produces reliable full-page screenshots for lazy-loaded, scroll-animated, Framer, WebGL/canvas, or reveal-heavy pages by using settled viewport captures instead of trusting a single scroll shot |
Full-page screenshots come back blank/gray/sparse or disagree with a working scroll video |
vendor/mengto-skills/agent-skills/codex/stitched-full-page-capture/SKILL.md |
daily-ui-inspiration-capture |
Recurring, dated UI-inspiration bundle workflow (Framer/Dribbble-style captures + AI-builder prompts, duplicate-checked) |
User wants a repeatable inspiration-gathering runbook, not a one-off capture |
vendor/mengto-skills/agent-skills/codex/daily-ui-inspiration-capture/SKILL.md |
Companion (spec side, not capture): design-first-ui-prompting (vendor/mengto-skills/agent-skills/ui/design-first-ui-prompting/SKILL.md) — turns a fuzzy idea into a tight, skimmable UI-generation spec. Pair it with any capture workflow above: capture extracts the reference, design-first-ui-prompting turns the extraction into a clean build prompt.
How to use
- Identify the source type — video, HTML/live page, or a broken full-page screenshot — and pick the matching row.
- Read the full workflow at its vendor source path before running it; each has its own tool sequence and output format (usually a screenshot-backed markdown article).
- If the goal is to rebuild the captured reference as working UI (not just document it), hand the resulting prompt to
frontend-design or the plugin router's Sub-flow C (Screenshot → interactive UI).
- If a
Design.md soul exists for the current project, reconcile the captured reference against it — don't let a capture override the project's established tokens without confirming.
Anti-patterns — DO NOT
- ❌ Pixel-trace the capture into a static clone — the output is a prompt, and any rebuild should be interactive + on-brand
- ❌ Skip
stitched-full-page-capture and trust a single scroll screenshot on lazy-loaded/WebGL pages — it will be wrong
- ❌ Run capture workflows without reading the full vendor spec first — they have specific tool sequences (screenshot cadence, settle waits) that matter
1---2name: capture3description: Turn an existing reference (video, HTML page, or full-page screenshot) into reusable design prompts. Use when the user has a video/HTML/live-site reference and wants it analyzed and converted into a detailed recreation or inspiration prompt, or when full-page screenshots of scroll-animated/WebGL/lazy-loaded pages are failing.4---56# ccc-design / capture — Design capture workflows78> Adapted from [MengTo/Skills](https://github.com/MengTo/Skills) — MIT licensed. This is a **routing wrapper**, not a port — full workflows stay in `vendor/mengto-skills/`; each row below points at the source spec.910CCC's `frontend-design` covers *building* UI. This sub-skill covers *capturing* an existing reference (someone else's site, a screen recording, a mockup) and turning it into a reusable, screenshot-backed prompt — the missing "reverse" direction.1112## What's inside1314| Workflow | What it does | When to use | Vendor source |15|----------|---------------|--------------|----------------|16| `video-to-superprompt` | Analyzes a reference video (design, UI, animation, transitions, scroll interactions, typography, colors, WebGL) and writes a detailed recreation/inspiration prompt | User shares/uploads/links a video and wants the design or motion recreated | `vendor/mengto-skills/agent-skills/codex/video-to-superprompt/SKILL.md` |17| `html-to-interaction-prompts` | Converts an HTML page (supplied or generated) into a screenshot-backed article of multiple reusable interaction prompts | User has an HTML file/exported page/live reference and wants its animations/interactions extracted as reusable prompts | `vendor/mengto-skills/agent-skills/codex/html-to-interaction-prompts/SKILL.md` |18| `stitched-full-page-capture` | Produces reliable full-page screenshots for lazy-loaded, scroll-animated, Framer, WebGL/canvas, or reveal-heavy pages by using settled viewport captures instead of trusting a single scroll shot | Full-page screenshots come back blank/gray/sparse or disagree with a working scroll video | `vendor/mengto-skills/agent-skills/codex/stitched-full-page-capture/SKILL.md` |19| `daily-ui-inspiration-capture` | Recurring, dated UI-inspiration bundle workflow (Framer/Dribbble-style captures + AI-builder prompts, duplicate-checked) | User wants a repeatable inspiration-gathering runbook, not a one-off capture | `vendor/mengto-skills/agent-skills/codex/daily-ui-inspiration-capture/SKILL.md` |2021**Companion (spec side, not capture):** `design-first-ui-prompting` (`vendor/mengto-skills/agent-skills/ui/design-first-ui-prompting/SKILL.md`) — turns a fuzzy idea into a tight, skimmable UI-generation spec. Pair it with any capture workflow above: capture extracts the reference, `design-first-ui-prompting` turns the extraction into a clean build prompt.2223## How to use24251. Identify the source type — video, HTML/live page, or a broken full-page screenshot — and pick the matching row.262. Read the full workflow at its vendor source path before running it; each has its own tool sequence and output format (usually a screenshot-backed markdown article).273. If the goal is to *rebuild* the captured reference as working UI (not just document it), hand the resulting prompt to `frontend-design` or the plugin router's Sub-flow C (Screenshot → interactive UI).284. If a `Design.md` soul exists for the current project, reconcile the captured reference against it — don't let a capture override the project's established tokens without confirming.2930## Anti-patterns — DO NOT31- ❌ Pixel-trace the capture into a static clone — the output is a *prompt*, and any rebuild should be interactive + on-brand32- ❌ Skip `stitched-full-page-capture` and trust a single scroll screenshot on lazy-loaded/WebGL pages — it will be wrong33- ❌ Run capture workflows without reading the full vendor spec first — they have specific tool sequences (screenshot cadence, settle waits) that matter
KevinZai