AI UP LAB HTML 收集 · 每日更新HTML Collection · daily updates

按类型浏览Browse by type / 工具页 Tool

tool

工具页 Tool

在浏览器里生成 CSS/HTML 的小工具。 当前 24 条。 In-browser tools that generate CSS or HTML. 24 items now.

全部类型All types HTML 总览HTML overview
+ 精选 + Featured 工具页 Tool 组件 Component

SparkUI：给 AI Agent 用的一次性互动页（URL 即 UI） SparkUI: ephemeral interactive pages for AI agents (UI via URL)

Limeade Labs 开源的 Agent UI 工具：Agent 一次 API / MCP 调用推送结账、计时、投票、审批等模板页，用户点开 URL 互动，结果经 WebSocket 回传，页可自毁。npm `@limeade-labs/sparkui`，宣称 11 模板 / 8 组件 / MIT；演示站公开可开。非 Grok Bot 官方件，接 MCP 以当日客户端为准。 Limeade Labs’ open-source agent UI toolkit: one API / MCP call pushes checkout, timer, poll, approval and other template pages; the user opens a URL, actions stream back over WebSocket, pages can self-destruct. npm `@limeade-labs/sparkui`; site claims 11 templates / 8 components / MIT; public demo. Not an official Grok Bot piece — MCP wiring depends on the client of the day.

agent-ui · mcp
+ 精选 + Featured 组件 Component 文档站 Docs

DAUB：给 AI 用的 CSS 组件库（84 件 / llms.txt / MCP） DAUB: CSS component library for AI (84 parts / llms.txt / MCP)

sliday 的 DAUB：两文件零构建 CSS/JS 组件库（约 84 组件、21 主题族），带 classless 模式、llms.txt、agent-skills、可复制提示与远程 MCP（generate_ui / catalog / validate / render）。演示站与 playground 公开可开；MIT。 sliday’s DAUB: a two-file, zero-build CSS/JS kit (~84 components, 21 theme families) with classless mode, llms.txt, agent-skills, pasteable prompts, and a remote MCP (generate_ui / catalog / validate / render). Demo and playground are public; MIT.

css · ai-docs
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

Relativity Park：光速降到步行时的狭义相对论 Relativity Park: special relativity when light walks

Dmitry Brant 的公开互动演示：把光速压到 5 km/h（约步行速度），在公园视角里用 WASD 加速，观察洛伦兹收缩、光行差、多普勒变色与相对论光束效应，各效应可单独开关。Show HN 当日上过热榜（item 49637385）；纯前端可打开，无需登录。 Dmitry Brant’s public interactive demo: the speed of light is set to 5 km/h (a brisk walk); accelerate with WASD through a park and watch length contraction, aberration, Doppler colour shift, and relativistic beaming, each toggleable. Hit the Show HN front page the same day (item 49637385); pure front-end, no login.

physics · relativity
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

Roadwright：画轮子，看它滚出的路面 Roadwright: draw a wheel, see the road it rolls on

Basel Ashraf 的浏览器几何小品：手绘（或选一个）轮子轮廓并放好轴心，即时算出该轮无滑滚动时对应的路面曲线，可调滚速、双轮轴距、路面倾斜，并导出 PNG / 切割文件 / 录制循环。纯前端互动；Show HN item 49641755，仓库开源。 Basel Ashraf’s browser geometry toy: draw (or pick) a wheel outline, place its axle, and instantly get the road profile it rolls on without slipping; adjust roll speed, two-wheel wheelbase and road tilt, and export PNG / cut files / a recorded loop. Pure front-end interactive; Show HN item 49641755, source on GitHub.

geometry · canvas
工具页 Tool 游戏/互动 Game / interactive

Single-File SaaS：单文件 BYOK 模板 Single-File SaaS: BYOK in one HTML file

一整套 BYOK SaaS 脚手架塞进一个 HTML：免费日限额、License 解锁 Pro、密钥只留在当前标签页内存。可直接打开演示页。 A full BYOK SaaS scaffold in one HTML file: free daily quota, license unlock for Pro, keys kept in tab memory only. Open the demo page directly.

single-file · saas
+ 精选 + Featured 工具页 Tool 落地页 Landing

MotionSites MotionSites

现成落地页提示库，给 Lovable / Bolt / Cursor / Claude 复制即用。分类有落地页、Hero、页脚、SaaS，偏电影感和 3D 动效。 Ready-to-use landing-page prompts for Lovable, Bolt, Cursor, and Claude. Browse landing pages, heroes, footers, SaaS — cinematic and 3D motion.

html · design
+ 精选 + Featured 工具页 Tool

MeiGen MeiGen

免费 GPT Image 2 / Nano Banana / Seedance 2.5 提示画廊。按广告、品牌、视频、插画、海报、人像分类，复制即用。另有 MCP、Skills、Figma 插件。 Free prompt gallery for GPT Image 2, Nano Banana, and Seedance 2.5. Browse ads, branding, video, illustration, posters, portraits — copy and generate. Also MCP, Skills, and a Figma plugin.

html · design
+ 精选 + Featured 工具页 Tool 文档站 Docs

Refero Styles Refero Styles

2000+ 份从真实产品站抽出来的 DESIGN.md：颜色、字体、间距、组件，给 Cursor / Claude Code / Codex 直接读。 2,000+ DESIGN.md files pulled from real product sites — colors, type, spacing, components — readable by Cursor, Claude Code, and Codex.

html · design
+ 精选 + Featured 工具页 Tool 文档站 Docs

Taste Skill Taste Skill

给编程助手装上设计品味的 Anti-Slop 技能包。13 个 Skill：代码实现（含 soft / minimalist / brutalist）和图像参考稿。先读简报，再映射设计系统，出厂前约 60 项检查。 Anti-slop agent skills that give coding agents design taste. 13 skills: code output (including soft / minimalist / brutalist) and image-gen references. Read the brief first, map a real design system, then a ~60-item ship check.

html · design
+ 精选 + Featured 工具页 Tool

OpenDesign OpenDesign

开源 Claude Design 替代：本机优先的桌面应用，用已有的编程助手生成落地页、仪表盘、幻灯片、图片和视频，导出 HTML / PDF / PPTX / MP4。自带 BYOK，接 20 多种 CLI。 Open-source Claude Design alternative: a local-first desktop app that turns your coding agent into a design engine — prototypes, landing pages, dashboards, decks, images and video, exported as HTML / PDF / PPTX / MP4. BYOK across 20+ CLIs.

html · design
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

GlassBox：浏览器指纹台 GlassBox: browser fingerprint bench

单页静态 HTML：在浏览器里跑约 31 项探针（canvas、WebGL/WebGPU、音频、字体、WASM、WebRTC IP 等），展示原始值与可识别度估计。默认本地运行，仅 IP 地理可选外联；MIT 源码。 One static HTML page: ~31 in-browser probes (canvas, WebGL/WebGPU, audio, fonts, WASM, WebRTC IP, …) with raw values and an identifiability estimate. Mostly local; IP geo is the optional phone-home. MIT source.

html · single-file
+ 精选 + Featured 工具页 Tool 文档站 Docs

DesignLang DesignLang

开源 CLI：对任意网址跑一遍 headless Chromium，抽出完整设计系统。DTCG token、Tailwind、CSS 变量、Figma、SwiftUI / Compose / Flutter，以及给 Cursor 的 MCP。 Open-source CLI: point headless Chromium at any URL and pull the full design system — DTCG tokens, Tailwind, CSS variables, Figma, SwiftUI / Compose / Flutter, plus an MCP for Cursor.

css · design
+ 精选 + Featured 文档站 Docs 工具页 Tool

海报构图手册 · 上册 Poster Composition Handbook Vol. 1

Adrian Punk 的 AI 海报 / HTML 构图手册上册：16 种控制焦点、平衡、几何骨架和视线动势的构图，每条带图像模型与 HTML/CSS 提示词。 Adrian Punk’s AI poster / HTML composition handbook, vol. 1: 16 layouts for focus, balance, geometric skeleton, and eye path — each with image-model and HTML/CSS prompts.

css · grid
+ 精选 + Featured 文档站 Docs 工具页 Tool

海报构图手册 · 下册 Poster Composition Handbook Vol. 2

下册 16 种：网格系统、图文关系和信息密度。构图管阅读路径，Grid 管对齐与复用；给图像模型一套，给 HTML/CSS 一套。 Vol. 2’s 16 layouts: grid systems, type–image relations, and density. Composition sets the reading path; the grid handles alignment and reuse — one prompt set for image models, one for HTML/CSS.

css · grid
+ 精选 + Featured 文档站 Docs 工具页 Tool

MDN CSS Examples MDN CSS Examples

MDN CSS 文档配套的可运行示例仓库页：含 object-fit、overscroll、计数器样式与小工具等独立 HTML 演示。 Runnable example index that accompanies MDN’s CSS docs: standalone HTML demos for object-fit, overscroll, counter styles, and small tools.

mdn · css
工具页 Tool

CSS Shadow Palette Generator CSS Shadow Palette Generator

Josh Comeau 的阴影色板生成器：调整高度与光线后复制 CSS 自定义属性，工具页即用。 Josh Comeau’s shadow-palette generator: tune height and light, then copy CSS custom properties. A ready-to-use tool page.

shadow · generator
工具页 Tool

Squoosh Squoosh

GoogleChromeLabs 的浏览器内图片压缩工具：本地编解码、并排对比、不上传原图。是高质量 Web 工具页的代表。 GoogleChromeLabs in-browser image compressor: local codecs, side-by-side compare, originals never upload. A high-quality web tool page.

image · wasm
工具页 Tool

Clippy：CSS clip-path 生成器 Clippy: CSS clip-path maker

Bennett Feely 的可视化 clip-path 编辑器，拖点生成 circle / ellipse / polygon / inset，并可复制 CSS。 Bennett Feely’s visual clip-path editor. Drag points to make circle / ellipse / polygon / inset, then copy the CSS.

clip-path · css
工具页 Tool 游戏/互动 Game / interactive

slideVars slideVars

CodePen 开源的 CSS 变量控制面板：自动读取 :root 自定义属性，生成滑杆和取色器，改值立刻反映到页面。MIT，演示页公开可访问。 CodePen’s open-source CSS-variable control panel: it auto-detects :root custom properties, builds sliders and color pickers, and reflects changes live. MIT, and the demo page is public.

css · custom-properties
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

RACK-02：单文件 techno 机 RACK-02: a techno machine in one HTML file

整台模块化 techno 机写在一个 HTML 文件里：鼓组、贝斯、效果、场景与 CV 接线，浏览器即开即玩，无需安装。GitHub Pages 上的可玩页。 A modular techno machine in a single HTML file: drums, bass, FX, scenes, and a CV patchbay. Open it in the browser — no install. Live on GitHub Pages.

audio · web-audio
工具页 Tool 游戏/互动 Game / interactive

Yan Texture Studio：浏览器纹理实验室 Yan Texture Studio: in-browser texture lab

免费浏览器 Texture Studio：25 种 Canvas 2D 纹理/故障滤镜，全在本地跑，无账号、无上传，导出 PNG。只收录网页工具，不含移动端 App。 Free browser Texture Studio: 25 Canvas 2D texture / glitch filters, all client-side — no account, no upload, PNG export. Catalogues the web tool only, not the mobile app.

canvas · glitch
+ 精选 + Featured 工具页 Tool demo demo

HTML Presentation Editor：单文件自编辑演示稿 HTML Presentation Editor: self-editing single-file slides

MIT 单文件（~42KB）演示稿编辑器：浏览器内 contenteditable，Cmd+S 写回同文件；文档/幻灯双模式、主题与强调色、图片嵌 base64，无构建无服务器。 MIT single-file (~42KB) presentation editor: in-browser contenteditable, Cmd+S writes the same file; document/slides modes, themes + accents, base64 images — no build, no server.

single-file · slides
+ 精选 + Featured demo demo 游戏/互动 Game / interactive

Ptree：可交互生命树 Ptree: interactive tree of life

浏览器里的系统发育生命树：按性状滑块过滤类群，比较祖先与照片/分布。Show HN 公开演示。 An interactive phylogeny tree of life in the browser: trait sliders filter taxa; compare ancestors with photos/ranges. Public Show HN demo.

phylogeny · interactive
+ 精选 + Featured 工具页 Tool 落地页 Landing

SceneAI：UI 提示库（AETHER Claude 首屏演示同源） SceneAI: UI prompt library (source of AETHER’s Claude hero demo)

Orixadesign 出品的 UI 提示库：140+ 落地页 / Hero 区块提示、70+ 动态背景与渐变，每周上新，可复制进 Claude / GPT / Gemini 等生成。首页免费浏览样本；「Copy Prompt」与下载需 All Access（$49/月或 $199 终身，标价 $498 六折）。AETHER 的 3Portals Claude 网页设计演示片回复串即链到此站。 A UI prompt library by Orixadesign: 140+ landing-page / hero prompts, 70+ animated backgrounds and gradients, weekly drops, meant to be pasted into Claude / GPT / Gemini and friends. Samples browse free on the homepage; Copy Prompt and downloads need All Access ($49/mo or $199 lifetime, listed $498 at 60% off). AETHER’s 3Portals Claude web-design clip links here in its reply thread.

html · design