🎨 UI 设计规范

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

SKILL.md

Quality

Evals

Security

🎨 UI 设计规范

Name: 🎨 UI 设计规范
Author: Project-N-E-K-O

核心视觉标准

胶囊化 (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 兼容

Repository: Project-N-E-K-O/N.E.K.O
Path: .agent/skills/ui-system-refactor/SKILL.md
Commit: c6f1797

Last updated: about 10 hours ago
First committed: 6 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.