SuperAPI AI 工具集

8-bit-pixel-art-patterns

通用与其它

查看项目

更新于 10-15 23:57

技能介绍

用途:为 8-bit 复古风格 UI 组件创建像素化的边框、阴影和特效,让组件呈现真实的像素艺术外观。

主要能力:提供像素化边框、像素化阴影和图标按钮三种图案。边框用 9 个 div 元素实现,包含四角像素与边缘分段;阴影通过顶部和底部的分段色块增加层次感;图标按钮使用更小、自包含的像素边框。

使用方式:在相对定位容器内放置基础组件(如 ShadcnButton,并加 rounded-none),再用绝对定位的 div 绘制边框与阴影。关键原则包括:移除基础组件的圆角、使用固定像素尺寸(如 1.5、3px)、所有边框元素绝对定位、深色模式使用 ring 或 foreground 的 dark 变体保证对比度、按变体条件渲染(ghost、link、icon 等不显示边框)。完整实现可参考 components/ui/8bit/button.tsx。

适用场景:构建 8-bit 复古风格的按钮、图标按钮等 UI 组件。

限制:资料未提供安装命令、依赖版本、浏览器兼容性、性能数据及收费信息。