talk2UI

SwiftUI 口语化编程技能。当用户用中文描述 UI 需求（如"做一个毛玻璃卡片"、"按钮要跟手"、"这个元素是主角"）时激活此技能，将口语转化为符合物理隐喻规范的 SwiftUI 代码。

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "talk2UI" with this command: npx skills add soponcd/talk2ui

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    # 模版代码生成器
│   └── preview_in_xcode.sh     # Xcode Canvas 实时预览
└── resources/                  # 核心规则
    ├── physics-dictionary.md   # 物理隐喻词典 (质量/刚性/运动学)
    ├── design-tokens.md        # 设计系统规范
    ├── hig_spacing.md          # Apple HIG 间距系统
    ├── hig_corner_radius.md    # Apple HIG 圆角系统
    ├── hig_typography.md       # Apple HIG 字体系统
    ├── hig_colors.md           # Apple HIG 颜色系统
    ├── hig_animation.md        # Apple HIG 动画系统
    ├── hig_touch_targets.md    # Apple HIG 触控区域规范
    └── hig_liquid_glass.md     # [iOS 26] Liquid Glass 设计系统

0. 记忆激活 (Memory Activation)

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

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

1. 认知与分析 (Perception)

A. 新手检测 (Noob Sensor)

  • Trigger: "我不知道怎么开始"、"教我"、"给我个例子"、"HelloWorld"、"跟我说说"、"给我说说"、"解释一下"
  • Action: 激活 Tutorial Mode。
    • 输出: "建议先查看 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. ✅ 是的，就是这个意思
2. ❌ 不对，我的意思是...
3. 📝 记住这个表达方式

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

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

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

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

输出格式:

📊 本次会话总结:
- 动效偏好: [检测到的偏好]
- 圆角偏好: [检测到的偏好]
- 间距偏好: [检测到的偏好]

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

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

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

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

  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" (信息卡片)

Context: "信息块", "面板", "详情"

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" (列表行)

Context: "一行", "列表项", "条目"

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" (底部工具栏)

Context: "底部菜单", "操作栏"

HStack {
    Button { } label: { Label("Add", systemImage: "plus") }
    Spacer()
    Button { } label: { Label("Settings", systemImage: "gear") }
}
.padding()
.background(.bar)
.frame(maxWidth: .infinity)

Pattern D: The "FAB" (悬浮按钮)

Context: "悬浮钮", "右下角按钮", "加号"

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" (空状态)

Context: "没数据", "空白页"

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 保持简洁。

脚本功能用法示例
intent_parser.py将口语转为 JSON 物理属性python scripts/intent_parser.py "毛玻璃卡片"
kinematics_generator.py生成 Spring 参数代码python scripts/kinematics_generator.py "Q弹"
pattern_generator.py生成完整模版代码python scripts/pattern_generator.py "悬浮钮"
preview_in_xcode.shXcode Canvas 实时预览./scripts/preview_in_xcode.sh <file.swift>

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

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

工作流程

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

脚本功能

  1. 预检编译 - 先验证代码可编译
  2. 自动打开 Xcode - 定位到目标 Swift 文件
  3. 触发 Canvas 显示 - 通过 AppleScript 自动化

使用方法

# 在代码写入后调用
./.agent/skills/talk2UI/scripts/preview_in_xcode.sh <目标文件.swift>

同步机制

  • 文件保存后: Canvas 自动重新编译并刷新
  • 手动刷新: Cmd + Option + P
  • 显示/隐藏 Canvas: Cmd + Option + Return

最佳实践

  • 建议并排布局：左侧终端 + 右侧 Xcode
  • 保持 Xcode Canvas 处于 Resume 状态
  • 编译错误会阻止预览，需先修复

5. 自进化与沉淀 (Evolution & Accumulation)

A. 模式归档

发现新模式 -> 建议归档 -> 按格式写入本文件末尾。

B. 设计系统沉淀

反复硬编码 -> 建议定义为 DesignToken。

6. 安全阻断 (Safety)

  • 绝不使用 GeometryReader 做常规布局。
  • 绝不使用 UIScreen.main.bounds。
  • 图标必须 .fixedSize()。
  • 按钮触控区 >= 44pt。

7. Xcode 26 增强特性 — 新增!

A. #Playground 宏集成

在代码中直接测试生成的片段，无需切换文件。

// 生成代码时自动包含可测试片段
#Playground {
    MyGeneratedView()
        .previewLayout(.sizeThatFits)
}

使用场景:

  • 快速验证组件渲染
  • 测试不同参数组合
  • 无需完整 Preview 环境

B. Liquid Glass 支持

iOS 26 全新设计语言。

口语映射:

用户说生成代码
"毛玻璃".glassEffect()
"液态玻璃".glassEffect(in: .capsule)
"玻璃卡片".containerBackground(.glass)

资源: 详见 resources/hig_liquid_glass.md

C. SwiftUI Instrument 验证

使用 Xcode Instruments 2.0 验证性能。

# 在验证阶段可选执行
xcrun xctrace record --template 'SwiftUI' --attach <PID>

检查项:

  • Body 重绘频率
  • State 变更追踪
  • 布局计算耗时

D. 性能优势

Xcode 26 / iOS 26 性能提升:

  • macOS List 渲染快 6x
  • List 更新快 16x
  • Lazy Stack 延迟渲染优化

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open Registry RecordOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

Img2img

Generate images from text descriptions using DALL-E 3 while adhering to usage policies and avoiding realistic human faces.

Registry SourceRecently Updated
2270binkosun
General

Habitat-GS-Navigator

Navigate and interact with photo-realistic 3DGS environments via the Habitat-GS Bridge. Use when: user asks to explore a 3D scene, perform embodied navigatio...

Registry SourceRecently Updated
1870the0xka1
General

Memory Palace

持久化记忆管理。Use when: 用户告诉你个人信息/偏好/习惯、需要记住项目状态/技术决策、完成任务后有可复用经验、用户说"记住""别忘了""下次注意"、需要回忆之前的对话内容。支持语义搜索和时间推理。

Registry SourceRecently Updated
5580lanzhou3
General

Podcast Transcript Mining Authority Positioning

Extract guest appearances, speaking topics, and soundbites from podcast transcripts to build authority portfolios and generate podcast pitch templates. Use w...

Registry SourceRecently Updated
1860ncreighton