公开网页里的 HTML 范例 HTML examples from public pages

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

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

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

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

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

NissyGirl：纯 HTML/CSS 的 3D 掌机演示 NissyGirl: a 3D handheld console rendered in HTML/CSS

tanishalfelven 的公开演示：用 HTML/CSS 做可交互 3D 掌机壳体与卡带流程，配自研小游戏引擎（PixiJS 画屏）与触控优先操控。Show HN 可对上；仓库开源可点进。 tanishalfelven’s public demo: an interactive 3D handheld shell and cartridge flow in HTML/CSS, plus a small game engine (PixiJS for the screen) and touch-first controls. Tied to a Show HN; source is open on GitHub.

html · css

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

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

Laser Graffiti：浏览器激光涂鸦 Laser Graffiti: draw on walls in the browser

纯浏览器激光涂鸦：鼠标当激光可当场试；也可接投影仪+摄像头校准后用真激光指针在墙上画。零依赖、MIT。刷子、墨水滴落、3D 挤出、万花筒与井字棋都有。 Browser laser graffiti: try with your mouse as the laser, or calibrate a projector + webcam and draw on a wall with a real pointer. Zero dependencies, MIT. Brushes, wet ink, 3D extrusion, kaleidoscope, and tic-tac-toe.

canvas · 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 落地页 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.

+ 精选 + 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.

+ 精选 + 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.

+ 精选 + 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.

+ 精选 + 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.

+ 精选 + Featured 游戏/互动 Game / interactive

Voronoi Go：没有网格的围棋 Voronoi Go: Go without the grid

把围棋落在 Voronoi 剖分上的网页对弈：可人机、可旁观、可通信对局。浏览器即开即玩的交互棋盘，规则与传统围棋同源但棋盘几何不同。 Play Go on a Voronoi tessellation in the browser — human vs bot, watch mode, and correspondence games. Same lineage as classic Go, different board geometry.

html · game

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

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

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 游戏/互动 Game / interactive

Flexbox Froggy Flexbox Froggy

用闯关游戏学习 CSS Flexbox：写属性把青蛙放到荷叶上。Thomas Park / Codepip 出品，开源，支持简体中文。 Learn CSS Flexbox as a game: write properties to put frogs on lily pads. By Thomas Park / Codepip, open source, with Simplified Chinese.

flexbox · css

+ 精选 + Featured 动效 Motion

Animate.css Animate.css

即加即用的跨浏览器 CSS 动画库官网：可预览 bounce、fade、flip 等类，并查看安装与无障碍说明。 Drop-in cross-browser CSS animation library site: preview bounce, fade, flip, and more, plus install and accessibility notes.

animation · css

+ 精选 + Featured 动效 Motion 作品集 Portfolio

A Single Div A Single Div

Lynn Fisher 的 CSS 绘画项目：每幅画只用一个 HTML div。既是作品集，也是纯 CSS 图形实验。 Lynn Fisher’s CSS drawing project: each picture uses one HTML div. Both a portfolio and a pure-CSS graphics experiment.

css-art · single-div

+ 精选 + 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

+ 精选 + Featured 落地页 Landing 作品集 Portfolio

HTML5 UP HTML5 UP

免费响应式 HTML5/CSS3 站点模板库：落地页、作品集等可下载模板，CCA 许可。 Free responsive HTML5/CSS3 template library: downloadable landings, portfolios, and more, CCA licensed.

templates · html5

+ 精选 + 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 游戏/互动 Game / interactive

Don't Wordle Don't Wordle

免费每日单词游戏：规则像 Wordle，但目标是避开隐藏词。绿格必须留在原位、黄格必须换位、灰格禁用；有效词池会越猜越少，猜中即败。可撤销。 A free daily word game: Wordle rules, but you lose if you guess the hidden word. Greens stay put, yellows must move, grays are banned; the valid-word pool shrinks until you get cornered. Undos allowed.

wordle · game

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

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

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

+ 精选 + Featured 工具页 Tool demo demo

Sirenfall：浏览器民防警报场景 Sirenfall: a browser civil-defense siren scene

纯浏览器民防警报场景：雨夜庇护所窗外城市，拉闸后警报塔用 Web Audio 实时合成双音（非录音）。源码单 HTML、MIT；另有 how-it-works 说明页。 A free browser scene: rainy city outside a shelter window; pull the breaker and a civil-defense siren spins up — synthesized live in Web Audio, not a recording. Single-file MIT source; how-it-works page included.

web-audio · interactive

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.