‹ 首页

ui

@project-n-e-k-o · 收录于 昨天 · 上游提交 昨天

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

场景ui设计品牌视觉

适合你，如果你需要统一品牌视觉的UI设计规范

/ 下载安装
https://github.com/project-n-e-k-o/n.e.k.o/tree/main/.agent/skills/ui-system-refactor ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add project-n-e-k-o/n.e.k.o/ui
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- project-n-e-k-o/n.e.k.o/ui
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify project-n-e-k-o/n.e.k.o/ui
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
2258GitHub stars
~254最小装载
~2K含声明引用
~2K文本包总量
索引托管

怎么用

商店整理自技能原文 · 版本 b0c3c15 · 表述以原文为准
它做什么

装上后，Claude 会使用胶囊化 UI 风格（大圆角、品牌蓝主色 #40C5F1、圆润描边）来设计和呈现界面元素。

什么时候触发

当你要求设计或修改用户界面（如按钮、表单、布局）时触发。

装好后可以这样说
会生成大圆角蓝色按钮。
会应用 Neko Blue 主色。
技能原文 SKILL.md作者撰写 · Apache-2.0 · b0c3c15

🎨 UI 设计规范

核心视觉标准
  1. 胶囊化 (Capsule UI): 所有交互元素使用大圆角 (border-radius: 50px)
  2. 品牌蓝 (Neko Blue): 主色 #40C5F1，描边 #22b3ff
  3. 圆润描边: 使用20层 text-shadow 矩阵实现标题描边效果
关键避坑
  • i18n 图标消失: 翻译更新时检测 HTML 标签，使用 innerHTML 保留图标
  • Select 被裁剪: 包含下拉框的容器必须设置 overflow: visible
  • 按钮交互: Hover translateY(-1px) + Active translateY(1px) scale(0.98)
参考文档
  • 📘 [设计系统规范](references/design-system.md) - CSS 变量、颜色、组件
  • 💎 [实战经验](references/valuable-experiences.md) - 描边算法、i18n 兼容
按 Apache-2.0 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…