Pixel Art 像素艺术（Pixel Art）
Pixel Art is a graphic language born from hardware limits: on the 8- and 16-bit consoles and arcade boards of the 1980s–90s, artists drew with visible square pixels and tiny indexed palettes, placing every sprite, glyph, and health bar pixel by pixel. What began as a constraint is now a deliberate retro aesthetic — crisp stair-stepped edges with no anti-aliasing, limited color ramps, dithered shading, chunky bitmap type, and frame-by-frame animation chosen for charm, not necessity.
像素艺术是一套诞生于硬件限制的图形语言：在 20 世纪 80–90 年代的 8/16 位游戏机和街机基板上，美术师用可见的方形像素和极小的索引色板作画，每一个精灵、每一个字形、每一根血条都逐像素摆放。曾经的限制如今成了刻意的复古美学 —— 无抗锯齿的阶梯状边缘、有限的渐变色阶、抖动（dithering）着色、粗粝的位图字体、逐帧小动画，为的是游戏时代的魅力，而不是迫不得已。
Scope: Covers the deliberate retro game-art style applied to UI and illustration — the craft of placing individual pixels. It is not the 90s amateur-homepage look (that's Vernacular Web), and merely low-resolution or blurry images are not pixel art: without deliberate pixel-level construction and a limited palette, it's just a small picture.
范围：本条涵盖应用在 UI 和插画上的刻意复古游戏美术 —— 逐像素摆放这门手艺。它不是 90 年代业余主页的样子（那是民间网页）；单纯的低分辨率或模糊图片也不算像素艺术：没有刻意的像素级构造和有限色板，那只是一张小图。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Visible square pixels可见的方形像素 geometry defining定义特征
Artwork is built from visible, uniform square pixels — edges stair-step in fixed increments with no anti-aliasing; no amount of zoom ever reveals a smooth curve.
画面由可见的、大小一致的方形像素搭成 —— 边缘按固定步进呈阶梯状，无抗锯齿；无论放大多少倍，都找不到一条平滑曲线。
-
Small fixed palette小小的固定色板 color defining定义特征
A piece commits to a handful of indexed colors — 8, 16, or 32 — with hue-shifted ramps for shading; gradients are faked with dot patterns, never blended.
一件作品只承诺用一撮索引色 —— 8、16 或 32 色 —— 靠色相偏移的色阶做明暗；渐变用点阵图案假装，绝不混色。
-
Nearest-neighbor scaling最近邻缩放 imagery defining定义特征
Sprites and bitmaps scale with hard edges — image-rendering: pixelated, canvas imageSmoothing off; a single smoothed edge breaks the illusion instantly.
精灵和位图缩放时保持硬边 —— image-rendering: pixelated、canvas 关掉 imageSmoothing；只要一条边缘被平滑，幻术立刻戳破。
-
Chunky bitmap type粗粝位图字体 typography defining定义特征
Headings and HUD text use pixel fonts or blocky uppercase with a hard 1–2px offset shadow — every glyph visibly assembled from squares, zero blur anywhere.
标题和 HUD 文字用像素字体，或带 1–2px 硬偏移阴影的块状大写字母 —— 每个字形都看得出是方块拼的，全程零模糊。
-
Game UI chrome游戏 UI 铬件 imagery defining定义特征
Controls are game controls: segmented HP/MP bars, RPG dialog boxes with stepped borders, blinking PRESS-START prompts, 8-bit icons like hearts, coins, and stars.
控件就是游戏控件：分段的 HP/MP 血条、带阶梯边框的 RPG 对话框、闪烁的 PRESS START 提示、爱心金币星星这类 8-bit 图标。
-
Frame-by-frame motion逐帧运动 motion supporting辅助特征
Animation advances in discrete frames — steps() easing, sprites flipping between two poses, 1–2 frame blinks; nothing tweens smoothly.
动画按离散的帧推进 —— steps() 缓动、精灵在两个姿态间切换、1–2 帧的闪烁；没有任何平滑补间。
-
Dithered shading抖动着色 surface supporting辅助特征
Checkerboard and ordered-noise dot patterns simulate gradients and shadow inside the fixed palette — a texture born directly of the color limit.
棋盘格和有序噪点图案在固定色板内模拟渐变与阴影 —— 一种被颜色数量直接逼出来的纹理。
-
Smooth rendering平滑渲染 surface avoid避免
Anti-aliased curves, soft shadows, true gradients, or high-color photos dissolve the style — one blurred edge and it reads as a low-res image, not pixel art.
抗锯齿曲线、柔和阴影、真渐变或高彩色照片会立刻瓦解这个风格 —— 一条边缘糊掉，它就读作低分辨率图片，而不是像素艺术。
Often confused with: Vernacular Web最容易混淆：民间网页（Vernacular Web）
Pixel Art像素艺术（Pixel Art）
Vernacular Web民间网页（Vernacular Web）
This is Pixel Art because the retro look is constructed with pixel precision — a limited fixed palette, stair-stepped un-antialiased edges, bitmap type, and game controls like HP bars and dialog boxes; it is deliberate game art, not default browser output.
这是像素艺术，因为它的复古外观是以像素级精度构造出来的 —— 有限的固定色板、无抗锯齿的阶梯边缘、位图字体、血条和对话框这类游戏控件；它是刻意的游戏美术，不是浏览器的默认输出。
It would become the Vernacular Web if the pixel craft were dropped in favor of whatever the browser and a GIF collection gave you — default blue links, Times text, tiled wallpaper, a visitor counter — a page decorated by an amateur rather than drawn by an artist.
如果丢掉像素手艺，浏览器和 GIF 素材库给什么就用什么 —— 默认蓝链接、Times 字体、平铺壁纸、访客计数器 —— 变成业余爱好者装饰出来的页面，而不是美术师画出来的页面，就变成民间网页了。
In code — optional starting points代码写法 —— 可选起点
Nearest-neighbor scaling — the one-line make-or-break
image-rendering: crisp-edges; image-rendering: pixelated; /* scaled sprites keep hard stair-stepped edges */One-div pixel sprite via stacked box-shadows (4px cells)
.px-heart { width: 4px; height: 4px; background: transparent; box-shadow: 4px 0 #e43b44, 8px 0 #e43b44, 0 4px #e43b44, 4px 4px #e43b44, 8px 4px #e43b44, 12px 4px #e43b44, 16px 4px #e43b44, 20px 4px #e43b44, 24px 4px #e43b44, 0 8px #e43b44, 4px 8px #e43b44, 8px 8px #e43b44, 12px 8px #e43b44, 16px 8px #e43b44, 20px 8px #e43b44, 24px 8px #e43b44, 4px 12px #e43b44, 8px 12px #e43b44, 12px 12px #e43b44, 16px 12px #e43b44, 20px 12px #e43b44, 8px 16px #e43b44, 12px 16px #e43b44, 16px 16px #e43b44, 12px 20px #e43b44; }Segmented HP-style bar — 2px dark gaps every 12px
.hp { height: 14px; border: 2px solid #f4f4f4; background: #1a1c2c; } .hp > i { display: block; height: 100%; background: #38b764; background-image: repeating-linear-gradient(90deg, transparent 0 10px, #1a1c2c 10px 12px); box-shadow: inset 0 3px 0 #a7f070; }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface as Pixel Art — deliberate 8/16-bit game UI. Defining signals: graphics of visible uniform square pixels, stair-stepped edges, no anti-aliasing; a small fixed palette — night #1a1c2c, purple #5d275d, red #b13e53, orange #ef7d57, yellow #ffcd75, pale #94b0c2, green #38b764; all bitmaps scaled nearest-neighbor (image-rendering: pixelated; canvas imageSmoothingEnabled = false); headings in a bitmap font ('Press Start 2P', uppercase, letter-spacing 2px) or blocky caps with hard 2px 2px 0 shadow, zero blur; controls as game chrome — segmented HP bars (2px gaps every 12px), RPG dialog panels (#1a1c2c fill, 3px solid #f4f4f4 border, border-radius 0), prompts blinking with steps(1); shading via checkerboard dithering, never gradients. Motion: steps() easing, two-frame blinks; no tweens or soft shadows. Do not drift into Vernacular Web: no browser defaults (blue links, system serif, tiled wallpaper); every pixel deliberate. Keep 4.5:1 text contrast (#ffcd75/#f4f4f4 on #1a1c2c passes; red fails), pause blinks under prefers-reduced-motion, body copy in readable mono or sans.
把这个界面做成像素艺术（Pixel Art）—— 刻意的 8/16 位游戏 UI。定义性信号：图形由可见的一致方形像素搭成，阶梯状边缘，无抗锯齿；一块小小的固定色板 —— 夜色 #1a1c2c、紫 #5d275d、红 #b13e53、橙 #ef7d57、黄 #ffcd75、灰蓝 #94b0c2、绿 #38b764；所有位图用最近邻缩放（image-rendering: pixelated；canvas 设 imageSmoothingEnabled = false）；标题用位图字体（'Press Start 2P'，全大写，letter-spacing 2px）或带 2px 2px 0 硬阴影的块状大写字母，零模糊；控件做成游戏铬件 —— 分段 HP 血条（每 12px 留 2px 缝）、RPG 对话框面板（#1a1c2c 底、3px 实线 #f4f4f4 边框、border-radius 0）、用 steps(1) 闪烁的提示；明暗用棋盘抖动，绝不用渐变。动效：steps() 缓动、两帧闪烁；不要补间和柔和投影。不要滑向民间网页：不要任何浏览器默认值（蓝链接、系统衬线、平铺壁纸）；每个像素都是刻意的。文字对比度保持 4.5:1（#ffcd75/#f4f4f4 配 #1a1c2c 能过，红配夜色过不了），prefers-reduced-motion 下暂停闪烁，正文用可读的 mono 或 sans。
Accessibility & misuse可访问性与误用
Pixel and bitmap fonts are decorative: they degrade fast at small sizes and in long reading — reserve them for headings and HUD labels, set body text in a readable sans or mono, and respect each font's minimum size (most pixel fonts need 8px+ and generous line-height).
像素字体是装饰性的：字号一小、篇幅一长就垮 —— 只留给标题和 HUD 标签，正文用可读的 sans 或 mono，并守住每款字体的最小字号（多数像素字体需要 8px 以上和更大的行高）。
Blinking, flashing, and CRT-style flicker must stay under the 3-flashes-per-second seizure threshold and pause entirely under prefers-reduced-motion; scanline or screen-flicker overlays should be off by default.
闪烁、频闪和 CRT 式闪屏必须低于每秒 3 次的癫痫风险阈值，并在 prefers-reduced-motion 下完全暂停；扫描线或闪屏类叠加层默认应该关闭。
Retro palettes skew low-contrast (red on navy, green on black are classic failures): verify 4.5:1 for real text, and never encode state by hue alone — an HP bar's red versus green needs an icon or label too, or color-blind players can't read it.
复古色板普遍对比度偏低（红配藏青、绿配黑都是经典翻车组合）：正文实测 4.5:1；状态不要只用色相编码 —— 血条的红与绿要同时配图标或文字标签，否则色盲用户读不出来。
Origin起源
The look was born from hardware limits: arcade boards and consoles like Nintendo's Famicom/NES (1983) and Super Famicom/SNES (1990) forced artists into tiny sprites and indexed palettes of a handful of colors, and the teams behind games like Super Mario Bros. and Final Fantasy turned that constraint into craft. The term 'pixel art' itself dates to a 1982 letter by Adele Goldberg and Robert Flegal at Xerox PARC. Once 3D and high-color displays made the limits obsolete, the style returned as a deliberate choice — illustration collectives like eBoy in the late 1990s and the 2000s indie-game wave (Cave Story, 2004) recast it as a retro aesthetic that now surfaces in UI wherever a product wants game-era charm.
这个外观诞生于硬件限制：任天堂 Famicom/NES（1983 年）和 Super Famicom/SNES（1990 年）这类主机与街机基板，把美术师逼进微小的精灵图和只有几种颜色的索引色板里，《超级马力欧兄弟》《最终幻想》背后的团队把限制磨成了手艺。「像素艺术」这个词本身可追溯到 1982 年 Xerox PARC 的 Adele Goldberg 与 Robert Flegal 写的一封信。3D 与高彩色显示让这些限制作古之后，它作为主动选择回归 —— 90 年代末 eBoy 这样的插画团体和 2000 年代的独立游戏浪潮（《洞窟物语》，2004 年）把它重塑成一种复古美学；如今凡是我们想要游戏时代魅力的 UI 里，它都会冒出来。