resources · AI Adept

31 HTML Features to Ask ChatGPT or Claude For

31 named HTML, CSS, and JavaScript pieces you can ask ChatGPT or Claude to add to a page — each demonstrated live, so you know exactly what to ask for.

Drafted by
Claude Opus 4.7
Published
May 13, 2026
Verified
May 13, 2026
For
AI Adept

If you have been asking ChatGPT or Claude to make you HTML pages, here are thirty-one named things you might not know to ask for. Scroll. Tap anything you do not recognize. Then ask for it by name.

Browser powers (one line of JS)

Copy to clipboard

One button copies text to the clipboard.

Tweaks: copy from any element you point at, fade out a “Copied!” message, or copy a generated link instead of the quote.

Copy

A coconut never falls far from the tree it intends to embarrass.

Copied!

Save as file (download as CSV, PNG, or .txt)

Generate a file in the browser and trigger a download.

Tweaks: save a drawing as a PNG, export a table as CSV, name the file with today’s date, or save several files at once.

Download

Share button (mobile-friendly)

Open the native share sheet on iOS and Android with one call.

Tweaks: share a URL alongside the message, share a generated file, or fall back to copy-link when there is no native share sheet.

Share

Speak this aloud (and listen for speech)

Read text aloud, or transcribe what the user says into text.

Tweaks: pick a specific voice, slow it down or speed it up, transcribe what you say into a notes box, or read text from any element. Listening: Chromium and Safari only.

Voice

Fullscreen toggle

Make any element fill the whole screen.

Tweaks: fullscreen one element instead of the whole page, change how it looks while fullscreen, or exit cleanly when Escape is pressed.

Fullscreen
A very small card with big ambitions.

Printable / Save-as-PDF

Trigger the print dialog and offer a cleaner print view.

Tweaks: hide menus and sidebars on print, force light mode for ink, add a print-only header, or scope the print to one section.

Print

A short receipt for posterity. Items: one moment of quiet, two long breaths, three things you noticed.

Make it move

Looping animation (CSS keyframes)

Looping motion built in CSS.

Tweaks: pause when you hover, sync two things to the same beat, make the motion choppy on purpose, or slow it way down.

Bouncing dot

Smooth crossfade between page states (View Transitions)

A smooth crossfade (or shape-morph) when the page changes from one layout to another.

Tweaks: morph a specific element instead of crossfading the layout, slow the transition down, or chain two transitions in a row. All modern browsers since Firefox 144 (October 2025). MDN reference.

Morph layout
Foam
Coconut
Eclipse

Style a card by what’s inside it

Tick a checkbox, focus an input, or fill a field, and the whole card around it can react. No JavaScript.

Tweaks: highlight a form when a field is invalid, dim a card when something inside is empty, or change a sidebar when a checkbox toggles.

Check the box
I solemnly swearNo JavaScript. The container is watching.

Remember things

Remember between visits

Save whatever the user typed so it is still there after a refresh, or tomorrow.

Tweaks: forget when the tab closes instead of forever, save as you type, save several fields at once, or clear everything with a button.

Persistence

Shareable URL state

Encode the page’s state in the URL so a link sends it.

Tweaks: keep the Back button working, hide the values in a shorter code, prefill the page when someone opens the link, or copy the link to clipboard.

URL state

Light / dark mode toggle

A switch that flips the palette, optionally respecting the operating system’s preference.

Tweaks: remember the choice next time, follow the operating system setting by default, swap a sun for a moon icon, or fade between modes.

Dark mode
Bedside table, 3:14 AM.

The lamp knows. The lamp always knows.

Draw with code

Drop-in vector icon (inline SVG)

An icon or illustration that stays crisp at any size and can change color with the surrounding text.

Tweaks: change colors with CSS, animate the icon on hover, or have it take the color of the surrounding text.

Three icons

Sparkline (mini-chart from data points)

A small line chart drawn straight from numbers.

Tweaks: shade the area below the line, mark the peak with a dot, color a downturn red, or stack several sparklines for comparison.

Weekly highs
Coconut harvest, last 7 dayspeak

Canvas drawing surface

A blank canvas you can draw on. Games, paint tools, charts, or generative art.

Tweaks: turn it into a tiny game, save what you drew as a PNG, change the brush color, or animate something on it.

Finger paint

Reveal and rearrange

Collapsible “show answer”

Click a summary to reveal or hide what is underneath.

Tweaks: nest them, leave the first one already open, swap the triangle for a plus/minus icon, or animate the reveal.

Show answer
Is it pronounced “gif” or “gif”?

Yes.

Where did my Wednesday go?

Last seen near the coffee. Possibly absorbed by Thursday.

Exclusive accordion (one open at a time)

Several collapsible items where opening one closes the others.

Tweaks: leave the first answer open by default, run two independent accordions on the same page, or animate the open and close. Shipping in all modern browsers since 2024. MDN reference for <details>.

Accordion
How often should I water the fern?

Less than you think. It is judging you.

Why is the basil sulking?

Basil is dramatic. Move it three inches and apologize.

What is the one we don’t talk about?

The mint. We do not talk about the mint.

A pop-up that takes focus, dims the page, and closes on Escape.

Tweaks: add a confirm-and-cancel pair, let the user close by clicking outside, fade the background while it is open, or slide it in from one side. MDN reference for <dialog>.

Dialog

You opened the box. There was a small ceremony.

Sort-by-column table

Click a column header to sort the table by it.

Tweaks: show an arrow on the active column, sort by two columns at once, remember the last sort across refreshes, or filter rows with a search box.

Sortable table
SpeciesHeight (cm)Sun
Greater Spectacle Fern42Shade
Unbothered Basil28Full sun
Hexagonal Sedge15Partial
Brooding Hosta55Shade

Drag-to-reorder list

Pick up a list item and drop it in a new spot.

Tweaks: remember the new order, animate the drop, add a drag handle so only one part is grabby, or turn it into a two-column kanban. Mouse only on the web; mobile touch needs a polyfill.

Reorder
  • Water the unbothered basil
  • Apologize to the fern
  • Find the Wednesday
  • Ignore the mint
  • Pick a vibe

Tooltip pinned to a button (CSS anchor positioning)

A little label that appears next to a button when you hover.

Tweaks: position it to the right or below the button, animate it in, widen the gap, or have it stay open until clicked away. Chromium and Safari 26+; Firefox catching up. MDN reference.

Tooltip

It does this. You’re doing it.

Get input from the reader

Range slider with live readout

Drag a slider; the value updates live as you move it.

Tweaks: a different number range, smaller jumps like half-steps, sticky whole-number values, or two sliders for a price range.

Slider

Color picker

Click a swatch to open the operating system color wheel.

Tweaks: a specific starting color, the hex code shown next to the swatch, or a tool that samples a color from anywhere on screen.

Color

You chose: #7c9473

Date or time picker

A calendar (or clock) that picks a date for you, with native validation.

Tweaks: a time picker instead, both date and time, just the month, just the week, or lock it to a specific date range.

Date

Marked on the calendar: 2026-08-12

Auto-growing textarea

A text box that grows taller as you type. No JavaScript.

Tweaks: a maximum height so it stops growing, a minimum number of rows it starts with, or a different border when it is being typed in. Chromium and Safari; Firefox not yet. MDN reference.

Textarea

Editable in place

Click any text on the page and start typing, like editing a Google Doc cell.

Tweaks: turn off spell-check on technical text, allow only plain text (no formatting), save changes as you type, or limit how long the entry can be.

Editable

Click me and start typing. I’m a paragraph, but I dream of being a notepad.

File drop zone (and paste from clipboard)

Drop a file in, paste an image, or click to choose. The page can read its name, size, type, and contents.

Tweaks: only accept images, accept several files at once, show a preview of an image as soon as it lands, or read a CSV into a table.

Drop zone

Drop a file here, click to choose one, or paste something from your clipboard.

Nothing dropped yet.

Show progress and math

Progress bar

Show how complete something is, with a built-in bar.

Tweaks: animate it filling, leave the value off for a “still working” striped state, pair it with a percentage label, or show segments instead of a smooth bar.

Progress

62 of 100 coconuts down. The tree is suspicious.

Live calculator (totals that update as you type)

Inputs that update a result the moment you change them.

Tweaks: chain three inputs together, format the result as currency, smaller jumps on the sliders, or a “split the bill” divider.

Calculator

You owe the waiter: $49.56

Highlight in prose

Inline emphasis that looks like a yellow marker pen ran across the words.

Tweaks: dark-mode-friendly colors, a different highlight color per category, an underline instead of a marker, or a soft animation when it appears.

Highlight

The greenhouse staff agreed on two rules: do not over-water the orchids, and whatever you do, never name the spider plant. Naming it makes leaving harder.

Keyboard shortcut display

A little box styled to look like a physical key on a keyboard.

Tweaks: combos like Ctrl+K shown as two keys, larger keys, different colors for Mac vs Windows, or a tooltip that names the action.

Shortcuts
?Show this cheat sheet’s would-be help menu
g gJump to top, vim-style
EscClose whatever popped up
Ctrl+KOpen the search nobody built yet

What is not on this list

The list is single-file only. Things that need a real backend (databases, auth, payments), an external chart library, or a paid API did not make it. The point of the list above is that more is native to the browser than people usually know.

If the prompts you are sending these chats are also new territory, the prompts cheat sheet covers fifteen task prompts tested across ChatGPT, Claude, and Gemini.

Drafted by Claude Opus 4.7 on May 13, 2026. Verified against live sources on May 13, 2026. If any of this has rotted, tell us.