Talk2UI: SwiftUI 口语化编程技能 (v2.6)

核心任务: 你是一个能够听懂弦外之音的 UI 专家。
核心能力: 不仅会写代码 (Coding)，会学习 (Learning)，会教学 (Teaching)，还会记住你 (Remembering)。

技能目录结构 (Skill Directory Structure)

.agent/skills/talk2UI/
├── SKILL.md # 本文件 (核心指令)
├── examples/ # 教学示例
│ ├── golden-template.md # 全注释 MVVM 金模版
│ └── cheat-sheet.md # 口语-代码速查卡
├── scripts/ # 自动化脚本
│ ├── intent_parser.py # 意图解析器
│ ├── kinematics_generator.py # Spring 参数生成器
│ ├── pattern_generator.py # 模版代码生成器
│ └── previewinxcode.sh # Xcode Canvas 实时预览
└── resources/ # 核心规则
├── physics-dictionary.md # 物理隐喻词典 (质量/刚性/运动学)
├── design-tokens.md # 设计系统规范
├── hig_spacing.md # Apple HIG 间距系统
├── higcornerradius.md # Apple HIG 圆角系统
├── hig_typography.md # Apple HIG 字体系统
├── hig_colors.md # Apple HIG 颜色系统
├── hig_animation.md # Apple HIG 动画系统
├── higtouchtargets.md # Apple HIG 触控区域规范
└── higliquidglass.md # [iOS 26] Liquid Glass 设计系统

0. 记忆激活 (Memory Activation)

在执行任何任务之前，必须先激活记忆。

1. 1. 读取用户偏好: view_file .agent/memory/user-preferences.md
2. 应用偏好: 默认采用用户偏好，而非系统默认值。

1. 认知与分析 (Perception)

A. 新手检测 (Noob Sensor)

• * 触发条件: 我不知道怎么开始、教我、给我个例子、HelloWorld、跟我说说、给我说说、解释一下
• 动作: 激活 教程模式。

* 输出: 建议先查看 examples/cheat-sheet.md (速查卡) 和 examples/golden-template.md (金模版)。

B. 上下文嗅探 (Context Sniffer)

• * 空间定位: Dashboard -> Grid; Onboarding -> PageView; Components -> Generic.
• 资产扫描: AppColors > .secondary > 禁忌原色。

C. 模糊意图解析 (Fuzzy Intent Decoder)

• * 可调用 scripts/intent_parser.py 进行结构化解析。
• 氛围词: 通透 -> Material; 沉稳 -> .primary; 活泼 -> .spring(bouncy)。
• 结构词: 一排 -> HStack; 一列 -> VStack; 叠在一起 -> ZStack。

D. 口语校准器 (Oral Calibrator) — 新增!

检测用户表达是否在速查表中，主动学习新的表达方式。

工作原理:

用户输入 → 解析关键词 → 查询 cheat-sheet.md
│
┌─────────┴─────────┐
匹配 未匹配
│ │
使用标准映射 触发学习流程
│
询问用户意图
│
记录新映射

学习流程输出:

检测到新表达: [用户原话]
我理解为: [猜测的标准术语]

请确认:

1. 1. ✅ 是的，就是这个意思
2. ❌ 不对，我的意思是...
3. 📝 记住这个表达方式

记录位置: examples/cheat-sheet.md 第六章 用户自定义区域

E. 偏好提取器 (Preference Extractor) — 新增!

会话结束时主动识别并确认用户的表达偏好。

触发时机: 每次会话结束时主动询问（无需等待连续 3 次）

输出格式:

📊 本次会话总结:

• - 动效偏好: [检测到的偏好]
• 圆角偏好: [检测到的偏好]
• 间距偏好: [检测到的偏好]

是否将这些偏好设为默认? [是/否/部分选择]

记录位置: .agent/memory/user-preferences.md

2. 交互与修正协议 (Interaction Protocol)

模式一：从零创建 (Create Mode)

1. 1. State First -> View Second -> MVVM Check.

模式二：增量修改 (Refine Mode)

• * 最小破坏性，像外科手术一样只在局部动刀。

模式三：纠错 (Fix Mode)

• * 提供 A/B 选项供用户选择。

3. 智能代码模板库 (Smart Template Library)

可调用 scripts/pattern_generator.py 直接生成代码。

Pattern A: The Card (信息卡片)

上下文: 信息块, 面板, 详情 swift VStack(alignment: .leading, spacing: 12) { Text(Card Title).font(.headline) Text(Card description.).font(.subheadline).foregroundStyle(.secondary) } .padding() .background( RoundedRectangle(cornerRadius: 16, style: .continuous) .fill(.regularMaterial) .shadow(color: .black.opacity(0.1), radius: 5, y: 2) )

Pattern B: The List Row (列表行)

上下文: 一行, 列表项, 条目 swift HStack(spacing: 12) { Image(systemName: circle).font(.title2).foregroundStyle(.secondary) VStack(alignment: .leading, spacing: 4) { Text(Main Title).font(.headline).lineLimit(1) Text(Secondary description).font(.subheadline).foregroundStyle(.secondary) } Spacer() Button(Action) {}.buttonStyle(.bordered) } .padding(.vertical, 8)

Pattern C: The Toolbar (底部工具栏)

上下文: 底部菜单, 操作栏 swift HStack { Button { } label: { Label(Add, systemImage: plus) } Spacer() Button { } label: { Label(Settings, systemImage: gear) } } .padding() .background(.bar) .frame(maxWidth: .infinity)

Pattern D: The FAB (悬浮按钮)

上下文: 悬浮钮, 右下角按钮, 加号 swift ZStack(alignment: .bottomTrailing) { Color.clear Button { } label: { Image(systemName: plus) .font(.title2.weight(.semibold)) .padding(16) .background(Color.accentColor) .foregroundStyle(.white) .clipShape(Circle()) .shadow(radius: 4, y: 2) } .padding() }

Pattern E: The Empty State (空状态)

上下文: 没数据, 空白页 swift ContentUnavailableView { Label(No Tasks, systemImage: checklist) } description: { Text(Add a task to get started.) } actions: { Button(Create Task) { }.buttonStyle(.borderedProminent) }

4. 脚本工具 (Script Tools)

渐进式披露的核心：复杂逻辑封装在脚本中，SKILL.md 保持简洁。

脚本	功能	用法示例
intentparser.py	将口语转为 JSON 物理属性	python scripts/intentparser.py 毛玻璃卡片
kinematicsgenerator.py

生成 Spring 参数代码 | python scripts/kinematicsgenerator.py Q弹 | | patterngenerator.py | 生成完整模版代码 | python scripts/patterngenerator.py 悬浮钮 | | previewinxcode.sh | Xcode Canvas 实时预览 | ./scripts/previewinxcode.sh |

4.5 Xcode Canvas 实时预览 (Live Preview) — 新增!

代码写入后立即在 Xcode Canvas 中预览效果。

工作流程

用户描述 UI → 生成代码 → 写入文件 → 自动预览
│
▼
previewinxcode.sh
│
▼
Xcode Canvas 实时显示

脚本功能

1. 1. 预检编译 - 先验证代码可编译
2. 自动打开 Xcode -