# Figma Ios Navigation

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-mythkiven-figma-ios-codegen-figma-ios-navigation`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mythkiven](https://agentstack.voostack.com/s/mythkiven)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mythkiven](https://github.com/mythkiven)
- **Source:** https://github.com/mythkiven/figma-ios-codegen/tree/main/.cursor/skills/figma-ios-navigation
- **Website:** https://github.com/mythkiven/figma-ios-codegen/tree/main/docs

## Install

```sh
agentstack add skill-mythkiven-figma-ios-codegen-figma-ios-navigation
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Figma → 导航栏 + ViewController 基类

> **宿主配置**：`.cursor/bindings/host.json`（说明见 [PROJECT_BINDING](../figma-ios-PROJECT_BINDING.md)）  
> 颜色 / iconfont：分别查 `color_map.json` / `iconfont_map.json`，不要在 skill 里写死宿主类名。

## ⚡ QUICK_REF

```
识别导航栏      → 节点名含 nav/导航 OR 顶部 y≤60 且 width≥90%屏宽（规则不变）
数据来源        → design.json[node]
VC 基类         → host.json bases.view_controller
导航实现        → host.json navigation.strategy = system | custom
工具表达式      → host.json utils.*
iconfont        → iconfont_map.json
颜色/字体       → color_map.json / font_map.json
```

---

## 一、ViewController 基类（读 host.json）

生成 VC 时：

1. 基类 = `host.bases.view_controller`（Collection/Table 页用对应字段）
2. 类名前缀按 PROJECT_BINDING §0 / `host.class_prefix`
3. 若 `host.vc_required_overrides` 非空 → **每个 VC 都必须输出**其中的方法；`{has_custom_nav}` 替换为 `true`（本页用了自定义导航）或 `false`
4. 若 `host.base_is_objc == true` → 重写基类方法必须加 `@objc`

`vc_required_overrides` 为空（vanilla）→ **不**强制 `isHideNavigationWhenPush` 之类宿主钩子。

---

## 二、导航栏识别规则（优先级从高到低）

### 规则 1：节点命名（最高优先级）

节点 `name` 包含以下关键词之一（大小写不敏感）→ 判定为导航栏：

| 关键词（中文）| 关键词（英文）| 示例 |
|-------------|--------------|------|
| `导航` / `导航栏` / `导航条` | `navigation` / `navbar` / `nav bar` / `nav_bar` | `通用组件/导航栏/左右icon导航栏` |
| `顶栏` / `标题栏` | `titlebar` / `title bar` | `顶栏/深色` |
| 含 `nav` 且非业务词 | `nav-header` / `top-nav` / `navBar` | `nav-container` |

**排除**：节点名含 `导航抽屉` / `侧边导航` / `bottom navigation` → 不是顶部导航栏。

### 规则 2：层级与位置特征（中优先级）

满足以下**全部**条件 → 判定为导航栏：

- 节点类型为 FRAME 或 INSTANCE
- 位于画布顶部：`y ≤ 60`（含状态栏高度）且 `y + height ≤ 100`
- 宽度接近全屏：`width ≥ 屏幕宽度 × 0.9`
- 高度合理：`40 ≤ height ≤ 100`

### 规则 3：子节点特征（辅助判断）

- **返回按钮**：子节点名含 `back` / `返回` / `XxxViewController: UIViewController {  // bases.view_controller
    override func viewDidLoad() {
        super.viewDidLoad()
        title = "标题"  // 来自 Figma TEXT
        navigationItem.leftBarButtonItem = UIBarButtonItem(...)  // iconfont_map / 系统图
    }
}
```

#### B. `strategy == "custom"`

使用 `host.navigation.custom_nav_class` / `custom_nav_item_class`，尺寸用 `utils.screen_width` 与 `utils.status_bar_nav_height`（**原样粘贴表达式**）。

示意（类名来自 host，勿写死宿主类名）：

```swift
class XxxViewController: /* bases.view_controller */ {

    private lazy var navigationView: /* custom_nav_class */ = {
        let nav = /* custom_nav_class */(frame: CGRect(
            x: 0, y: 0,
            width: /* utils.screen_width */,
            height: /* utils.status_bar_nav_height */
        ))
        // 标题 / 颜色 / icon：color_map + iconfont_map
        return nav
    }()

    // 若 vc_required_overrides 含 isHideNavigationWhenPush 等，按模板输出
    // {has_custom_nav} = true

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(navigationView)
        navigationView.snp.makeConstraints { make in
            make.top.leading.trailing.equalToSuperview()
            make.height.equalTo(/* utils.status_bar_nav_height */)
        }
    }
}
```

示例配置（MK）见 `bindings/examples/mk/host.json`（含自定义导航类与 VC overrides）。

### 左右位置

| 位置 | 条件 |
|------|------|
| 左 | `x + width/2  父宽×2/3` |

---

## 四、边缘情况

### 仅有状态栏占位

不生成自定义导航；高度用 `utils.status_bar_height`。

### 状态栏 + 导航栏两个 INSTANCE

合并为一个自定义导航（若 strategy=custom），高度用 `status_bar_nav_height`。

### 疑似导航但无标准命名

位置符合规则 2 → 生成并加注释说明节点 id。

### 不应识别

- 底部 TabBar：`y > 屏高×0.8`
- 弹窗内顶栏
- 列表 section header

### 多个右侧按钮

按 Figma 从左到右添加；icon 一律走 iconfont_map。

---

## 相关

- [PROJECT_BINDING](../figma-ios-PROJECT_BINDING.md) / [bindings/README](../bindings/README.md)
- [iconfont-mapping](../figma-ios-iconfont-mapping/SKILL.md)
- [design-token-mapping](../figma-ios-design-token-mapping/SKILL.md)（颜色字体）
- [playbook](../figma-ios-playbook/SKILL.md)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mythkiven](https://github.com/mythkiven)
- **Source:** [mythkiven/figma-ios-codegen](https://github.com/mythkiven/figma-ios-codegen)
- **License:** MIT
- **Homepage:** https://github.com/mythkiven/figma-ios-codegen/tree/main/docs

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mythkiven-figma-ios-codegen-figma-ios-navigation
- Seller: https://agentstack.voostack.com/s/mythkiven
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.