npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

aether-themes

v0.1.6

Published

An AI-first, template-driven theme kit with swappable CSS themes for customizable personal sites.

Readme

Aether

English · 简体中文 · 日本語

npm 版本 npm 下载量 检查状态 许可证

面向可自定义模板个人网站的 AI-first 主题套件。

Aether 将可切换的 CSS 主题层与 AI 驱动的建站、维护流程结合起来。它帮助 AI 创建或修改可编辑的网站模板,同时不把视觉系统绑定到某个人的内容、路由或框架。主题层提取自 W.Site

浏览演示站 · 阅读 AI 正式建站提示词 · 查看 npm 包

Aether 是什么,不是什么

Aether 是 AI-first、模板驱动的主题套件,不是完整的博客主题、站点生成器或 CMS。它由两层组成:

  1. 主题层——框架无关的 CSS、可选的原生 JS 片段、设计令牌和语义化标记契约。
  2. AI 建站层——负责询问需求、创建或修改可编辑模板、配置主题并验证结果的提示词和 Skill。

它不提供路由、内容模型、后台,也不会为所有博客平台自动生成现成模板。生成后的网站仍然是普通项目,运行时不依赖 AI 服务。

Aether 面向模板可以由 AI 或开发者编辑的网站。它不是一个能在无法访问模板的托管博客上直接套用样式的通用适配器。

引导式建站流程默认使用 Astro,但包本身没有 Astro 运行时依赖。只要一个框架或静态站点生成器能够加载全局 CSS、输出 HTML,并添加 THEME_CONTRACT.md 中记录的语义化钩子,就可以接入 Aether。

| 环境 | 接入程度 | | --- | --- | | Astro | 内置正式建站和模板流程 | | Eleventy 或原生 HTML | 可直接引入 CSS | | 其他能输出 HTML 的框架或静态站点生成器 | 将模板映射到契约后即可接入 | | 现有 CMS 或博客标记 | 不是即插即用,需要模板适配器或本地覆盖样式 |

换句话说,Aether 具有可移植性,但不是对所有博客系统都零配置兼容。网站仍然负责自己的标记、内容、路由和交互。

为什么选择 Aether

  • 七套可切换主题,共用一份语义化标记契约。
  • 按需加载,网站只打包实际提供的主题。
  • 框架无关,可用于 Astro、Eleventy、原生 HTML 和其他静态站点工具。
  • AI-first 建站与维护,提供可被仓库发现的 Skill 和复制即用的提示词。
  • 无 npm 运行时依赖。 预告信拆字和共用 SVG 路径以可选的原生 JS 片段提供。不内置影视游戏版权图片或抓取素材。

主题

| 主题 | 方向 | | --- | --- | | minimal | 安静留白与编辑秩序 | | magazine | 纸张、栏目与印刷节奏 | | terminal | 荧光绿、网格与命令行线索 | | cyber | 警示黄、青色诊断线与硬朗面板 | | island | 明亮岛屿生活与柔和圆角表面 | | wilds | 大地色、遗迹与开阔空间 | | persona | 红黑剪纸与预告信构图 |

所有主题都使用同一套语义化钩子。修改根元素属性即可切换视觉系统:

<html data-theme="persona">

快速开始

在你的网站项目中安装:

npm install aether-themes

先引入基础样式,再引入需要的主题:

@import 'aether-themes/foundation.css';
@import 'aether-themes/themes/minimal.css';
@import 'aether-themes/themes/persona.css';

如果网站提供所有内置主题,可以使用便捷入口:

@import 'aether-themes/all.css';

Aether 只提供视觉层。HTML、内容、路由、主题选择器和交互逻辑由你的网站负责。

只加载需要的主题

aether.config.example.mjs 复制到网站中并命名为 aether.config.mjs,然后删除不需要的主题:

export default {
  themes: ['minimal', 'persona'],
  defaultTheme: 'minimal',
};

根据配置生成主题导入文件:

npx aether-themes \
  --config aether.config.mjs \
  --output src/styles/aether-themes.css

生成器会校验主题名称、重复项和 defaultTheme。主题选择器也应读取同一个 themes 数组,这样未启用的主题不会出现在界面中。标签和描述由网站自行维护,让 Aether 保持内容无关。

使用 AI 创建网站

正式建站时,请先打开一个准备作为网站根目录的空目录,再把本仓库作为参考交给 AI。不要把 Aether 主题仓库本身当作网站工作目录:Aether 是依赖和视觉层,网站才拥有文件、内容、路由和配置。

AI 的工作是创建或修改网站的可编辑模板,让它使用 Aether 的语义化钩子。Aether 不会自动猜测任意 HTML 结构,也不会自动改写无法自定义模板的托管博客。

如果你是第一次使用终端,请复制 STARTER_PROMPT.md。它会先询问站点名称、介绍、署名、栏目、语言和主题,等你确认方案后,直接在当前网站目录创建正式网站。如果发现当前目录是 Aether 主题仓库,它会停止,不会生成任何文件。

最短交接提示词:

请阅读 https://github.com/robeshell/aether-themes/blob/main/STARTER_PROMPT.md,先向我提问建站需求,等我确认方案后,把当前工作目录作为正式网站根目录从零创建并启动网站。不要创建 aether-ai-smoke-test 或其他测试目录;如果当前目录是 aether-themes 仓库,请先停止并提示我换到网站目录。

如果你只是维护 Aether 包本身,请使用 SMOKE_TEST_PROMPT.md。它会在仓库内创建隔离的 aether-ai-smoke-test/site,只用于验收 npm 包和主题生成器,不用于创建用户网站。

已经有 Aether 网站时,请使用 UPDATE_PROMPT.md。它会保留内容、配置、本地快照和未提交修改,然后更新主题、重新生成 CSS 并检查网站。

标记契约

Aether 为语义化钩子提供样式,而不是生成固定路由的页面。必需钩子、富媒体钩子和可选运行时片段见 THEME_CONTRACT.md

网站负责维护:

  • 内容集合和 frontmatter;
  • 路由和页面结构;
  • 主题选择器状态和持久化;
  • 网站文案和标签;
  • 素材授权及网站专属覆盖样式。

预告信逐字标题、分割线 SVG 路径和列表箭头路径放在原生 ESM 片段里,不依赖 Astro 组件:

import { applyThemeEnhancements } from 'aether-themes/scripts/persona-titles.js';
import { createDivider, ENTRY_ARROW_PATH } from 'aether-themes/scripts/markup.js';

applyThemeEnhancements(document.documentElement.dataset.theme);

html[data-theme] 变化时调用 applyThemeEnhancements。主题切换器的界面和持久化仍由网站自己维护。

可选图片

Aether 不内置抓取或版权相关图片。cyberterminalwilds 主题提供可选的图片变量:

:root[data-theme="cyber"] {
  --aether-cyber-dots-image: url('/assets/cyber/dots-yellow.png');
}

:root[data-theme="terminal"] {
  --aether-terminal-rain-image: url('/assets/terminal/matrix-rain.svg');
}

:root[data-theme="wilds"] {
  --aether-wilds-header-image: url('/images/wilds-header.png');
}

这些变量默认不加载图片,因此主题无需额外素材也能工作。只添加你拥有或获准再分发的素材。

开发

这个包没有运行时依赖。可以在本地检查发布内容:

npm pack --dry-run

每次 push 和 pull request 也会在 GitHub Actions 中执行同样的检查。

参与贡献

修改应面向 THEME_CONTRACT.md 中的语义化钩子,保持基础层与内容无关,并保留网站按需加载主题的能力。提交 pull request 前,请运行 npm pack --dry-run 并检查包内容。

发布步骤见 PUBLISHING.md。每次发布都需要升级版本号。

许可证

MIT,详见 LICENSE