像素艺术Zui重要的是「网格」和「固定调色板」。我在 /assets/palette.json 中预设了 8 种基础颜色，每种对应一个十六进制值：

{
    "primary": "#ff6b6b",
    "secondary": "#4ecdc4",
    "accent": "#ffe66d",
    "bg": "#f7fff7",
    "text": "#222222"
}

同时我约定所有元素宽高必须是 4 的倍数，这样在缩放时不会出现半像素模糊。这个规则会在后面的脚本里强制检查。

Main.py 的核心逻辑如下：

# main.py
import os, json
from PIL import Image, ImageFilter
def pixelate:
    img = Image.open
    # 缩小再放大，实现马赛克效果
    w, h = img.size
    img = img.resize, Image.NEAREST)
    img = img.resize, Image.NEAREST)
    return img
def apply_palette:
    # 简单Zui近色映射，仅作演示
    pixels = img.load
    for i in range:
        for j in range:
            r,g,b = pixels
            nearest = min,
                          key=lambda kv:**2+**2+**2)
            pixels = tuple for i in )
    return img
if __name__ == "__main__":
    import argparse
    parser = argparse.ArgumentParser
    parser.add_argument
    args = parser.parse_args
    palette = json.load, "assets/palette.json")))
    for root,_,files in os.walk:
        for f in files:
            if f.lower.endswith):
                full_path = os.path.join
                out = pixelate
                out = apply_palette
                out.save)
                print

运行方式hen简单： /pixelify ./src/pages/homepage

脚本会遍历目标文件夹，把所有图片转成符合网格要求且调好颜色的「像素图」，然后输出到同层级下的新目录。

Sass/SCSS Ke以帮助我们一次性声明所有尺寸单位。例如：

$grid-unit: 4px;
@function pixel{ @return $n*$grid-unit;}
.page{
   padding: pixel;
   font-size: pixel;
}
.icon{
   width: pixel;
   height: pixel;
}

Sass 编译后得到的 CSS 完全符合我们的「四倍网格」原则，从而避免手动纠错。

# 初始化仓库
git init
git add .
git commit -m "Add reusable pixel UI skill"
git branch -M main
git remote add origin :yourname/pixel-ui-skill.git
git push -u origin main