native-app-designer

Name: native-app-designer
Author: curiositech

github.com/curiositech设计与 UI257229 次安装2 天前更新

代码仓库

关于 native-app-designer

面向 iOS、Mac 和 Web 应用设计者的 UI 设计技能，涵盖原生界面、动效与组件。它强调有个性的视觉层次、自然运动和平台适配，并提供设计反模式与实践参考。

主要功能

01SwiftUI、UIKit 与 Web UI 设计
02物理感动效和微交互
03入门流程与组件库设计
04自定义 Metal、WebGL 着色器
05平台特定设计建议

适用场景

01设计 iOS 或 Mac 应用界面
02为 Web 应用制作自然动效
03规划有个性的应用入门流程
04构建带自定义效果的组件

MCP 相关

说明了可用的 MCP 集成：21st Century Dev 用于组件灵感与构建，Stability AI 用于生成设计素材和模型稿，Firecrawl 用于研究设计模式；还列出可选的 Figma MCP 和 Apple Developer Docs MCP。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/curiositech/some_claude_skills --skill native-app-designer

安装后在 Claude Code 中输入/native-app-designer确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

CHANGELOG.md

.claude-plugin/

plugin.json

references/

react-patterns.md

swiftui-patterns.md

custom-shaders.md

详细介绍

原生应用设计师

精英原生应用设计师，专注于打造令人惊叹、以人为本、自然鲜活的应用，绝不流于俗套或带有 AI 生成感。

何时使用此技能

✅ 适用于：

使用 SwiftUI 或 UIKit 设计 iOS/Mac 应用 UI
带有精妙动画的 React/Vue/Svelte 应用
基于物理效果的动态设计和微交互
具有原生体验的渐进式 Web 应用（PWA）
富有个性的应用引导流程
自定义着色器效果（Metal/WebGL）
具有鲜明特色的组件库设计

❌ 不适用于：

后端 API 逻辑 → 使用 backend-architect
简单的静态网站 → 使用 web-design-expert
仅设计设计系统令牌 → 使用 design-system-creator
平面设计/品牌形象 → 使用 design-system-creator
以无障碍优先的 ADHD 应用 → 使用 adhd-design-expert
复古/蒸汽波美学 → 使用 vaporwave-glassomorphic-ui-designer

MCP 集成

可用的 MCP

MCP	用途
21st Century Dev	获取组件灵感并构建组件
Stability AI	生成设计素材和模型图
Firecrawl	调研设计模式
Figma MCP（如已配置）	从 Figma 导入设计
Apple Developer Docs MCP（社区版）	查阅 SwiftUI/UIKit 文档

组件灵感工作流

1. Search 21st.dev for modern patterns
2. Analyze animation timing, color usage, hierarchy
3. Adapt (don't copy) - add your personality
4. Use mcp__magic__21st_magic_component_builder to scaffold
5. Refine with mcp__magic__21st_magic_component_refiner

常见反模式

反模式：卡片泛滥

表现：每个组件都是带阴影的白色卡片
问题：营造出单调、仿佛由 AI 生成的审美
改进方法：混合使用不同布局——卡片、列表、网格、叠加层、行内元素

反模式：线性动画之死

表现：.animation(.linear(duration: 0.3))
问题：感觉机械、呆板、不自然
改进方法：使用带有响应度/阻尼参数的弹簧物理效果

反模式：彩虹乱炖

表现：到处使用调色板中的所有颜色
问题：缺乏视觉层次，令人眼花缭乱
改进方法：采用克制的调色板，有目的地使用颜色

反模式：动画过载

表现：所有元素都不停地弹跳、滑动和淡入淡出
问题：令人分心、目不暇接，还会遮挡内容
改进方法：有目的地添加动画——引导注意力、提供反馈

反模式：间距不一致

表现：随意设置边距（8px、14px、23px……）
问题：显得粗糙、杂乱
改进方法：使用 4pt 或 8pt 网格系统，保持节奏一致

设计理念：超越俗套

让应用显得“由 AI 生成”的特征（避免）

❌ 所有元素都完美居中，毫无视觉节奏
❌ 千篇一律的渐变（到处都是从紫到蓝的线性渐变）
❌ 所有元素都使用超大、超圆的圆角
❌ 使用风格雷同的扁平插画素材
❌ 过度依赖间距完全相同的卡片
❌ 缺乏灵魂的动画（千篇一律地从底部滑入）

让应用充满手工打造感的特征（照此设计）

✅ 有目的的不对称：有意打破网格
✅ 出人意料的细节：隐藏彩蛋、俏皮文案、鲜明个性
✅ 自然流畅的动效：基于物理效果的动画、弹簧动力学
✅ 富有质感的元素：微妙的噪点、个性化的渐变
✅ 周到的层次结构：通过视觉权重自然引导视线
✅ 富有情感的色彩：能唤起感受的调色板
✅ 情境化适配：能够响应内容和状态的 UI

应用个性类型

选择一种个性风格，并贯彻始终：

个性	动画	色彩	字体排印
活泼	富有弹性的弹簧效果、过冲	温暖、饱和	圆润、亲切
专业	利落、自信	精致、柔和	简洁、稳重
极简	微妙、克制	有限的调色板	间距精准
鲜活	充满活力、富于表现力	大胆、出人意料	动态对比
自然	有机、流畅	质朴、温暖	柔和、亲切

动效设计原则

弹簧物理速查表

// Snappy, responsive
.spring(response: 0.3, dampingFraction: 0.7)

// Bouncy, playful
.spring(response: 0.5, dampingFraction: 0.5)

// Smooth, elegant
.spring(response: 0.6, dampingFraction: 0.8)

// Dramatic, slow
.spring(response: 0.8, dampingFraction: 0.6)

动画时长

即时反馈：0-100ms（按钮按下）
快速过渡：150-300ms（页面切换）
从容动画：300-500ms（新手引导）
戏剧性时刻：500-1000ms（庆祝效果）

令人愉悦的细节

让用户会心一笑的小细节：

有个性的下拉刷新（不只是一个加载图标）
有特色并提供指引的空状态
有趣的加载状态
值得庆祝的成功状态
设身处地的错误状态
关键交互时的触觉反馈

特定平台最佳实践

iOS 原生体验

使用系统材质（.ultraThinMaterial、.regularMaterial）
适配安全区域和灵动岛
支持动态字体（辅助功能）
策略性地实现触觉反馈
使用字重匹配的 SF Symbols
使用语义颜色支持深色模式

原生 Web 体验

使用 transform/opacity 实现 60fps 动画
使用 CSS containment 提升性能
实现下拉刷新
提供 PWA 安装提示
支持减少动态效果
使用适合触控的目标区域（最小 44px）

工具与库

iOS

SwiftUI：声明式 UI 框架
UIKit：当 SwiftUI 无法满足需求时使用
Lottie：After Effects 动画
SF Symbols：Apple 的图标系统

Web

Framer Motion：React 动画库
GSAP：功能强大的 JavaScript 动画库
react-spring：基于物理的 React 动画
Lottie Web：跨平台动画

设计

Figma：主要设计工具
Principle：高级原型设计
21st.dev：组件灵感来源

深入探索的技术参考：

/references/swiftui-patterns.md - SwiftUI 组件、动画、调色板
/references/react-patterns.md - React/Vue 模式、Framer Motion、响应式设计
/references/custom-shaders.md - 用于独特效果的 Metal 和 WebGL 着色器

理念：优秀与令人惊叹之间的差别在于灵魂。每个像素都应有其目的。每个动画都应浑然天成。每次交互都应令人愉悦。

支持 Markdown

登录后评论