10 种顶级 UI 设计风格 Skills，让你的 AI 生成界面从土味变惊艳！

UI-SKILLS 是一套 UI 设计风格工具包，包含 10 种顶级设计语言，每一种都是经过验证的、经久不衰的设计系统。只需要告诉 AI "用这个 SKILL"，就能生成风格高度一致的 UI 界面。

🎨 10 种设计风格全景图

每一种风格都代表了全球顶级科技公司的设计语言精华，可以直接用于 AI 生成。

🌌 01 · Linear 式极简深色

调性： 精准、专业、极客
色彩： 深黑背景 + 品牌靛蓝紫
核心： Inter 字体 + 负字间距 | 半透明边框系统 | 多层阴影 | 状态指示器
场景： AI 代码助手、SaaS 管理后台、开发者平台
品牌： Linear、Vercel、Raycast

📝 02 · Notion 式温暖极简

调性： 亲和、创作、放松
色彩： 暖白背景 + Notion 蓝
核心： 近黑文字替代纯黑 | 超薄 1px 边框 | 超柔和阴影 | 8px 基础间距
场景： 笔记工具、文档协作、教育科技、创意写作
品牌： Notion、Obsidian、Craft

🎯 03 · Figma 式工具美学

调性： 创意、专业、灵活
色彩： 纯黑 + 纯白
核心： 严格黑白界面 | 变量字体极端权重 | 胶囊按钮(50px) | 虚线焦点环
场景： 设计工具、无代码平台、开发者文档
品牌： Figma、Canva、Framer

💻 04 · Supabase 式终端美学

调性： 技术、硬核、开发者
色彩： 近纯黑 + 翡翠绿
核心： HSL 透明层级 | Source Code Pro | Pill 按钮(9999px) | 终端原生感
场景： 数据库管理、API 平台、云基础设施
品牌： Supabase、GitHub Desktop

💳 05 · Stripe 式精致奢华

调性： 信任、精致、专业
色彩： 纯净白底 + Signature 紫
核心： 300 字重超轻标题 | 蓝调多层阴影 | 保守圆角(4-8px) | 金融级信任
场景： 支付平台、SaaS 定价、发票工具
品牌： Stripe、Square、Plaid

🍎 06 · Apple 式戏剧极简

调性： 高级、戏剧、尊贵
色彩： 纯黑 + 浅灰
核心： SF Pro Display | 极致留白(80-120px) | 动态岛设计 | 戏剧性光效
场景： 高端消费品牌、产品官网、品牌叙事
品牌： Apple、Nothing、Tesla

🚀 07 · Vercel 式暗黑未来

调性： 前沿、极简、技术
色彩： 纯黑 + 纯白
核心： 纯黑白对比 | Geist Sans | 4px 微圆角 | 三角形 Logo 叙事
场景： 开发者工具、API 文档、技术官网
品牌： Vercel、Next.js、Turbo

🎮 08 · Nintendo 式童趣活力

调性： 快乐、包容、游戏化
色彩： 纯白 + 任天堂红
核心： 超大圆角(16-24px) | 鲜艳色彩块 | 游戏化交互 | 趣味图标
场景： 儿童产品、游戏平台、教育娱乐
品牌： Nintendo、Duolingo、Roblox

🪐 09 · GitHub 式中性工程

调性： 冷静、专业、可靠
色彩： 暗色背景 + 蓝调灰
核心： 系统字体栈 | 6px 圆角 | Octicon 图标 | 代码优先 UI
场景： 代码托管、开发者社区、技术文档
品牌： GitHub、GitLab、Bitbucket

🎨 10 · Nothing 式透明科技

调性： 工业、创新、未来
色彩： 深灰 + 白色
核心： 点阵字体 | 透明玻璃效果 | 工业线条 | 机械纹理
场景： 硬件展示、科技品牌、创新产品
品牌： Nothing、Teenage Engineering

🛠 怎么用？

1. 选择一种设计风格（比如 Linear 式极简深色）
2. 把对应的 SKILL 文件喂给 AI（Claude Code / Cursor / Windsurf 等）
3. 告诉 AI："用这个 SKILL 的风格来设计界面"
4. AI 会按照该风格的设计语言生成高度一致的 UI

💡 适用场景

• 用 Claude Code 快速生成特定风格的 UI 组件
• Cursor 中保持项目整体设计一致性
• 快速原型设计，直接产出生产级界面
• 设计团队与 AI 协作时统一设计语言

总结

UI-SKILLS 的核心价值在于：把隐性的设计知识变成显性的 AI 指令 。不需要你精通每种设计风格的细节，只需要一个 SKILL 文件，AI 就能输出专业级的 UI 设计。

项目地址：https://github.com/uxiuwu/ui-skills