smithery.ai

🎨 UI 设计规范

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

First seen Mar 20, 2026

Installation

$ npx skills add https://smithery.ai

View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs

agent-browser Same topic

vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs

vercel-react-best-practices Same topic

vercel-labs/agent-skills 697.8K installs

web-design-guidelines Same topic

vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs

microsoft-foundry Same topic

microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs

azure-diagnostics Same topic

microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai

smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 858 B
docs SUMMARY.md 69 B

History

Mar 20, 2026 First seen on skills.sh
Sep 9, 2026 First recorded snapshot · 4 installs

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)

参考文档

📘 [设计系统规范](references/design-system.md) - CSS 变量、颜色、组件
💎 [实战经验](references/valuable-experiences.md) - 描边算法、i18n 兼容

npx skills add https://smithery.ai