demo maker

    1

    Build pixel-perfect, clickable HTML demos using live DOM snapshots and production CSS from your existing application.

    Free

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    demo maker

    Example session with this skill installed

    Generate a clickable HTML demo for ticket PROJ-101. It adds a 'Bulk Upload' step to the existing document manager. Use the current production styles and ensure the text matches the desktop client.

    • Read your context and instructions
    • Compiled the demo maker
    • Generated the UI component

    I have mapped the workflow for PROJ-101 and completed the DOM capture of the document manager. I faked the POST /api/upload endpoint to prevent data changes and verified that all icon fonts resolved correctly from the local node_modules.

    Clickable Workflow Demo: Bulk Upload

    The demo is available in demo/PROJ-101/index.html. It includes the following states:

    1. step-1-initial.html: The current document grid with the 'Upload' button reworded to 'Bulk Upload'.
    2. step-2-dropzone.html: The new dropzone component using production Panel and Flex classes.
    3. step-3-progress.html: A simulated upload state using the app's existing ProgressBar styles.
    4. step-4-complete.html: The updated grid showing multiple new rows.

    Text Register Excerpt

    #TextWhereCategorySource
    1Bulk Uploadweb/desktopRewordedTicket PROJ-101
    2Drop files herewebNewComponent Library (Shared)
    3Uploading...web/desktopReusedsrc/constants/labels.ts:42

    Captured Assets

    • demo/assets/app.css: 142kb (Extracted from CSSOM via helpers.js)
    • demo/assets/icons/: 12 glyphs verified and mapped.
    • capture/parts/grid.body.html: Original DOM snapshot for structural parity.

    Next steps

    1. Open demo/PROJ-101/index.html in your browser to review the step-by-step flow.
    2. Review the 'Open Questions' section regarding the progress bar behavior on mobile widths.
    3. Run scripts/deskshot if you need to generate the matching WinForms screenshots for the desktop client.

    index.html

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    When stakeholders argue about font drift instead of workflow logic, the prototyping process has failed. Hand-written mockups inevitably diverge from production CSS, leading to wasted review cycles. This skill eliminates design drift by generating clickable demos directly from the app's own rendered components and live DOM snapshots.

    What it does

    • Live DOM capture extracts exact HTML and CSS from a running, signed-in web application.
    • Desktop rendering uses native WinForms controls to generate pixel-perfect PNG composites of desktop clients.
    • Centralized text registration manages every string across web and desktop to prevent terminology drift.
    • Automated verification validates that web fonts, icons, and layout matches the original production environment.
    • Safe prototyping fakes API write calls at the network level to ensure no data is modified during capture.

    How it works

    1. Flow mapping defines the sequence based on ticket requirements and acceptance criteria.
    2. Text registration populates a mandatory ledger of reused, reworded, and new strings before any code is generated.
    3. Environment capture injects helper scripts into the live app to snapshot the CSSOM and DOM states.
    4. Assembly composes the final clickable demo using only captured production class names and the text register.

    Frameworks & tools

    The skill utilizes Python for extraction and build scripts, Node.js for browser automation, and a custom net8.0-windows utility for desktop WinForms capture. It supports modern frontend stacks including React, Emotion, and styled-components by reading the CSSOM directly.

    Why this beats prompting it yourself

    Generic prompts result in "look-alike" CSS that fails to capture complex CSS-in-JS rules or specific icon-font dependencies. This skill uses precise injection techniques to handle var() shorthand serialization and portal-based layouts that standard scrapers miss.

    Use cases

    • Showing stakeholders exactly how a new multi-step checkout will look within the existing UI.
    • Creating high-fidelity technical documentation for a feature before the production code is merged.
    • Prototyping desktop and web parity for a shared feature to ensure consistent terminology.

    Known limitations

    Does not support designing new screens from scratch or free-form Figma exploration. Requires a running, signed-in instance of the application to perform the initial DOM and CSS capture.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 10 days ago

    • Free to download with an account

    Listed10 days ago

    What's inside

    Frequently Asked Questions