{
  "meta": {
    "updatedAt": "2026-09-12T12:15:00Z",
    "timezone": "Asia/Shanghai",
    "version": "1.3.20",
    "count": 52
  },
  "items": [
    {
      "id": "bodily-oddities",
      "slug": "bodily-oddities",
      "title": "Bodily Oddities：身体也能「怪」一点的百科",
      "titleEn": "Bodily Oddities: strange things bodies can (sometimes) do",
      "summary": "Demjan Vester 的公开互动百科：收录约 143 条人体小怪癖 / 反射 / 感知现象（耳鸣轰鸣、胃咕噜、jamais vu 等），可按身体部位与类型浏览，带「吓人但正常」「现在就能试」入口与搜索。纯前端，Show HN item 49649789（约 271 分）。",
      "summaryEn": "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).",
      "sourceUrl": "https://vester.si/bodily-oddities/",
      "secondaryUrls": [
        "https://news.ycombinator.com/item?id=49649789"
      ],
      "previewImage": "/previews/bodily-oddities.webp",
      "types": [
        "interactive",
        "docs"
      ],
      "tags": [
        "body",
        "encyclopedia",
        "interactive",
        "show-hn",
        "health-curious"
      ],
      "featured": true,
      "qualityNote": "HN Show 2026-09-10（item 49649789）。条目数「143」为站首页自述，未逐条复计；医学现象说明仅供好奇，非诊疗建议。预览为现场截图。",
      "qualityNoteEn": "Show HN 2026-09-10 (item 49649789). The “143” count is the site’s own homepage claim, not re-counted here; descriptions are curiosity notes, not medical advice. Preview is a live screenshot.",
      "publishedAt": "2026-09-10",
      "updatedAt": "2026-09-12T12:15:00Z"
    },
    {
      "id": "sparkui",
      "slug": "sparkui",
      "title": "SparkUI：给 AI Agent 用的一次性互动页（URL 即 UI）",
      "titleEn": "SparkUI: ephemeral interactive pages for AI agents (UI via URL)",
      "summary": "Limeade Labs 开源的 Agent UI 工具：Agent 一次 API / MCP 调用推送结账、计时、投票、审批等模板页，用户点开 URL 互动，结果经 WebSocket 回传，页可自毁。npm `@limeade-labs/sparkui`，宣称 11 模板 / 8 组件 / MIT；演示站公开可开。非 Grok Bot 官方件，接 MCP 以当日客户端为准。",
      "summaryEn": "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.",
      "sourceUrl": "https://sparkui.dev/",
      "secondaryUrls": [
        "https://github.com/Limeade-Labs/sparkui",
        "https://www.npmjs.com/package/@limeade-labs/sparkui"
      ],
      "previewImage": "/previews/sparkui.webp",
      "types": [
        "tool",
        "component",
        "docs"
      ],
      "tags": [
        "agent-ui",
        "mcp",
        "ephemeral",
        "open-source",
        "npm"
      ],
      "featured": true,
      "qualityNote": "2026-09-12 核对：演示站与 npm 可达；GitHub Limeade-Labs/sparkui star 很少（个位数），以站点 + npm 为主源。模板数 / 组件数为站点自述。预览为现场截图（站点无可靠 og:image）。",
      "qualityNoteEn": "Checked 2026-09-12: demo and npm reachable; GitHub Limeade-Labs/sparkui has only a few stars — treat site + npm as primary. Template/component counts are site claims. Preview is a live screenshot (no reliable og:image).",
      "publishedAt": "2026-04-17",
      "updatedAt": "2026-09-12T12:15:00Z"
    },
    {
      "id": "daub",
      "slug": "daub",
      "title": "DAUB：给 AI 用的 CSS 组件库（84 件 / llms.txt / MCP）",
      "titleEn": "DAUB: CSS component library for AI (84 parts / llms.txt / MCP)",
      "summary": "sliday 的 DAUB：两文件零构建 CSS/JS 组件库（约 84 组件、21 主题族），带 classless 模式、llms.txt、agent-skills、可复制提示与远程 MCP（generate_ui / catalog / validate / render）。演示站与 playground 公开可开；MIT。",
      "summaryEn": "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.",
      "sourceUrl": "https://daub.dev/",
      "secondaryUrls": [
        "https://github.com/sliday/daub",
        "https://daub.dev/llms.txt",
        "https://daub.dev/demo.html"
      ],
      "previewImage": "/previews/daub.webp",
      "types": [
        "component",
        "docs",
        "tool"
      ],
      "tags": [
        "css",
        "ai-docs",
        "mcp",
        "zero-build",
        "llms-txt"
      ],
      "featured": true,
      "qualityNote": "公开演示与 GitHub（2026-09-11 核对约 41 star）。面向 Agent 的 llms.txt / MCP 是亮点；组件数与主题数为站点自述。",
      "qualityNoteEn": "Public demo + GitHub (~41 stars checked 2026-09-11). Agent-facing llms.txt / MCP are the draw; component and theme counts are site claims.",
      "publishedAt": "2026-09-11",
      "updatedAt": "2026-09-11T01:10:00Z"
    },
    {
      "id": "njx-ui",
      "slug": "njx-ui",
      "title": "njX UI：CDN 落地页 CSS 库（30+ 组件 / 9 主题）",
      "titleEn": "njX UI: CDN landing-page CSS kit (30+ components / 9 themes)",
      "summary": "njX UI：一条 CDN 链即可拼落地页的 CSS 优先库——按钮 / 卡片 / 表单 / 动效 / 渐变 / Hero 块，九套 data-theme，可选 Alpine 预设。本页即完整预览，npm 包 `njx-ui`。无框架、无构建。",
      "summaryEn": "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.",
      "sourceUrl": "https://njxui.dev/",
      "secondaryUrls": [
        "https://www.npmjs.com/package/njx-ui"
      ],
      "previewImage": "/previews/njx-ui.webp",
      "types": [
        "component",
        "docs",
        "landing"
      ],
      "tags": [
        "css",
        "cdn",
        "landing",
        "themes",
        "zero-build"
      ],
      "featured": true,
      "qualityNote": "演示站与 npm 公开可开（2026-09-11）。组件数 / 体积为站点自述；未找到独立开源仓库页时以 npm + 演示站为准。",
      "qualityNoteEn": "Demo and npm are public (2026-09-11). Component counts and bundle size are site claims; when no separate public repo page is found, treat npm + demo as the source.",
      "publishedAt": "2026-09-11",
      "updatedAt": "2026-09-11T01:10:00Z"
    },
    {
      "id": "relativity-park",
      "slug": "relativity-park",
      "title": "Relativity Park：光速降到步行时的狭义相对论",
      "titleEn": "Relativity Park: special relativity when light walks",
      "summary": "Dmitry Brant 的公开互动演示：把光速压到 5 km/h（约步行速度），在公园视角里用 WASD 加速，观察洛伦兹收缩、光行差、多普勒变色与相对论光束效应，各效应可单独开关。Show HN 当日上过热榜（item 49637385）；纯前端可打开，无需登录。",
      "summaryEn": "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.",
      "sourceUrl": "https://rivendell.dmitrybrant.com/relativity/",
      "secondaryUrls": [
        "https://news.ycombinator.com/item?id=49637385"
      ],
      "previewImage": "/previews/relativity-park.webp",
      "types": [
        "interactive",
        "tool"
      ],
      "tags": [
        "physics",
        "relativity",
        "canvas",
        "demo",
        "show-hn"
      ],
      "featured": true,
      "qualityNote": "HN item 49637385（Show HN: What if the speed of light was 5 km/h?）。演示公开可打开；物理教学用途，非论文复现。预览来自现场截图（无 og:image）。",
      "qualityNoteEn": "HN item 49637385 (Show HN: What if the speed of light was 5 km/h?). Demo is publicly open; physics-teaching demo, not a paper reproduction. Preview is a live screenshot (site has no og:image).",
      "publishedAt": "2026-09-10",
      "updatedAt": "2026-09-10T12:00:00Z"
    },
    {
      "id": "roadwright",
      "slug": "roadwright",
      "title": "Roadwright：画轮子，看它滚出的路面",
      "titleEn": "Roadwright: draw a wheel, see the road it rolls on",
      "summary": "Basel Ashraf 的浏览器几何小品：手绘（或选一个）轮子轮廓并放好轴心，即时算出该轮无滑滚动时对应的路面曲线，可调滚速、双轮轴距、路面倾斜，并导出 PNG / 切割文件 / 录制循环。纯前端互动；Show HN item 49641755，仓库开源。",
      "summaryEn": "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.",
      "sourceUrl": "https://baselashraf.com/roadwright/",
      "secondaryUrls": [
        "https://github.com/BaselAshraf81/roadwright",
        "https://news.ycombinator.com/item?id=49641755"
      ],
      "previewImage": "/previews/roadwright.webp",
      "types": [
        "interactive",
        "tool"
      ],
      "tags": [
        "geometry",
        "canvas",
        "wheel",
        "math",
        "demo",
        "show-hn"
      ],
      "featured": true,
      "qualityNote": "HN item 49641755（Show HN: Draw a wheel. See the road it rolls on）。公开可打开，GitHub 可点进。预览由站点 og 图（1200×630）加边裁成 3:2。",
      "qualityNoteEn": "HN item 49641755 (Show HN: Draw a wheel. See the road it rolls on). Publicly open; GitHub repo linked. Preview is the site’s og image (1200×630) letterboxed to 3:2.",
      "publishedAt": "2026-09-10",
      "updatedAt": "2026-09-10T12:00:00Z"
    },
    {
      "id": "shadcss",
      "slug": "shadcss",
      "title": "shadcss：无 JS 的 shadcn 风 HTML/CSS 组件",
      "titleEn": "shadcss: shadcn-look HTML/CSS with zero JS framework",
      "summary": "russfranky 的 MIT 组件库：把 shadcn/ui 视觉搬到纯 HTML/CSS（`:has()`、Popover API、原生 dialog、设计 token），面向 SSR / HTMX / Astro / AI 生成页。演示站公开可打开，声称数十个组件、gzip 十多 KB、零运行时依赖。",
      "summaryEn": "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.",
      "sourceUrl": "https://shadcss.vercel.app/",
      "secondaryUrls": [
        "https://github.com/russfranky/shadcss-ui",
        "https://shadcss.vercel.app/docs/"
      ],
      "previewImage": "/previews/shadcss.webp",
      "types": [
        "component",
        "docs"
      ],
      "tags": [
        "css",
        "html",
        "shadcn",
        "zero-js",
        "ai-apps"
      ],
      "featured": true,
      "qualityNote": "演示与 GitHub 公开可打开（MIT）。组件数/体积以站点当日自述为准。",
      "qualityNoteEn": "Demo and GitHub are publicly open (MIT). Component counts/size are the site’s own claims on the day checked.",
      "publishedAt": "2026-09-10",
      "updatedAt": "2026-09-10T01:40:00Z"
    },
    {
      "id": "nissy-girl",
      "slug": "nissy-girl",
      "title": "NissyGirl：纯 HTML/CSS 的 3D 掌机演示",
      "titleEn": "NissyGirl: a 3D handheld console rendered in HTML/CSS",
      "summary": "tanishalfelven 的公开演示：用 HTML/CSS 做可交互 3D 掌机壳体与卡带流程，配自研小游戏引擎（PixiJS 画屏）与触控优先操控。Show HN 可对上；仓库开源可点进。",
      "summaryEn": "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.",
      "sourceUrl": "https://nissygirl.com/",
      "secondaryUrls": [
        "https://github.com/tanishalfelven/nissy-girl/",
        "https://news.ycombinator.com/item?id=49611054"
      ],
      "previewImage": "/previews/nissy-girl.webp",
      "types": [
        "interactive",
        "demo"
      ],
      "tags": [
        "html",
        "css",
        "3d",
        "gameboy",
        "hacker-news"
      ],
      "featured": true,
      "qualityNote": "HN item 49611054。演示站与 GitHub 公开可打开。来自 Hacker News。",
      "qualityNoteEn": "HN item 49611054. Demo and GitHub are publicly open. From Hacker News.",
      "publishedAt": "2026-09-10",
      "updatedAt": "2026-09-10T01:40:00Z"
    },
    {
      "id": "maple-css",
      "slug": "maple-css",
      "title": "Maple：零构建原子 CSS",
      "titleEn": "Maple: zero-build atomic CSS",
      "summary": "f12io 的 Maple：浏览器内按 DOM 出现的工具类即时生成原子 CSS，无需构建与配置文件；可变优先、OKLCH 调色与混合暗色模式。演示站可公开打开。",
      "summaryEn": "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.",
      "sourceUrl": "https://maple.f12.io/",
      "secondaryUrls": [
        "https://github.com/f12io/maple",
        "https://news.ycombinator.com/item?id=49612277"
      ],
      "previewImage": "/previews/maple-css.webp",
      "types": [
        "component",
        "docs",
        "interactive"
      ],
      "tags": [
        "css",
        "atomic",
        "zero-build",
        "hacker-news"
      ],
      "featured": true,
      "qualityNote": "HN item 49612277。演示与 GitHub 公开可打开。来自 Hacker News。",
      "qualityNoteEn": "HN item 49612277. Demo and GitHub are publicly open. From Hacker News.",
      "publishedAt": "2026-09-09",
      "updatedAt": "2026-09-09T01:15:00Z"
    },
    {
      "id": "topological-picture-book",
      "slug": "topological-picture-book",
      "title": "Topological Picture Book：钢笔拓扑曲面",
      "titleEn": "Topological Picture Book: pen-and-ink topology surfaces",
      "summary": "e-infinity 的拓扑图画书：钢笔素描风格的拓扑曲面与空间，可在浏览器里翻页浏览。公开可玩。",
      "summaryEn": "e-infinity’s topological picture book: pen-and-ink topology surfaces and spaces, browsable in the browser. Publicly open.",
      "sourceUrl": "https://e-infinity.space/picture-book/",
      "secondaryUrls": [
        "https://news.ycombinator.com/item?id=49618050",
        "https://e-infinity.space/"
      ],
      "previewImage": "/previews/topological-picture-book.webp",
      "types": [
        "interactive",
        "demo",
        "docs"
      ],
      "tags": [
        "topology",
        "illustration",
        "interactive",
        "hacker-news"
      ],
      "featured": true,
      "qualityNote": "HN item 49618050。公开可打开。来自 Hacker News。",
      "qualityNoteEn": "HN item 49618050. Publicly open. From Hacker News.",
      "publishedAt": "2026-09-09",
      "updatedAt": "2026-09-09T01:15:00Z"
    },
    {
      "id": "laser-graffiti",
      "slug": "laser-graffiti",
      "title": "Laser Graffiti：浏览器激光涂鸦",
      "titleEn": "Laser Graffiti: draw on walls in the browser",
      "summary": "纯浏览器激光涂鸦：鼠标当激光可当场试；也可接投影仪+摄像头校准后用真激光指针在墙上画。零依赖、MIT。刷子、墨水滴落、3D 挤出、万花筒与井字棋都有。",
      "summaryEn": "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.",
      "types": [
        "interactive",
        "demo"
      ],
      "sourceUrl": "https://laser.consti.de/",
      "secondaryUrls": [
        "https://news.ycombinator.com/item?id=49489376",
        "https://consti.de"
      ],
      "previewImage": "/previews/laser-graffiti.webp",
      "featured": true,
      "publishedAt": "2026-08-29",
      "updatedAt": "2026-09-03T01:10:00Z",
      "qualityNote": "Show HN item 49489376（约 250 分，2026-08-29）。公开可玩；作者自述页面文案多为 AI 生成。来自 Hacker News。",
      "qualityNoteEn": "Show HN item 49489376 (~250 pts, 2026-08-29). Publicly playable; author notes most page copy is AI-written. From Hacker News.",
      "tags": [
        "canvas",
        "interactive",
        "hacker-news",
        "mit"
      ]
    },
    {
      "id": "ambient-css",
      "slug": "ambient-css",
      "title": "Ambient CSS v3：物理光照 CSS",
      "titleEn": "Ambient CSS v3: physically based CSS",
      "summary": "kikkupico 的物理光照 CSS：共享 key/fill 光，阴影与表面梯度跟着光向走。演示页可调材质、厚度、边缘与旋钮面板；另有纯 CSS 包与 React 组件。",
      "summaryEn": "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.",
      "types": [
        "component",
        "interactive",
        "docs"
      ],
      "sourceUrl": "https://ambientcss.vercel.app/",
      "secondaryUrls": [
        "https://github.com/kikkupico/ambientcss",
        "https://kikkupico.github.io/ambientcss/",
        "https://news.ycombinator.com/item?id=49523387"
      ],
      "previewImage": "/previews/ambient-css.webp",
      "featured": true,
      "publishedAt": "2026-09-01",
      "updatedAt": "2026-09-02T01:10:00Z",
      "qualityNote": "Show HN（item 49523387，约 191 分，2026-09-01）。演示页与 GitHub 均可公开打开。来自 Hacker News。",
      "qualityNoteEn": "Show HN (item 49523387, ~191 pts on 2026-09-01). Demo and GitHub are publicly open. From Hacker News.",
      "tags": [
        "css",
        "skeuomorphic",
        "lighting",
        "hacker-news"
      ]
    },
    {
      "id": "millenium-bug",
      "slug": "millenium-bug",
      "title": "Millenium Bug：90 年代银行风 CSS",
      "titleEn": "Millenium Bug: retro-banking CSS",
      "summary": "无依赖 classless-first CSS，把语义 HTML 收成 90 年代末银行后台：嵌套灰字段、钴蓝页签、荧光黄高亮。一文件、零构建。",
      "summaryEn": "A dependency-free, classless-first CSS kit that restyles semantic HTML as late-90s bank back-office UI: nested gray fieldsets, cobalt tabs, fluorescent yellow highlights. One file, zero build.",
      "types": [
        "component"
      ],
      "sourceUrl": "https://mtct.github.io/millenium-bug/demo/index.html",
      "secondaryUrls": [
        "https://github.com/mtct/millenium-bug",
        "https://news.ycombinator.com/item?id=49037395"
      ],
      "previewImage": "/previews/millenium-bug.webp",
      "featured": false,
      "publishedAt": "2026-07-24",
      "updatedAt": "2026-08-31T01:28:18Z",
      "qualityNote": "Show HN 复古 CSS 样式库（item 49037395）。演示页即组件画廊。来自 Hacker News。",
      "qualityNoteEn": "Show HN retro CSS stylesheet (item 49037395). The demo page is the component gallery. From Hacker News.",
      "tags": [
        "css",
        "retro",
        "classless",
        "hacker-news"
      ]
    },
    {
      "id": "single-file-saas",
      "slug": "single-file-saas",
      "title": "Single-File SaaS：单文件 BYOK 模板",
      "titleEn": "Single-File SaaS: BYOK in one HTML file",
      "summary": "一整套 BYOK SaaS 脚手架塞进一个 HTML：免费日限额、License 解锁 Pro、密钥只留在当前标签页内存。可直接打开演示页。",
      "summaryEn": "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.",
      "types": [
        "tool",
        "interactive"
      ],
      "sourceUrl": "https://0xelitesystem.github.io/single-file-saas-template/",
      "secondaryUrls": [
        "https://github.com/0xelitesystem/single-file-saas-template"
      ],
      "previewImage": "/previews/single-file-saas.webp",
      "featured": false,
      "publishedAt": "2026-08-28",
      "updatedAt": "2026-08-31T01:28:18Z",
      "qualityNote": "可公开访问的单文件 SaaS 骨架，适合 Agent 当落地页/工具壳参考。",
      "qualityNoteEn": "A publicly reachable single-file SaaS skeleton — useful Agent reference for landing pages and tool shells.",
      "tags": [
        "single-file",
        "saas",
        "byok",
        "html"
      ]
    },
    {
      "id": "motionsites",
      "slug": "motionsites",
      "title": "MotionSites",
      "titleEn": "MotionSites",
      "summary": "现成落地页提示库，给 Lovable / Bolt / Cursor / Claude 复制即用。分类有落地页、Hero、页脚、SaaS，偏电影感和 3D 动效。",
      "summaryEn": "Ready-to-use landing-page prompts for Lovable, Bolt, Cursor, and Claude. Browse landing pages, heroes, footers, SaaS — cinematic and 3D motion.",
      "types": [
        "tool",
        "landing"
      ],
      "sourceUrl": "https://motionsites.ai/",
      "secondaryUrls": [
        "https://x.com/viktoroddy/status/2075545587093807111",
        "https://x.com/alextalksai/status/2093583622691283018",
        "https://getdesign.ai/"
      ],
      "previewImage": "/previews/motionsites.webp",
      "featured": true,
      "publishedAt": "2026-07-10",
      "updatedAt": "2026-08-30T01:42:00Z",
      "qualityNote": "Alex talks AI 转发 Viktor Oddy 的 21 分钟 GPT-5.6 Sol 电影感网页教程。库本身标 Premium，首页可浏览样本。同作者还有 Get Design 浏览器扩展（付费）。",
      "qualityNoteEn": "Alex talks AI shared Viktor Oddy’s 21-min GPT-5.6 Sol tutorial on cinematic websites. The library is marked Premium; samples are browseable on the homepage. Same author: Get Design, a paid Chrome extension.",
      "tags": [
        "html",
        "design",
        "tool",
        "prompts"
      ]
    },
    {
      "id": "meigen",
      "slug": "meigen",
      "title": "MeiGen",
      "titleEn": "MeiGen",
      "summary": "免费 GPT Image 2 / Nano Banana / Seedance 2.5 提示画廊。按广告、品牌、视频、插画、海报、人像分类，复制即用。另有 MCP、Skills、Figma 插件。",
      "summaryEn": "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.",
      "types": [
        "tool"
      ],
      "sourceUrl": "https://www.meigen.ai/",
      "secondaryUrls": [
        "https://github.com/jau123/MeiGen-AI-Design-MCP",
        "https://x.com/alextalksai/status/2093291745677119828"
      ],
      "previewImage": "/previews/meigen.webp",
      "featured": true,
      "publishedAt": "2026-08-29",
      "updatedAt": "2026-08-29T04:36:00Z",
      "qualityNote": "Alex talks AI 推荐。免费浏览。配套 MCP 仓库 jau123/MeiGen-AI-Design-MCP，MIT，1723 star。",
      "qualityNoteEn": "Shared by Alex talks AI. Free to browse. Companion MCP repo jau123/MeiGen-AI-Design-MCP, MIT, 1,723 stars.",
      "tags": [
        "html",
        "design",
        "tool",
        "prompts"
      ]
    },
    {
      "id": "refero-styles",
      "slug": "refero-styles",
      "title": "Refero Styles",
      "titleEn": "Refero Styles",
      "summary": "2000+ 份从真实产品站抽出来的 DESIGN.md：颜色、字体、间距、组件，给 Cursor / Claude Code / Codex 直接读。",
      "summaryEn": "2,000+ DESIGN.md files pulled from real product sites — colors, type, spacing, components — readable by Cursor, Claude Code, and Codex.",
      "types": [
        "tool",
        "docs"
      ],
      "sourceUrl": "https://styles.refero.design",
      "secondaryUrls": [
        "https://x.com/AdhamDannaway/status/2093343847262929064",
        "https://x.com/Abmankendrick/status/2094370220739633541"
      ],
      "previewImage": "/previews/refero-styles.webp",
      "featured": true,
      "publishedAt": "2026-08-28",
      "updatedAt": "2026-09-01T03:24:00Z",
      "qualityNote": "Adham Dannaway 推荐。Mike Bespalov 做的，免费浏览。给 Agent 的设计系统样本库，不是 Taste Skill 那种纪律包。Abraham John（@Abmankendrick）8/31 又推了一遍：给 Cursor / Claude Code / v0 / Lovable 贴 DESIGN.md。",
      "qualityNoteEn": "Shared by Adham Dannaway. Built by Mike Bespalov; free to browse. A library of design-system samples for agents, not a taste-rules pack like Taste Skill. Abraham John (@Abmankendrick) reshared it on 31 Aug for Cursor / Claude Code / v0 / Lovable paste-in.",
      "tags": [
        "html",
        "design",
        "tool",
        "design-tokens"
      ]
    },
    {
      "id": "taste-skill",
      "slug": "taste-skill",
      "title": "Taste Skill",
      "titleEn": "Taste Skill",
      "summary": "给编程助手装上设计品味的 Anti-Slop 技能包。13 个 Skill：代码实现（含 soft / minimalist / brutalist）和图像参考稿。先读简报，再映射设计系统，出厂前约 60 项检查。",
      "summaryEn": "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.",
      "types": [
        "tool",
        "docs"
      ],
      "sourceUrl": "https://tasteskill.dev",
      "secondaryUrls": [
        "https://github.com/Leonxlnx/taste-skill",
        "https://x.com/shao__meng/status/2093148263621017886"
      ],
      "previewImage": "/previews/taste-skill.webp",
      "featured": true,
      "publishedAt": "2026-02-19",
      "updatedAt": "2026-08-28T02:12:00Z",
      "qualityNote": "meng shao 推荐。MIT，约 8.2 万 star。可直接给 Cursor / Claude Code 用。",
      "qualityNoteEn": "Shared by meng shao. MIT, ~82k GitHub stars. Drop-in for Cursor / Claude Code.",
      "tags": [
        "html",
        "design",
        "tool",
        "skill"
      ]
    },
    {
      "id": "open-design",
      "slug": "open-design",
      "title": "OpenDesign",
      "titleEn": "OpenDesign",
      "summary": "开源 Claude Design 替代：本机优先的桌面应用，用已有的编程助手生成落地页、仪表盘、幻灯片、图片和视频，导出 HTML / PDF / PPTX / MP4。自带 BYOK，接 20 多种 CLI。",
      "summaryEn": "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.",
      "types": [
        "tool"
      ],
      "sourceUrl": "https://open-design.ai",
      "secondaryUrls": [
        "https://github.com/nexu-io/open-design",
        "https://x.com/sunmer575399/status/2092924093427536109"
      ],
      "previewImage": "/previews/open-design.webp",
      "featured": true,
      "publishedAt": "2026-04-28",
      "updatedAt": "2026-08-28T01:25:00Z",
      "qualityNote": "sunmer 推荐。Apache-2.0，GitHub 约 9.2 万 star。本机优先，数据不出机器。",
      "qualityNoteEn": "Recommended by sunmer. Apache-2.0, ~92k GitHub stars. Local-first — files stay on the machine.",
      "tags": [
        "html",
        "design",
        "tool",
        "desktop"
      ]
    },
    {
      "id": "voronoi-go",
      "slug": "voronoi-go",
      "title": "Voronoi Go：没有网格的围棋",
      "titleEn": "Voronoi Go: Go without the grid",
      "summary": "把围棋落在 Voronoi 剖分上的网页对弈：可人机、可旁观、可通信对局。浏览器即开即玩的交互棋盘，规则与传统围棋同源但棋盘几何不同。",
      "summaryEn": "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.",
      "types": [
        "interactive"
      ],
      "sourceUrl": "https://voronoigo.com/",
      "secondaryUrls": [
        "https://voronoigo.com/play",
        "https://news.ycombinator.com/item?id=49468816"
      ],
      "previewImage": "/previews/voronoi-go.webp",
      "featured": true,
      "publishedAt": "2026-08-27",
      "updatedAt": "2026-08-28T01:10:00Z",
      "qualityNote": "Show HN（item 49468816，约 79 分）。可公开访问的交互棋盘；今日 HN Show 前列。由 Hacker News 发现。",
      "qualityNoteEn": "Show HN (item 49468816, ~79 points). Public interactive board; near the top of today’s Show HN. Found via Hacker News.",
      "tags": [
        "html",
        "game",
        "interactive",
        "hacker-news"
      ]
    },
    {
      "id": "glassbox",
      "slug": "glassbox",
      "title": "GlassBox：浏览器指纹台",
      "titleEn": "GlassBox: browser fingerprint bench",
      "summary": "单页静态 HTML：在浏览器里跑约 31 项探针（canvas、WebGL/WebGPU、音频、字体、WASM、WebRTC IP 等），展示原始值与可识别度估计。默认本地运行，仅 IP 地理可选外联；MIT 源码。",
      "summaryEn": "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.",
      "types": [
        "interactive",
        "tool"
      ],
      "sourceUrl": "https://glassbox.codecanary.org",
      "secondaryUrls": [
        "https://github.com/HotStartLabs/glassbox",
        "https://news.ycombinator.com/item?id=49421948"
      ],
      "previewImage": "/previews/glassbox.webp",
      "featured": true,
      "publishedAt": "2026-08-24",
      "updatedAt": "2026-08-28T01:10:00Z",
      "qualityNote": "Show HN（item 49421948，约 131 分）。单文件、无构建、MIT；适合当「浏览器能暴露什么」的可玩演示。由 Hacker News 发现。",
      "qualityNoteEn": "Show HN (item 49421948, ~131 points). Single file, no build, MIT — a playable demo of what a browser exposes. Found via Hacker News.",
      "tags": [
        "html",
        "single-file",
        "privacy",
        "fingerprint",
        "webgl",
        "hacker-news",
        "mit"
      ]
    },
    {
      "id": "designlang",
      "slug": "designlang",
      "title": "DesignLang",
      "titleEn": "DesignLang",
      "summary": "开源 CLI：对任意网址跑一遍 headless Chromium，抽出完整设计系统。DTCG token、Tailwind、CSS 变量、Figma、SwiftUI / Compose / Flutter，以及给 Cursor 的 MCP。",
      "summaryEn": "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.",
      "types": [
        "tool",
        "docs"
      ],
      "sourceUrl": "https://designlang.app",
      "secondaryUrls": [
        "https://github.com/Manavarya09/design-extract",
        "https://x.com/ricouii/status/2092803349636927589"
      ],
      "featured": true,
      "publishedAt": "2026-08-27",
      "updatedAt": "2026-08-27T15:36:00Z",
      "qualityNote": "RicoUI 推荐。MIT，npx designlang stripe.com 即可，不用注册。站点演示有限额，CLI 不限。",
      "qualityNoteEn": "Recommended by RicoUI. MIT; `npx designlang stripe.com` — no signup. The hosted demo is rate-limited; the CLI is not.",
      "tags": [
        "css",
        "design",
        "design-tokens",
        "tool"
      ],
      "previewImage": "/previews/designlang.webp"
    },
    {
      "id": "poster-comp-vol1",
      "slug": "poster-comp-vol1",
      "title": "海报构图手册 · 上册",
      "titleEn": "Poster Composition Handbook Vol. 1",
      "summary": "Adrian Punk 的 AI 海报 / HTML 构图手册上册：16 种控制焦点、平衡、几何骨架和视线动势的构图，每条带图像模型与 HTML/CSS 提示词。",
      "summaryEn": "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.",
      "types": [
        "docs",
        "tool"
      ],
      "sourceUrl": "https://x.com/i/article/2092171190270087168",
      "secondaryUrls": [
        "https://x.com/AdrianPunk115/status/2092176129083982108",
        "https://x.com/i/article/2092639663274233856"
      ],
      "featured": true,
      "publishedAt": "2026-08-25",
      "updatedAt": "2026-08-27T15:35:00Z",
      "qualityNote": "把构图写成可执行提示词，而不是堆风格词。适合收进 HTML 收集当「怎么用 CSS Grid 落构图」的参考。",
      "qualityNoteEn": "Turns composition into executable prompts instead of style-word piles. Fits HTML 收集 as a reference for landing a layout in CSS Grid.",
      "tags": [
        "css",
        "grid",
        "design",
        "html"
      ],
      "previewImage": "/previews/poster-comp-vol1.webp"
    },
    {
      "id": "poster-comp-vol2",
      "slug": "poster-comp-vol2",
      "title": "海报构图手册 · 下册",
      "titleEn": "Poster Composition Handbook Vol. 2",
      "summary": "下册 16 种：网格系统、图文关系和信息密度。构图管阅读路径，Grid 管对齐与复用；给图像模型一套，给 HTML/CSS 一套。",
      "summaryEn": "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.",
      "types": [
        "docs",
        "tool"
      ],
      "sourceUrl": "https://x.com/i/article/2092639663274233856",
      "secondaryUrls": [
        "https://x.com/AdrianPunk115/status/2092847810261725478",
        "https://x.com/i/article/2092171190270087168"
      ],
      "featured": true,
      "publishedAt": "2026-08-27",
      "updatedAt": "2026-08-27T15:35:00Z",
      "qualityNote": "风间那条之后 Hao 点的相关手册。下册更适合信息量大的海报和 HTML 落地页。",
      "qualityNoteEn": "The related handbook Hao pointed at after the Buttermax thread. Vol. 2 fits dense posters and HTML landing pages.",
      "tags": [
        "css",
        "grid",
        "design",
        "html"
      ],
      "previewImage": "/previews/poster-comp-vol2.webp"
    },
    {
      "id": "flexbox-froggy",
      "slug": "flexbox-froggy",
      "title": "Flexbox Froggy",
      "summary": "用闯关游戏学习 CSS Flexbox：写属性把青蛙放到荷叶上。Thomas Park / Codepip 出品，开源，支持简体中文。",
      "types": [
        "interactive"
      ],
      "sourceUrl": "https://flexboxfroggy.com/",
      "secondaryUrls": [
        "https://github.com/thomaspark/flexboxfroggy/"
      ],
      "featured": true,
      "stars": 4,
      "publishedAt": "2015-11-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "经典互动教学页，适合收集「游戏/互动」类 HTML 学习界面。",
      "tags": [
        "flexbox",
        "css",
        "game",
        "codepip"
      ],
      "previewImage": "/previews/flexbox-froggy.webp",
      "titleEn": "Flexbox Froggy",
      "summaryEn": "Learn CSS Flexbox as a game: write properties to put frogs on lily pads. By Thomas Park / Codepip, open source, with Simplified Chinese.",
      "qualityNoteEn": "A classic interactive teaching page. Fits the “game / interactive” HTML learning UI collection."
    },
    {
      "id": "css-grid-garden",
      "slug": "css-grid-garden",
      "title": "CSS Grid Garden",
      "summary": "用浇水闯关学习 CSS Grid。与 Flexbox Froggy 同一作者系列，开源，可在浏览器里直接玩。",
      "types": [
        "interactive"
      ],
      "sourceUrl": "https://cssgridgarden.com/",
      "secondaryUrls": [
        "https://github.com/thomaspark/gridgarden/"
      ],
      "featured": false,
      "publishedAt": "2017-04-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "Grid 布局的对照练习页，URL 长期稳定。",
      "tags": [
        "grid",
        "css",
        "game",
        "codepip"
      ],
      "previewImage": "/previews/css-grid-garden.webp",
      "titleEn": "CSS Grid Garden",
      "summaryEn": "Learn CSS Grid by watering a garden. Same author series as Flexbox Froggy, open source, playable in the browser.",
      "qualityNoteEn": "A counterpart practice page for Grid layout. The URL has been stable for years."
    },
    {
      "id": "animate-css",
      "slug": "animate-css",
      "title": "Animate.css",
      "summary": "即加即用的跨浏览器 CSS 动画库官网：可预览 bounce、fade、flip 等类，并查看安装与无障碍说明。",
      "types": [
        "motion"
      ],
      "sourceUrl": "https://animate.style/",
      "secondaryUrls": [
        "https://github.com/animate-css/animate.css"
      ],
      "featured": true,
      "publishedAt": "2011-10-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "动效类参考站，示范如何用纯 CSS class 展示动画。",
      "tags": [
        "animation",
        "css",
        "library"
      ],
      "previewImage": "/previews/animate-css.webp",
      "titleEn": "Animate.css",
      "summaryEn": "Drop-in cross-browser CSS animation library site: preview bounce, fade, flip, and more, plus install and accessibility notes.",
      "qualityNoteEn": "A motion reference site that shows how to demo animations with plain CSS classes."
    },
    {
      "id": "a-single-div",
      "slug": "a-single-div",
      "title": "A Single Div",
      "summary": "Lynn Fisher 的 CSS 绘画项目：每幅画只用一个 HTML div。既是作品集，也是纯 CSS 图形实验。",
      "types": [
        "motion",
        "portfolio"
      ],
      "sourceUrl": "https://a.singlediv.com/",
      "secondaryUrls": [
        "https://github.com/lynnandtonic/a-single-div"
      ],
      "featured": true,
      "publishedAt": "2014-10-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "展示 HTML+CSS 极限表达的作品集，源码公开。",
      "tags": [
        "css-art",
        "single-div",
        "portfolio"
      ],
      "previewImage": "/previews/a-single-div.webp",
      "titleEn": "A Single Div",
      "summaryEn": "Lynn Fisher’s CSS drawing project: each picture uses one HTML div. Both a portfolio and a pure-CSS graphics experiment.",
      "qualityNoteEn": "A portfolio that shows how far HTML+CSS can go. Source is public."
    },
    {
      "id": "pico-css",
      "slug": "pico-css",
      "title": "Pico CSS",
      "summary": "面向语义 HTML 的极简 CSS 框架官网：几乎不用 class，直接美化原生表单、按钮与排版。",
      "types": [
        "component",
        "docs"
      ],
      "sourceUrl": "https://picocss.com/",
      "featured": false,
      "publishedAt": "2019-06-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "适合对照「少 class、多语义标签」的组件/文档站写法。",
      "tags": [
        "framework",
        "semantic-html",
        "css"
      ],
      "previewImage": "/previews/pico-css.webp",
      "titleEn": "Pico CSS",
      "summaryEn": "Minimal CSS framework site for semantic HTML: almost no classes, styles native forms, buttons, and type directly.",
      "qualityNoteEn": "Useful for comparing “few classes, more semantic tags” component/docs writing."
    },
    {
      "id": "shoelace",
      "slug": "shoelace",
      "title": "Shoelace",
      "summary": "基于 Web Components 的开源组件库文档站（现导向 Web Awesome）。可用 CDN 直接插入 <sl-button> 等自定义元素。",
      "types": [
        "component",
        "docs"
      ],
      "sourceUrl": "https://shoelace.style/",
      "featured": false,
      "publishedAt": "2020-02-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "框架无关的 HTML 自定义元素示范；站点本身也是组件文档页。",
      "tags": [
        "web-components",
        "design-system"
      ],
      "previewImage": "/previews/shoelace.webp",
      "titleEn": "Shoelace",
      "summaryEn": "Open-source Web Components library docs (now pointing to Web Awesome). Drop custom elements such as <sl-button> in via CDN.",
      "qualityNoteEn": "A framework-agnostic custom-element demo; the site itself is a component docs page."
    },
    {
      "id": "mdn-css-examples",
      "slug": "mdn-css-examples",
      "title": "MDN CSS Examples",
      "summary": "MDN CSS 文档配套的可运行示例仓库页：含 object-fit、overscroll、计数器样式与小工具等独立 HTML 演示。",
      "types": [
        "docs",
        "tool"
      ],
      "sourceUrl": "https://mdn.github.io/css-examples/",
      "secondaryUrls": [
        "https://github.com/mdn/css-examples"
      ],
      "featured": true,
      "stars": 4,
      "publishedAt": "2018-01-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "官方文档站的示例索引，链接稳定，适合作为 HTML 演示收集入口。",
      "tags": [
        "mdn",
        "css",
        "examples"
      ],
      "previewImage": "/previews/mdn-css-examples.webp",
      "titleEn": "MDN CSS Examples",
      "summaryEn": "Runnable example index that accompanies MDN’s CSS docs: standalone HTML demos for object-fit, overscroll, counter styles, and small tools.",
      "qualityNoteEn": "An official docs example index with stable links. A good HTML-demo collection entry."
    },
    {
      "id": "html5up",
      "slug": "html5up",
      "title": "HTML5 UP",
      "summary": "免费响应式 HTML5/CSS3 站点模板库：落地页、作品集等可下载模板，CCA 许可。",
      "types": [
        "landing",
        "portfolio"
      ],
      "sourceUrl": "https://html5up.net/",
      "featured": true,
      "publishedAt": "2013-01-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "长期维护的开源模板目录，适合收集落地页与作品集 HTML。",
      "tags": [
        "templates",
        "html5",
        "responsive"
      ],
      "previewImage": "/previews/html5up.webp",
      "titleEn": "HTML5 UP",
      "summaryEn": "Free responsive HTML5/CSS3 template library: downloadable landings, portfolios, and more, CCA licensed.",
      "qualityNoteEn": "A long-maintained open template directory. Fits landing and portfolio HTML."
    },
    {
      "id": "open-props",
      "slug": "open-props",
      "title": "Open Props",
      "summary": "Adam Argyle 的 CSS 变量设计令牌项目官网：颜色、阴影、动画等 props 可直接引入普通 HTML 页。",
      "types": [
        "docs",
        "component"
      ],
      "sourceUrl": "https://open-props.style/",
      "secondaryUrls": [
        "https://github.com/argyleink/open-props"
      ],
      "featured": false,
      "publishedAt": "2021-08-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "文档站本身演示令牌与组件用法，适合对照设计系统页。",
      "tags": [
        "design-tokens",
        "css-variables"
      ],
      "previewImage": "/previews/open-props.webp",
      "titleEn": "Open Props",
      "summaryEn": "Adam Argyle’s CSS-variable design-token site: colors, shadows, motion, and other props you can drop into a plain HTML page.",
      "qualityNoteEn": "The docs site itself demos tokens and components. Useful as a design-system page comparison."
    },
    {
      "id": "shadow-palette",
      "slug": "shadow-palette",
      "title": "CSS Shadow Palette Generator",
      "summary": "Josh Comeau 的阴影色板生成器：调整高度与光线后复制 CSS 自定义属性，工具页即用。",
      "types": [
        "tool"
      ],
      "sourceUrl": "https://www.joshwcomeau.com/shadow-palette/",
      "featured": false,
      "publishedAt": "2021-09-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "高质量前端工具页，输出可直接用于 HTML/CSS。",
      "tags": [
        "shadow",
        "generator",
        "css"
      ],
      "previewImage": "/previews/shadow-palette.webp",
      "titleEn": "CSS Shadow Palette Generator",
      "summaryEn": "Josh Comeau’s shadow-palette generator: tune height and light, then copy CSS custom properties. A ready-to-use tool page.",
      "qualityNoteEn": "A high-quality front-end tool page. Output can go straight into HTML/CSS."
    },
    {
      "id": "threejs-examples",
      "slug": "threejs-examples",
      "title": "three.js examples",
      "summary": "three.js 官方示例墙：大量可在浏览器运行的 WebGL / HTML 互动演示，可点进查看源码。",
      "types": [
        "interactive"
      ],
      "sourceUrl": "https://threejs.org/examples/",
      "secondaryUrls": [
        "https://github.com/mrdoob/three.js"
      ],
      "featured": false,
      "publishedAt": "2010-04-01",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "官方互动示例索引，适合收集 3D/游戏向 HTML 演示。",
      "tags": [
        "webgl",
        "threejs",
        "examples"
      ],
      "previewImage": "/previews/threejs-examples.webp",
      "titleEn": "three.js examples",
      "summaryEn": "Official three.js example wall: many in-browser WebGL / HTML interactive demos you can open to read the source.",
      "qualityNoteEn": "Official interactive example index. Fits 3D/game-leaning HTML demos."
    },
    {
      "id": "bootstrap-examples",
      "slug": "bootstrap-examples",
      "title": "Bootstrap Examples",
      "summary": "Bootstrap 5.3 官方示例：封面、定价、仪表盘、博客、相册等完整 HTML 页面片段与起步模板。",
      "types": [
        "landing",
        "component"
      ],
      "sourceUrl": "https://getbootstrap.com/docs/5.3/examples/",
      "featured": false,
      "publishedAt": "2023-05-30",
      "updatedAt": "2026-08-23T04:16:00Z",
      "qualityNote": "官方落地页/组件示例目录，可直接对照源码结构。",
      "tags": [
        "bootstrap",
        "templates",
        "examples"
      ],
      "previewImage": "/previews/bootstrap-examples.webp",
      "titleEn": "Bootstrap Examples",
      "summaryEn": "Official Bootstrap 5.3 examples: full HTML page fragments and starter templates for covers, pricing, dashboards, blogs, albums, and more.",
      "qualityNoteEn": "Official landing/component example directory. You can compare the source structure directly."
    },
    {
      "id": "css-zen-garden",
      "slug": "css-zen-garden",
      "title": "CSS Zen Garden",
      "summary": "同一份 HTML，切换不同作者的外部样式表，展示纯 CSS 能把页面做成完全不同的视觉设计。Dave Shea 发起的经典 CSS 设计展览。",
      "types": [
        "portfolio",
        "docs"
      ],
      "sourceUrl": "https://csszengarden.com/",
      "secondaryUrls": [],
      "featured": true,
      "stars": 5,
      "publishedAt": "2003-05-08",
      "updatedAt": "2026-08-24T01:10:00Z",
      "qualityNote": "结构与表现分离的教科书级公开页，适合「作品集 / 文档站」类收集。",
      "tags": [
        "css",
        "design",
        "gallery"
      ],
      "previewImage": "/previews/css-zen-garden.webp",
      "titleEn": "CSS Zen Garden",
      "summaryEn": "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.",
      "qualityNoteEn": "A textbook public page on separating structure from presentation. Fits “portfolio / docs.”"
    },
    {
      "id": "scroll-driven-animations",
      "slug": "scroll-driven-animations",
      "title": "Scroll-driven Animations",
      "summary": "Chrome 开发者布拉姆斯做的演示站：阅读进度、封面流转、堆叠卡片、横向卷轴等，全部用滚动驱动动画，演示页本身就是手写 HTML/CSS/JS，无构建步骤。",
      "types": [
        "motion",
        "interactive",
        "docs"
      ],
      "sourceUrl": "https://scroll-driven-animations.style/",
      "secondaryUrls": [
        "https://developer.chrome.com/docs/web-platform/scroll-driven-animations"
      ],
      "featured": true,
      "stars": 5,
      "publishedAt": "2023-05-01",
      "updatedAt": "2026-08-24T01:10:00Z",
      "qualityNote": "官方质量的动效实验室，类型覆盖动效、互动与文档。",
      "tags": [
        "scroll",
        "css",
        "waapi",
        "chrome"
      ],
      "previewImage": "/previews/scroll-driven-animations.webp",
      "titleEn": "Scroll-driven Animations",
      "summaryEn": "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.",
      "qualityNoteEn": "Official-quality motion lab. Types cover motion, interactive, and docs."
    },
    {
      "id": "squoosh",
      "slug": "squoosh",
      "title": "Squoosh",
      "summary": "GoogleChromeLabs 的浏览器内图片压缩工具：本地编解码、并排对比、不上传原图。是高质量 Web 工具页的代表。",
      "types": [
        "tool"
      ],
      "sourceUrl": "https://squoosh.app/",
      "secondaryUrls": [
        "https://github.com/GoogleChromeLabs/squoosh"
      ],
      "featured": false,
      "publishedAt": "2018-10-01",
      "updatedAt": "2026-08-24T01:10:00Z",
      "qualityNote": "开源、可离线工作的实用工具页，适合「工具页」分类。",
      "tags": [
        "image",
        "wasm",
        "pwa",
        "google"
      ],
      "previewImage": "/previews/squoosh.webp",
      "titleEn": "Squoosh",
      "summaryEn": "GoogleChromeLabs in-browser image compressor: local codecs, side-by-side compare, originals never upload. A high-quality web tool page.",
      "qualityNoteEn": "Open source, works offline. Fits the “tool” type."
    },
    {
      "id": "clippy",
      "slug": "clippy-css-clip-path",
      "title": "Clippy：CSS clip-path 生成器",
      "summary": "Bennett Feely 的可视化 clip-path 编辑器，拖点生成 circle / ellipse / polygon / inset，并可复制 CSS。",
      "types": [
        "tool"
      ],
      "sourceUrl": "https://bennettfeely.com/clippy/",
      "secondaryUrls": [
        "https://github.com/bennettfeely/clippy"
      ],
      "featured": false,
      "publishedAt": "2014-10-01",
      "updatedAt": "2026-08-24T01:10:00Z",
      "qualityNote": "长期维护的经典 CSS 工具页，链接有效。",
      "tags": [
        "clip-path",
        "css",
        "generator"
      ],
      "previewImage": "/previews/clippy.webp",
      "titleEn": "Clippy: CSS clip-path maker",
      "summaryEn": "Bennett Feely’s visual clip-path editor. Drag points to make circle / ellipse / polygon / inset, then copy the CSS.",
      "qualityNoteEn": "A long-maintained classic CSS tool page. The link still works."
    },
    {
      "id": "css-doodle",
      "slug": "css-doodle",
      "title": "css-doodle",
      "summary": "基于 Web Components 的 CSS 图案生成器：用扩展 CSS 语法画网格、图形与动画，文档站本身就是可点击的现场演示。",
      "types": [
        "motion",
        "component",
        "interactive"
      ],
      "sourceUrl": "https://css-doodle.com/",
      "secondaryUrls": [
        "https://github.com/css-doodle/css-doodle"
      ],
      "featured": false,
      "publishedAt": "2018-01-01",
      "updatedAt": "2026-08-24T01:10:00Z",
      "qualityNote": "文档即画布，适合动效 / 组件 / 互动三类。",
      "tags": [
        "web-components",
        "css",
        "generative"
      ],
      "previewImage": "/previews/css-doodle.webp",
      "titleEn": "css-doodle",
      "summaryEn": "Web Components CSS pattern generator: draw grids, shapes, and motion with an extended CSS syntax. The docs site is a clickable live demo.",
      "qualityNoteEn": "Docs as canvas. Fits motion / component / interactive."
    },
    {
      "id": "slidevars",
      "slug": "slidevars",
      "title": "slideVars",
      "titleEn": "slideVars",
      "summary": "CodePen 开源的 CSS 变量控制面板：自动读取 :root 自定义属性，生成滑杆和取色器，改值立刻反映到页面。MIT，演示页公开可访问。",
      "summaryEn": "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.",
      "types": [
        "tool",
        "interactive",
        "component"
      ],
      "sourceUrl": "https://codepen.github.io/slideVars/",
      "secondaryUrls": [
        "https://github.com/codepen/slideVars",
        "https://css-tricks.com/playing-with-codepen-slidevars/"
      ],
      "previewImage": "/previews/slidevars.webp",
      "featured": false,
      "publishedAt": "2026-01-02",
      "updatedAt": "2026-08-26T01:20:00Z",
      "qualityNote": "适合当「给 Agent 调 CSS 变量」的对照页：复制两行 init 就能出面板。不是付费模板站。",
      "qualityNoteEn": "A good reference page for “let an Agent tune CSS variables”: two lines of init produce the panel. Not a paid template shop.",
      "tags": [
        "css",
        "custom-properties",
        "codepen",
        "mit",
        "devtools"
      ]
    },
    {
      "id": "dont-wordle",
      "slug": "dont-wordle",
      "title": "Don't Wordle",
      "titleEn": "Don't Wordle",
      "summary": "免费每日单词游戏：规则像 Wordle，但目标是避开隐藏词。绿格必须留在原位、黄格必须换位、灰格禁用；有效词池会越猜越少，猜中即败。可撤销。",
      "summaryEn": "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.",
      "types": [
        "interactive"
      ],
      "sourceUrl": "https://dontwordle.com/",
      "secondaryUrls": [
        "https://news.ycombinator.com/item?id=49432319"
      ],
      "previewImage": "/previews/dont-wordle.webp",
      "featured": true,
      "publishedAt": "2022-05-31",
      "updatedAt": "2026-08-26T03:14:01Z",
      "qualityNote": "公开可玩的每日 HTML 字谜。今日 HN 首页约 320 分（item 49432319，https://news.ycombinator.com/item?id=49432319）。由 Hacker News（news.ycombinator.com / @hackernews）发现。适合「游戏/互动」类收集。",
      "qualityNoteEn": "A public daily HTML word game. On today’s HN front page at ~320 points (item 49432319, https://news.ycombinator.com/item?id=49432319). Found via Hacker News (news.ycombinator.com / @hackernews). Fits the game/interactive collection.",
      "tags": [
        "wordle",
        "game",
        "daily",
        "html",
        "hacker-news"
      ]
    },
    {
      "id": "rack-02",
      "slug": "rack-02",
      "title": "RACK-02：单文件 techno 机",
      "titleEn": "RACK-02: a techno machine in one HTML file",
      "summary": "整台模块化 techno 机写在一个 HTML 文件里：鼓组、贝斯、效果、场景与 CV 接线，浏览器即开即玩，无需安装。GitHub Pages 上的可玩页。",
      "summaryEn": "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.",
      "types": [
        "interactive",
        "tool"
      ],
      "sourceUrl": "https://ssx360.github.io/rack-02/",
      "secondaryUrls": [
        "https://ssx360.github.io/rack-02/rack.html",
        "https://news.ycombinator.com/item?id=49419351"
      ],
      "previewImage": "/previews/rack-02.webp",
      "featured": true,
      "publishedAt": "2026-08-24",
      "updatedAt": "2026-08-26T03:14:01Z",
      "qualityNote": "Show HN 单文件 HTML 合成器，约 228 分（item 49419351，https://news.ycombinator.com/item?id=49419351）。根域名 404，真实可玩页在 /rack-02/。由 Hacker News（news.ycombinator.com / @hackernews）发现。",
      "qualityNoteEn": "Show HN single-file HTML synth, ~228 points (item 49419351, https://news.ycombinator.com/item?id=49419351). The domain root 404s; the live page is /rack-02/. Found via Hacker News (news.ycombinator.com / @hackernews).",
      "tags": [
        "audio",
        "web-audio",
        "single-file",
        "html",
        "hacker-news"
      ]
    },
    {
      "id": "b2tf",
      "slug": "b2tf",
      "title": "B2TF：复古 iOS 应用目录",
      "titleEn": "B2TF: vintage iOS app directory",
      "summary": "公开可提交的复古 iOS 应用设计目录。格子里是带视频预览的手机界面：磁带、像素、拟物相机。免费浏览，欢迎投稿。",
      "summaryEn": "A public, submission-open directory of retro-style iOS apps. A grid of phone UIs with video previews: cassettes, pixels, skeuomorphic cameras. Free to browse; submissions welcome.",
      "types": [
        "landing",
        "portfolio"
      ],
      "sourceUrl": "https://www.b2tf.app",
      "secondaryUrls": [
        "https://x.com/jackcring/status/2092054517911007405",
        "https://x.com/jackcring/status/2091699400582295946"
      ],
      "previewImage": "/previews/b2tf.webp",
      "featured": false,
      "publishedAt": "2026-08-25",
      "updatedAt": "2026-09-01T00:10:00Z",
      "qualityNote": "Jc（@jackcring）上线的复古 iOS 目录。公开浏览，不是 Grok Bot 案例。可当反塑料蓝白模板的对照。",
      "qualityNoteEn": "Jc (@jackcring) launched this retro iOS directory. Public browse, not a Grok Bot case. A useful counterexample to generic Bootstrap-blue templates.",
      "tags": [
        "ios",
        "retro",
        "directory",
        "skeuomorphic",
        "mobile"
      ]
    },
    {
      "id": "polycss",
      "slug": "polycss",
      "title": "PolyCSS：不用 WebGL 的 CSS 3D 引擎",
      "titleEn": "PolyCSS: a CSS 3D engine without WebGL",
      "summary": "Layoutit 的 DOM 原生 CSS 3D：OBJ/glTF/VOX 的每个多边形都是可点选的 DOM 节点，用 matrix3d 摆位置。有公开画廊、builder，以及 vanilla / React / Vue 入口。",
      "summaryEn": "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.",
      "types": [
        "component",
        "interactive",
        "docs"
      ],
      "sourceUrl": "https://polycss.com/",
      "secondaryUrls": [
        "https://github.com/LayoutitStudio/polycss",
        "https://polycss.com/gallery/",
        "https://news.ycombinator.com/item?id=48294241"
      ],
      "previewImage": "/previews/polycss.webp",
      "featured": true,
      "publishedAt": "2026-05-27",
      "updatedAt": "2026-09-01T01:41:20Z",
      "qualityNote": "Show HN（item 48294241）：CSS 3D 网格引擎，演示页和画廊都可公开打开。另有 Pipes 展示页 css.graphics/pipes。",
      "qualityNoteEn": "Show HN (item 48294241): a CSS 3D mesh engine whose demo and gallery are publicly open. Companion showcase: css.graphics/pipes.",
      "tags": [
        "css",
        "3d",
        "web-components",
        "hacker-news"
      ]
    },
    {
      "id": "sirenfall",
      "slug": "sirenfall",
      "title": "Sirenfall：浏览器民防警报场景",
      "titleEn": "Sirenfall: a browser civil-defense siren scene",
      "summary": "纯浏览器民防警报场景：雨夜庇护所窗外城市，拉闸后警报塔用 Web Audio 实时合成双音（非录音）。源码单 HTML、MIT；另有 how-it-works 说明页。",
      "summaryEn": "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.",
      "types": [
        "interactive",
        "demo"
      ],
      "sourceUrl": "https://sirenfall.live/",
      "secondaryUrls": [
        "https://github.com/beeswaxpat/sirenfall",
        "https://sirenfall.live/how-it-works",
        "https://news.ycombinator.com/item?id=49556678"
      ],
      "previewImage": "/previews/sirenfall.webp",
      "featured": true,
      "publishedAt": "2026-09-04",
      "updatedAt": "2026-09-04T02:00:14Z",
      "qualityNote": "Show HN（item 49556678）。公开可玩；雨雷是录音，警报音实时合成。来自 Hacker News。",
      "qualityNoteEn": "Show HN (item 49556678). Publicly playable; rain/thunder are recordings, the siren is live synthesis. From Hacker News.",
      "tags": [
        "web-audio",
        "interactive",
        "hacker-news",
        "mit"
      ]
    },
    {
      "id": "yan-textures",
      "slug": "yan-textures",
      "title": "Yan Texture Studio：浏览器纹理实验室",
      "titleEn": "Yan Texture Studio: in-browser texture lab",
      "summary": "免费浏览器 Texture Studio：25 种 Canvas 2D 纹理/故障滤镜，全在本地跑，无账号、无上传，导出 PNG。只收录网页工具，不含移动端 App。",
      "summaryEn": "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.",
      "types": [
        "tool",
        "interactive"
      ],
      "sourceUrl": "https://yan.yichenlab.com/textures/",
      "secondaryUrls": [
        "https://news.ycombinator.com/item?id=49550531"
      ],
      "previewImage": "/previews/yan-textures.webp",
      "featured": false,
      "publishedAt": "2026-09-03",
      "updatedAt": "2026-09-04T02:00:14Z",
      "qualityNote": "Show HN（item 49550531）。仅收录 /textures/ 免费浏览器工具；同站移动 App 不在本库范围。",
      "qualityNoteEn": "Show HN (item 49550531). Lists only the free /textures/ browser tool; the companion mobile app is out of scope here.",
      "tags": [
        "canvas",
        "glitch",
        "tool",
        "hacker-news"
      ]
    },
    {
      "id": "cocoon",
      "slug": "cocoon",
      "title": "Cocoon：免费 Tailwind 4 单页模板",
      "titleEn": "Cocoon: free Tailwind CSS 4 one-page template",
      "summary": "MIT 开源咨询/SaaS 深色单页：Tailwind CSS 4 + 原生 JS，public/ 免构建可直接部署，含滚动动画与响应式布局。",
      "summaryEn": "MIT open-source dark one-pager for consultancies/SaaS: Tailwind CSS 4 + vanilla JS, ready-to-deploy public/ folder, scroll motion and responsive layout.",
      "types": [
        "landing",
        "template"
      ],
      "sourceUrl": "https://cocoon.templatedeck.com/",
      "secondaryUrls": [
        "https://github.com/holger1411/cocoon-template"
      ],
      "previewImage": "/previews/cocoon.webp",
      "featured": false,
      "publishedAt": "2026-09-03",
      "updatedAt": "2026-09-07T01:23:22Z",
      "qualityNote": "免费 MIT 模板（不可原样转售模板本身）。演示站即 public 成品。",
      "qualityNoteEn": "Free MIT template (do not resell the template as-is). The live demo is the ready public build.",
      "tags": [
        "tailwind",
        "template",
        "landing",
        "mit"
      ]
    },
    {
      "id": "html-presentation-editor",
      "slug": "html-presentation-editor",
      "title": "HTML Presentation Editor：单文件自编辑演示稿",
      "titleEn": "HTML Presentation Editor: self-editing single-file slides",
      "summary": "MIT 单文件（~42KB）演示稿编辑器：浏览器内 contenteditable，Cmd+S 写回同文件；文档/幻灯双模式、主题与强调色、图片嵌 base64，无构建无服务器。",
      "summaryEn": "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.",
      "types": [
        "tool",
        "demo",
        "template"
      ],
      "sourceUrl": "https://itchernetski.github.io/html-presentation-editor/editor.html",
      "secondaryUrls": [
        "https://github.com/itchernetski/html-presentation-editor"
      ],
      "previewImage": "/previews/html-presentation-editor.webp",
      "featured": true,
      "publishedAt": "2026-05-11",
      "updatedAt": "2026-09-08T01:27:40Z",
      "qualityNote": "免费 MIT，演示页即成品。适合 Agent 整文件改写场景。",
      "qualityNoteEn": "Free MIT; the live page is the product. Fits agent whole-file rewrite workflows.",
      "tags": [
        "single-file",
        "slides",
        "editor",
        "mit",
        "vanilla-js"
      ]
    },
    {
      "id": "ptree",
      "slug": "ptree-interactive-tree-of-life",
      "title": "Ptree：可交互生命树",
      "titleEn": "Ptree: interactive tree of life",
      "summary": "浏览器里的系统发育生命树：按性状滑块过滤类群，比较祖先与照片/分布。Show HN 公开演示。",
      "summaryEn": "An interactive phylogeny tree of life in the browser: trait sliders filter taxa; compare ancestors with photos/ranges. Public Show HN demo.",
      "types": [
        "demo",
        "interactive",
        "tool"
      ],
      "sourceUrl": "https://ptree.org/",
      "secondaryUrls": [
        "https://news.ycombinator.com/item?id=49559069"
      ],
      "previewImage": "/previews/ptree.webp",
      "featured": true,
      "publishedAt": "2026-09-08",
      "updatedAt": "2026-09-08T01:27:40Z",
      "qualityNote": "公开可访问（HN 49559069）。科学可视化演示，非落地模板。",
      "qualityNoteEn": "Publicly accessible (HN 49559069). Science viz demo, not a landing template.",
      "tags": [
        "phylogeny",
        "interactive",
        "show-hn",
        "viz"
      ]
    },
    {
      "id": "sceneai",
      "slug": "sceneai",
      "title": "SceneAI：UI 提示库（AETHER Claude 首屏演示同源）",
      "titleEn": "SceneAI: UI prompt library (source of AETHER’s Claude hero demo)",
      "summary": "Orixadesign 出品的 UI 提示库：140+ 落地页 / Hero 区块提示、70+ 动态背景与渐变，每周上新，可复制进 Claude / GPT / Gemini 等生成。首页免费浏览样本；「Copy Prompt」与下载需 All Access（$49/月或 $199 终身，标价 $498 六折）。AETHER 的 3Portals Claude 网页设计演示片回复串即链到此站。",
      "summaryEn": "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.",
      "types": [
        "tool",
        "landing"
      ],
      "sourceUrl": "https://sceneai.art",
      "secondaryUrls": [
        "https://x.com/aether_uiux/status/2096934615554633936",
        "https://sceneai.art/pricing"
      ],
      "previewImage": "/previews/sceneai.webp",
      "featured": true,
      "publishedAt": "2026-09-07",
      "updatedAt": "2026-09-08T04:45:00Z",
      "qualityNote": "Hao 点名收集。入口是 @aether_uiux 的 9 秒演示片「Claude really crazy for web design」：3Portals 轻色 SaaS 首屏、玻璃拟态旋转面板罩着变形紫色 3D 团块，标题「Strategic AI to Scale Your Business Growth.」。帖子正文与作者自回复都没有可粘贴的提示词，自回复只是 SceneAI 卡片链接，故以 SceneAI 为主条目、原帖作证据；预览图取自视频封面。与 MotionSites / MeiGen / Taste Skill 同属设计提示参考，非 Grok Bot 运营案例。3Portals 疑为演示用虚构品牌，未找到公开产品站，站内首页目录也未见该条目。库本身付费（2026-09-08 核对）。",
      "qualityNoteEn": "Requested by Hao. Entry point is @aether_uiux’s 9-second clip “Claude really crazy for web design”: a light 3Portals SaaS hero with a glassmorphic rotating panel over a morphing purple 3D blob, headline “Strategic AI to Scale Your Business Growth.” Neither the post nor the author’s self-reply contains a pasteable prompt — the self-reply is only a SceneAI link card — so SceneAI is the primary item and the post is kept as evidence; preview taken from the video poster. Filed alongside MotionSites / MeiGen / Taste Skill as a design-prompt reference, not a Grok Bot ops case. 3Portals looks like a fictional demo brand: no public product site, and not listed in SceneAI’s homepage catalogue. The library itself is paid (checked 2026-09-08).",
      "tags": [
        "html",
        "design",
        "tool",
        "prompts",
        "claude",
        "saas",
        "glassmorphism"
      ]
    }
  ]
}