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

按类型浏览Browse by type / 文档站 Docs

docs

文档站 Docs

带可运行示例的文档站与示例索引。 当前 20 条。 Doc sites and example indexes with runnable samples. 20 items now.

全部类型All types HTML 总览HTML overview
+ 精选 + Featured 游戏/互动 Game / interactive 文档站 Docs

Bodily Oddities：身体也能「怪」一点的百科 Bodily Oddities: strange things bodies can (sometimes) do

Demjan Vester 的公开互动百科：收录约 143 条人体小怪癖 / 反射 / 感知现象（耳鸣轰鸣、胃咕噜、jamais vu 等），可按身体部位与类型浏览，带「吓人但正常」「现在就能试」入口与搜索。纯前端，Show HN item 49649789（约 271 分）。 Demjan Vester’s public interactive encyclopedia of ~143 bodily quirks / reflexes / percepts (ear rumbling, stomach growling, jamais vu, …), browsable by body region and kind, with “scary but normal” / “try right now” entry points and search. Pure front-end; Show HN item 49649789 (~271 points).

body · encyclopedia
+ 精选 + 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 组件 Component 文档站 Docs

njX UI：CDN 落地页 CSS 库（30+ 组件 / 9 主题） njX UI: CDN landing-page CSS kit (30+ components / 9 themes)

njX UI：一条 CDN 链即可拼落地页的 CSS 优先库——按钮 / 卡片 / 表单 / 动效 / 渐变 / Hero 块，九套 data-theme，可选 Alpine 预设。本页即完整预览，npm 包 `njx-ui`。无框架、无构建。 njX UI: a CSS-first landing kit from one CDN link — buttons / cards / forms / motion / gradients / hero blocks, nine `data-theme` palettes, optional Alpine preset. This page is the full live preview; npm package `njx-ui`. No framework, no build.

css · cdn
+ 精选 + Featured 组件 Component 文档站 Docs

shadcss：无 JS 的 shadcn 风 HTML/CSS 组件 shadcss: shadcn-look HTML/CSS with zero JS framework

russfranky 的 MIT 组件库：把 shadcn/ui 视觉搬到纯 HTML/CSS（`:has()`、Popover API、原生 dialog、设计 token），面向 SSR / HTMX / Astro / AI 生成页。演示站公开可打开，声称数十个组件、gzip 十多 KB、零运行时依赖。 russfranky’s MIT kit: shadcn/ui visuals in plain HTML/CSS (`:has()`, Popover API, native dialog, design tokens) for SSR / HTMX / Astro / AI-generated pages. Public demo; dozens of components, ~tens of KB gzipped, zero JS runtime.

css · html
+ 精选 + Featured 组件 Component 文档站 Docs

Maple：零构建原子 CSS Maple: zero-build atomic CSS

f12io 的 Maple：浏览器内按 DOM 出现的工具类即时生成原子 CSS，无需构建与配置文件；可变优先、OKLCH 调色与混合暗色模式。演示站可公开打开。 f12io’s Maple: a variable-first atomic CSS engine that generates utilities in the browser as classes appear in the DOM — no build step, no config. OKLCH palettes and hybrid dark mode. Demo is publicly open.

css · atomic
+ 精选 + Featured 游戏/互动 Game / interactive demo demo

Topological Picture Book：钢笔拓扑曲面 Topological Picture Book: pen-and-ink topology surfaces

e-infinity 的拓扑图画书：钢笔素描风格的拓扑曲面与空间，可在浏览器里翻页浏览。公开可玩。 e-infinity’s topological picture book: pen-and-ink topology surfaces and spaces, browsable in the browser. Publicly open.

topology · illustration
+ 精选 + Featured 组件 Component 游戏/互动 Game / interactive

Ambient CSS v3：物理光照 CSS Ambient CSS v3: physically based CSS

kikkupico 的物理光照 CSS：共享 key/fill 光，阴影与表面梯度跟着光向走。演示页可调材质、厚度、边缘与旋钮面板；另有纯 CSS 包与 React 组件。 kikkupico’s physically based CSS: a shared key/fill light so shadows and surface gradients follow the light vector. The demo retints materials, thickness, edges, and knob panels; ships a pure CSS package plus React components.

css · skeuomorphic
+ 精选 + 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 文档站 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
组件 Component 文档站 Docs

Pico CSS Pico CSS

面向语义 HTML 的极简 CSS 框架官网：几乎不用 class，直接美化原生表单、按钮与排版。 Minimal CSS framework site for semantic HTML: almost no classes, styles native forms, buttons, and type directly.

framework · semantic-html
组件 Component 文档站 Docs

Shoelace Shoelace

基于 Web Components 的开源组件库文档站（现导向 Web Awesome）。可用 CDN 直接插入 <sl-button> 等自定义元素。 Open-source Web Components library docs (now pointing to Web Awesome). Drop custom elements such as <sl-button> in via CDN.

web-components · design-system
+ 精选 + 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
文档站 Docs 组件 Component

Open Props Open Props

Adam Argyle 的 CSS 变量设计令牌项目官网：颜色、阴影、动画等 props 可直接引入普通 HTML 页。 Adam Argyle’s CSS-variable design-token site: colors, shadows, motion, and other props you can drop into a plain HTML page.

design-tokens · css-variables
+ 精选 + Featured 作品集 Portfolio 文档站 Docs

CSS Zen Garden CSS Zen Garden

同一份 HTML，切换不同作者的外部样式表，展示纯 CSS 能把页面做成完全不同的视觉设计。Dave Shea 发起的经典 CSS 设计展览。 The same HTML, different authors’ external stylesheets — a show of how far pure CSS can restyle a page. Dave Shea’s classic CSS design exhibit.

css · design
+ 精选 + Featured 动效 Motion 游戏/互动 Game / interactive

Scroll-driven Animations Scroll-driven Animations

Chrome 开发者布拉姆斯做的演示站：阅读进度、封面流转、堆叠卡片、横向卷轴等，全部用滚动驱动动画，演示页本身就是手写 HTML/CSS/JS，无构建步骤。 Bramus’s Chrome-developer demo site: reading progress, cover-flow, stacked cards, horizontal scroll, all scroll-driven. The demo itself is handwritten HTML/CSS/JS with no build step.

scroll · css
+ 精选 + Featured 组件 Component 游戏/互动 Game / interactive

PolyCSS：不用 WebGL 的 CSS 3D 引擎 PolyCSS: a CSS 3D engine without WebGL

Layoutit 的 DOM 原生 CSS 3D：OBJ/glTF/VOX 的每个多边形都是可点选的 DOM 节点，用 matrix3d 摆位置。有公开画廊、builder，以及 vanilla / React / Vue 入口。 Layoutit’s DOM-native CSS 3D: every polygon from OBJ/glTF/VOX is a clickable DOM node placed with matrix3d. Public gallery and builder, plus vanilla / React / Vue entry points.

css · 3d