luopeixiang/html-artifacts

HTML Artifacts is a Claude Code Skill, meaning it is an add-on that changes how the Claude Code AI assistant responds to certain requests. Instead of answering with plain Markdown text, it makes Claude generate a complete, single HTML file whenever a task involves visual structure, interactivity, comparisons, or content meant to be shown to someone else. The idea behind it, as the README explains, is that a browser page is often a better format than plain text for things like diagrams, comparisons, or interactive tools. It is installed with a single command through the Skills CLI for Claude Code, and once installed, Claude automatically decides when a request calls for HTML output instead of Markdown, matching the request to one of several built in scenario patterns. Every generated file follows the same design rules: all CSS and JavaScript live inside that one file so nothing else needs to be hosted or linked, the page opens directly in a browser with a double click, it supports both light and dark mode based on the user's system setting, and it uses modern, readable typography and layout. Interactive tools built this way also include buttons to copy their results as JSON, a prompt, or Markdown, and support keyboard navigation like arrow keys and escape. The README shows a gallery of examples across several categories: comparing different technical approaches, reviewing and visualizing code, presenting design system elements like color palettes and typography scales, building small interactive prototypes such as an animation tuner or a theme color picker, drawing architecture and sequence diagrams, building slide-style decks, and creating interactive explainers for technical concepts like consistent hashing or the CAP theorem. Every example in the gallery was generated from a single prompt with no manual editing afterward. The project itself is mostly shell scripting glue around the skill definition and its reference documentation, and is meant for developers or teams already using Claude Code who want richer, shareable visual output instead of plain text answers.