像素风
Pixel Art UI
别名:像素风像素游戏界面8位机风格马赛克复古风点阵字界面pixel art UI8-bit UIpixel retro
这是什么
用硬像素边缘、有限色板与点阵字形表示「游戏机记忆」的界面视觉语言。锯齿即正确， 缩放必须整数倍，抖动网点做过渡。刻意站在抗锯齿的对立面。
开发规格
字体
点阵字体或等宽体，字号整数倍
色彩
6 色以内的有限调色板，高对比硬切
边框
2px 纯色像素描边，圆角 0
阴影
硬偏移像素块投影，无模糊
间距
8px 网格对齐，元素贴像素格
动效
无补间，步进式的瞬时切换
状态反馈
hover 换用高亮像素色；focus 用 2px 像素可见描边；active 位移一个像素块；disabled 降为两档灰；error 用红像素块
风格演示
先看整页效果，再试交互场景整页预览
PRESS
START
整数倍缩放，锯齿即正确。
NO ANTI-ALIASING ALLOWED.
INSERT COIN →不做抗锯齿
六色封顶
两色交替
交互场景
正在加载演示…
✓ 适用场景
- 游戏、独立游戏发行、复古主题产品，风格即世界观
- 想用点阵与有限色制造怀旧亲和，或做游戏化进度反馈
- 徽章、成就、状态点等小尺寸图标需要强识别
✕ 不适用场景
- 长文阅读与高密度表格，点阵字放大后可读性崩坏
- 需要连续渐变、照片展示、平滑动效的场景
- 正式政企金融界面，像素语汇会削弱可信度
常见形式
8位复古
8-bit retro
NES 式硬边与 3～6 色调色板，黑描边像素块
现代像素
Modern pixel
高分辨率像素网格，色板更宽，圆角用像素阶梯近似
等距像素
Isometric pixel
2:1 等距投影小场景，像 SimCity 小地图
实现要点
image-rendering: pixelatedborder-radius: 0font-family: monospacebox-shadow: 多层硬阶梯模拟圆角background: repeating-conic-gradient() 抖动网点像素感的铁律是整数倍缩放：素材按 1x 设计，展示用 transform: scale(整数) 或 image-rendering: pixelated。 圆角用 box-shadow 多层硬阶梯近似，或直接用直角。过渡渐变用抖动：repeating-conic-gradient 交替两色。 字体用点阵字体（如 Press Start 2P）或等宽体加 letter-spacing 模仿。深色模式换调色板但保持同一网格。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中实现 Pixel Art UI 像素风视觉风格。 先检查现有图标与字体资源，像素素材按整数倍缩放管理。 要求： - 硬像素边缘，border-radius 0，描边用纯色像素块 - 调色板收敛到 6 色以内，渐变一律抖动网点 - 点阵字或等宽体，字号取整数倍 - 按钮按下位移吃掉硬阴影；image-rendering: pixelated 用于位图 - 深色模式换调色板暗档；文字对比度达标 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。
风格相似概念"过去的人想象中的未来"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。
风格相似概念"High tech, low life" 的视觉语言：近黑的深底上，霓虹青与品红发光描边切割 界面，等宽字体与终端符号贯穿，扫描线 故障位移 毛刺纹理营造信息系统过载 的压抑未来感。光是从黑暗里切出来的，界面像一台被劫持的显示器。
风格搭配使用用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件影响组件用横条从左到右填充来表示任务完成比例的加载指示，常配百分比或步骤文字。 适用于时长可预测的确定性任务：上传、下载、安装与分步表单。
组件影响组件