Make an interactive checklist with AI: preview, test and share HTML

Open the creative assistant. Ask for an interactive HTML page, rather than an image of a checklist. Our example checks preparation of a social carousel: approving the source, checking files and preparing publication.

Use short actions with observable results. ‘Review quality’ is vague; ‘Open all five exported files’ can be checked. Keep personal data out of a page you intend to share. This exercise stores progress only while the page is open; it has no account sync or shared team state.

The counter must use all six actions, including any hidden by a filter. ‘Show unfinished’ changes visibility, not completion. ‘Reset’ clears all checkmarks. These rules make it possible to distinguish a working page from a convincing picture.

Create an interactive HTML checklist called Carousel publishing check.
Use three sections with exactly two checkboxes each:
Source: Confirm permission to reuse; Verify the final copy.
Files: Open all five exports; Check page order.
Publication: Preview the destination crop; Add the source link.
Show a completed count out of 6 and a progress bar. Add Show unfinished and Reset buttons. Filtering must not change the total. Reset must clear all six items and restore the full list.
Use properly labelled checkboxes, keyboard-operable buttons, visible focus and readable contrast. Fit a narrow phone screen without horizontal scrolling.
Use a cream background, purple accents and a simple responsive layout. No decorative images are needed.
Keep state only in memory. Show this notice: Progress resets when this page reloads.
Do not use browser storage, forms, external requests, sign-in, payment fields, downloads inside the page or external libraries.
Create the complete HTML page as an interactive artifact in this conversation, not just a code block or a screenshot.

Wait for the page card, then inspect the preview. Creating or saving an artifact is not proof that its controls work. If the card shows an error, send that error and the failed action back to the assistant.

Check two items: the count should read 2/6. Turn on the unfinished filter: four items remain, while the count stays 2/6. Clear a checked item after restoring the full list, then use Reset and confirm 0/6. Reload and confirm the stated reset behaviour. Use Tab and Space to test the checkboxes and buttons.

Fix the existing checklist. With two items completed, Show unfinished incorrectly changes the denominator to 4.
Keep the denominator fixed at the six original actions, independently of the filter. Keep completed items in the underlying state.
Preserve the wording, layout and in-memory reset behaviour. Return the revised interactive page.

Repeat the failed sequence on the revised page and check it on a narrow screen. The prompt describes a test target; it does not guarantee the first generated implementation passes.

Use the artifact card’s HTML download and open the file to verify it. This example requests no external dependencies; pages that use online libraries may need an internet connection.

For other readers, use Share page after checking the content. Sharing is subject to review and creates a snapshot, not a live collaborative checklist. The current default link lifetime is seven days; use the expiry shown by the product and revoke the link when it is no longer needed. Revisions should be checked and shared again—do not assume an older snapshot updates.

Anyone who has the link can view it until it expires or is revoked. Search exclusion is not access control. Shared pages cannot use browser storage, form submissions or external service calls, so this guide does not promise persistent progress, email collection or a backend.

Will a colleague see my checkmarks? No. This example keeps state in each opened page, and a reload clears it. Use a proper task system if you need ownership, lasting records or collaboration.

Can I make a permanent public website this way? A temporary share link is not a permanent website or an SEO landing page. Shared artifacts are excluded from search indexing.

Does the downloaded file retain the checklist? It retains the page and its code; this example intentionally does not save your checked state. Test the downloaded copy separately. Assistant creation and revisions follow existing pricing.

Use an infographic for a static overview, or five social cards for a reading sequence. The creative assistant guide is the starting point for all three.