8-bit-pixel-art-patterns

Name: 8-bit-pixel-art-patterns
Author: theorcdev

github.com/theorcdev设计与 UI2.1k134 次安装2 天前更新

代码仓库

关于 8-bit-pixel-art-patterns

介绍 8-bit 组件像素风边框与阴影的设计技能，涵盖绝对定位的 div 元素、图标按钮和深色模式样式。

主要功能

01像素风边框模式
02像素风阴影模式
03图标按钮边框模式
04深色模式配色指导
05条件式边框渲染

适用场景

01为组件添加复古边框
02创建像素风组件阴影
03设置图标按钮样式
04适配深色模式下的像素配色

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill 8-bit-pixel-art-patterns

安装后在 Claude Code 中输入/8-bit-pixel-art-patterns确认已加载。

详细介绍

8 位像素艺术图案

使用绝对定位的 div 创建逼真的像素化边框和阴影。这些图案对于营造 8 位组件的复古美感至关重要。

像素化边框图案

使用 9 个 div 元素创建像素化边框效果：

<div className="relative">
  <ShadcnButton {...props} className="rounded-none" />

  {/* Corner pixels */}
  <div className="absolute top-0 left-0 size-1.5 bg-foreground" />
  <div className="absolute top-0 right-0 size-1.5 bg-foreground" />
  <div className="absolute bottom-0 left-0 size-1.5 bg-foreground" />
  <div className="absolute bottom-0 right-0 size-1.5 bg-foreground" />

  {/* Edge segments */}
  <div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground" />
  <div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground" />
  <div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground" />
  <div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground" />

  {/* Side borders */}
  <div className="absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground" />
  <div className="absolute top-1.5 -right-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground" />
</div>

像素化阴影图案

使用像素化阴影增加立体感：

{variant !== "outline" && (
  <>
    {/* Top shadow */}
    <div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
    <div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />

    {/* Bottom shadow */}
    <div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
    <div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
  </>
)}

图标按钮图案

为图标按钮创建更小、独立的像素边框：

{size === "icon" && (
  <>
    {/* Top/bottom full bars */}
    <div className="absolute top-0 left-0 w-full h-1.5 bg-foreground" />
    <div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground" />

    {/* Side segments */}
    <div className="absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground" />
    <div className="absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground" />
    <div className="absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground" />
    <div className="absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground" />
  </>
)}

深色模式注意事项

使用 CSS 自定义属性或深色模式变体：

<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />

核心原则

使用 rounded-none - 移除基础组件的所有圆角
固定像素尺寸 - 使用一致的像素值（1.5、3px）营造复古感
绝对定位 - 所有边框元素都应绝对定位在相对定位的容器内
深色模式颜色 - 使用带深色模式变体的 ring 或 foreground 来增强对比度
条件渲染 - 仅为适用的变体显示边框（不包括 ghost、link、icon）

参考组件

完整实现请参见 components/ui/8bit/button.tsx。

支持 Markdown

登录后评论