home / skills / project-n-e-k-o / n.e.k.o / ui-system-refactor

ui-system-refactor skill

safe

This skill helps you apply Capsule UI and Neko Blue branding guidelines to your interfaces, ensuring cohesive visuals and accessible interactions.

npx playbooks add skill project-n-e-k-o/n.e.k.o --skill ui-system-refactor

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

858 B

---
name: 🎨 UI 设计规范
description: Project N.E.K.O. 胶囊化 UI、品牌蓝视觉系统规范
---

# 🎨 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 兼容

Overview

This skill documents the UI design standard for Project N.E.K.O., focusing on a capsule-style interface and a distinct brand-blue visual system. It provides concrete CSS patterns, interaction rules, and common pitfalls with pragmatic fixes to keep components consistent across the metaverse product.

How this skill works

The specification prescribes core tokens (colors, radii, borders), component micro-interactions, and visual algorithms such as a multi-layer text-shadow matrix for soft outline effects. It highlights integration checkpoints for localization and container layout to avoid runtime visual bugs. Implementers follow the rules to create consistent, brand-aligned UI components and assets.

When to use it

When building new components or page templates for Project N.E.K.O.
When theming or skinning existing UI to match the brand-blue system
When implementing localization to avoid icon loss during translation updates
When fixing dropdown clipping or inconsistent button interactions
When creating marketing or in-app visuals that must match the metaverse aesthetic

Best practices

Use a single set of CSS variables for colors, radii, and shadow parameters to ensure consistency
Apply border-radius: 50px for all interactive elements to enforce the capsule look
Implement the 20-layer text-shadow matrix centrally so headers share the same outline algorithm
Preserve inline icons during i18n by updating innerHTML safely or using template-aware renderers
Set overflow: visible on containers that host native select/dropdown elements to prevent clipping
Standardize button interactions: hover -> translateY(-1px); active -> translateY(1px) scale(0.98)

Example use cases

Building a reusable button library that follows capsule geometry and interaction rules
Creating a header component that uses the 20-layer text-shadow for brand-consistent titles
Fixing localization regressions where translated strings removed embedded SVG icons
Designing dropdown menus inside complex layouts without clipping issues
Onboarding new engineers with a concise checklist of visual tokens and interaction specs

FAQ

How do I keep icons when swapping translated HTML content?

Update the element’s innerHTML using a safe template or preserve icon nodes; avoid blind text-only replacements that strip markup.

What radius should I use to match the capsule style?

Use border-radius: 50px for interactive elements to maintain the capsule silhouette across components.