🎨 UI 设计规范

Project N.E.K.O. 胶囊化 UI、品牌蓝视觉系统规范

Project-N-E-K-O 1,142 156 Updated 4mo ago

Resources

1

Install

npx skillscat add project-n-e-k-o/n-e-k-o/ui

Install via the SkillsCat registry.

SKILL.md

🎨 UI 设计规范

核心视觉标准

胶囊化 (Capsule UI): 所有交互元素使用大圆角 (border-radius: 50px)
品牌蓝 (Neko Blue): 主色 #40C5F1，描边 #22b3ff
圆润描边: 使用20层 text-shadow 矩阵实现标题描边效果

关键避坑

i18n 图标消失: 翻译更新时检测 HTML 标签，使用 innerHTML 保留图标
Select 被裁剪: 包含下拉框的容器必须设置 overflow: visible
按钮交互: Hover translateY(-1px) + Active translateY(1px) scale(0.98)

参考文档

📘 设计系统规范 - CSS 变量、颜色、组件
💎 实战经验 - 描边算法、i18n 兼容

Categories

i18n UI Components

Install

npx skillscat add project-n-e-k-o/n-e-k-o/ui

Install via the SkillsCat registry.

Repository Stars

The star count shown is for the parent repository (Project-N-E-K-O/N.E.K.O), not this specific skill.

.agent/skills/ui-system-refactor