pi-pixel-header
为网页添加带有随机猫普奇配色点缀的像素风格Pi徽标页眉。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：pi-pixel-header。 它的用途是：为网页添加带有随机猫普奇配色点缀的像素风格Pi徽标页眉。 完整的 Skill 内容见：https://321skill.com/skills/pi-pixel-header/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我在我的Next.js项目首页顶部添加一个像素风格的页眉，要有Pi徽标，颜色风格参考Catppuccin Mocha。”，它会引导你安装并引入`pi-pixel-header`组件，将其添加到你的布局文件中，完成后你的页面顶部就会出现一个带有随机Catppuccin Mocha配色点缀的像素Pi徽标。
介绍
该Skill旨在为网页项目快速添加一个风格化、具有品牌标识的页眉组件。它提供了一个像素艺术风格的“Pi”徽标，并会从流行的Catppuccin Mocha配色方案中随机选取点缀色，为页面增添一抹独特且协调的视觉趣味，无需设计师手动调整颜色。
使用方式非常简单，开发者只需通过npm安装此包，然后在项目中引入并挂载该组件即可。组件会自动渲染出带有像素Pi徽标的页眉，并且每次加载或刷新时，其点缀色彩都可能不同，带来微小的惊喜感。
它非常适合个人开发者、小型团队或任何在构建与树莓派（Raspberry Pi）相关、极客文化、复古像素风项目网站的前端开发者。对于希望快速建立项目视觉标识，又不想在配色细节上花费过多时间的场景尤为适用。
建议将此组件用于非商业展示、个人博客、项目介绍页或内部工具界面。由于配色是随机的，如果对颜色有严格一致性要求（如需要与严格品牌指南匹配），可能需要手动修改源码或寻找其他方案。
核心特点
其核心在于将像素艺术风格的Pi徽标与Catppuccin Mocha这一特定、受欢迎的配色方案深度结合，并实现了点缀色的随机化，每次使用都能产生细微不同的视觉效果，而同类组件通常提供固定配色或需要手动配置。
注意事项
不适合对页眉样式、配色有严格、固定品牌规范要求的商业项目。
常见问题
如何固定页眉的颜色，不让它随机变化？
需要修改组件源代码，将随机选择颜色的逻辑替换为固定的颜色值。
这个页眉组件支持响应式设计吗？
基础功能是展示像素徽标，复杂的响应式适配可能需要开发者自行添加CSS媒体查询。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/pi-pixel-header/raw/index.md 读取 pi-pixel-header 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/pi-pixel-header/raw/index.md（查看排版版本）