ChunUI README

The project's README from github.com/liseami/ChunUI. As one markdown file: README.md.

ChunUI

Define your palette. Ship the same texture.

ChunUI 是从生产级 iOS 应用 Zinner（阿奇） 中提取的 SwiftUI 设计系统——黑白灰阶 + 唯一品牌色的 Monochrome 质感、微拟物按钮、原生 sheet 标准、Metal shader 特效与点阵动画，全家桶开箱即用。

你只需要定义自己的配色，就能做出同质感的应用。

GalleryButtonsCards & TagsAI EffectsAmbientShader Zoo 

import ChunUI

// App 启动时，一行换肤
var colors = CCColors.default          // Zinner 同款极致黑白粉
colors.primary = .hex("007aff")        // 换成你的品牌色
ChunUI.configure(colors: colors)

// 之后全组件族自动着装
CCNeoButton("开始", variant: .primary) { await start() }
Text("标题").ccText(font: .cc.lgBold, color: .cc.foreground)

AI Agent Skill

仓库自带 skills/chunui/ —— 分门别类教 AI 编程助手搭出同级质感：

Claude Code：

# 项目级（推荐，随仓库走）
mkdir -p .claude/skills && cp -R /path/to/ChunUI/skills/chunui .claude/skills/
# 或全局
cp -R /path/to/ChunUI/skills/chunui ~/.claude/skills/
# 或经 skills CLI
npx skills add liseami/ChunUI

Codex / 其他 Agent：把 skills/chunui/SKILL.md 内容追加进项目 AGENTS.md（或在其中写一行指引：ChunUI 用法见 skills/chunui/SKILL.md）。

Cursor：拷入 .cursor/rules/chunui.mdc。

安装后，Agent 会在涉及 ChunUI 的任务里自动遵循组件规范与架构铁律。

安装

Swift Package Manager，iOS 18.6+（iOS 26 自动启用 Liquid Glass，18.6–25 同形微拟物降级）：

.package(url: "https://github.com/liseami/ChunUI", branch: "main")

里面有什么

域 内容
Theme CCColors 语义调色板（shadcn 同构：background/card/panel/muted/accent/destructive…）、Font.cc 三梯度字号铁律、CGFloat.cc 间距/圆角令牌、CCMotion 全局动画曲线（reveal 零过冲 / wave 微过冲错峰）
按钮 CCNeoButton 微拟物五变体×三尺寸（async loading + glow/shake 按压）、GlassButton/MetalGlassButton/GlassIconButton 玻璃族（iOS 26 Liquid Glass / 以下微拟物同形降级）
Sheet 标准 AppHelper.presentSheet(.form/.half/.compact/.picker) 原生 UISheetPresentationController 深度调参：detents/脏态下拉确认/zoom 锚点转场/贴底吞安全区
Toast / Alert CCToastCenter 单槽玻璃胶囊 toast（loading 常驻顶换）＋ 沉底双胶囊 Alert（Twitter 风，禁 UIAlert）
特效 CCAuroraLayer AI 工作态极光（Metal）、CCGeneratingCover 呼吸点阵生成中质感、CCFractalFloor 九分形点阵地板、CCSweepLight 转场扫光、ParticleDissolve 粒子消散、Holographic/MetaBalls/Silk/Beams/Noise 全套 shader
氛围 FluidGradient 流体渐变、Orb 拟物 AI 球（发光/粒子/波浪）、CCRainbowBar 彩虹进度、CCSkeleton 扫光骨架屏、StreamingText 流式打字
表单/卡片 CCInput/CCTextArea/CCToggle/CCCheckbox/CCDatePicker、CCAppleCard 连续圆角三级软阴影、CCCuteTag/CCKeycapTag
图标 PikaIcon —— 1225 枚 24×24 stroke 模板矢量随包分发，可染色可缩放
基建 VariableBlurView 渐进模糊、ccFloatingPageHeader 页面 chrome 范式、相机/相册选择器、InAppBrowser、Markdown 渲染

设计哲学

  1. 唯一彩色：灰阶承载一切层级，品牌色是页面上唯一的彩色——这是同质感的根。
  2. 三梯度字号铁律：全应用只有 sm 13 / base 17 / lg 24 三个字号。
  3. 组件级触觉与埋点：按钮自带按压反馈；CCTrack.onTap 接线座让宿主埋点系统零侵入接入。
  4. 配置即代码：ChunUI.configure(colors:strings:) 是唯一初始化入口；文案表 CCStrings 可整体覆写做本地化。

宿主可注入的接线座

ChunUI.hapticsEnabled = userPrefs.haptics          // 触觉总开关
ChunUI.sheetPresentHook = { _, name in Analytics.page(name) }  // sheet 呈现埋点
CCTrack.onTap = { Analytics.tap($0) }              // 组件级点击埋点
CCImageLoader.custom = { url, _ in                 // 用 Kingfisher 接管网络图
    AnyView(KFImage(url).resizable())
}
AppHelper.toastRouteResolver = { ... }             // toast 气泡路由策略

依赖

示例 App

Example/ChunUIGallery.xcodeproj 是可直接运行的组件画廊（xcodegen 生成，引用本地包）——按 Foundation / Controls / Feedback / Text / Effects / Ambient / Icons 分区展示全部组件与特效。画廊源码在 Sources/ChunUIDemo/，同时充当公开 API 面的编译级测试。

open Example/ChunUIGallery.xcodeproj   # 选模拟器直接 Run

License

MIT.

Extracted with care from Zinner. Texture is a feature.

ChunUI (liseami/ChunUI)

Searching Database…

538 ·GitHub
ChunUI
这是什么？ChunUI 是从正式上架的 iOS 应用 Zinner 中提炼出来的 SwiftUI 设计系统，为你提供一套现成的单色视觉语言：灰阶加一种品牌色、拟物风格（neumorphic）按钮、原生 sheet 弹出、Metal 着色器效果和点阵动画。
这是一个 UI 框架，还是我可以放进自己应用里的组件库？它是一个包含 SwiftUI 组件、主题令牌和效果的 Swift Package，需要添加到现有应用中，而不是能独立运行的框架。
我怎么把它加进项目？通过 Swift Package Manager 把它添加为依赖即可；它面向 iOS 18.6 或更高版本。
它会引入第三方依赖吗？只有一个——Pow（MIT 许可），用于按钮按压的发光/抖动反馈。
我需要 iOS 26 才能获得 Liquid Glass 的外观吗？不需要——在 iOS 26 上真正的 Liquid Glass 会自动启用，而 iOS 18.6 到 25 则退回到视觉上相近的拟物风格。
谁最能从中受益——任何 SwiftUI 开发者，还是使用 AI 编程智能体的团队？任何 iOS 开发者都可以直接使用这些组件，但仓库还附带 skills/chunui/，它向 Claude Code、Codex 或 Cursor 等 AI 编程助手传授 ChunUI 的规范，让它们能自动构建风格一致的界面。
我如何应用自己的配色方案？调用一次 ChunUI.configure(colors:strings:) 即可——它是主题化的唯一初始化入口，CCStrings 文本表也可以为本地化而完全重写。
附带的 AI Agent Skill 文件夹里实际有什么？skills/chunui/ 包含一个带架构规则的 SKILL.md 入口、主题/呈现/效果的使用指南、完整的组件参考，以及五个智能体可以学习的真实生产界面示例。
PikaIcon 是什么？PikaIcon 是随包附带的一套共 1,225 个 24x24 线条矢量图标，可以自由着色和缩放。
ChunUI 为什么把自己限制为一种品牌色和三个字号？设计哲学是：灰阶承担全部视觉层级，单一品牌色是唯一的亮色点缀；而坚持只用三个字号（13/17/24）能让每个界面在视觉上保持一致。
What are similar projects?swiftui-logo-draw, app-store-screenshots, gpui-kit, react-native-ui-kitten, animated-tab-bar, bolt-slides, tabler, animal-island-ui
Which topics is it in?liquid-glass, swift-package-manager, shaders, ui-kit, icons, swiftui, design-system, theme, agent-skill, apple, component-library, cursor
Creator
liseami
Size
1 MB
Stars
538
Updated
CommitOct 13
Age
2mo
Commits · 90 Days