Figma to iOS UIKit codegen: deterministic data package + Agent skills (Cursor/Claude) for baseline Swift UI.
Skill Claude CodeCodexCursor
Apply Figma comments that are pre-matched to nodes by figma-ios-preload-data. Read confidence + parsed tags from comments.json. Iconfont corrections are already written into design.json; color comments stay in comments.json for Phase-2 mapping. Use when generating code from Figma with designer comments.
Skill Claude CodeCodexCursor
Quality bar for the phase-2 baseline UI code produced by this repo's Figma-to-UIKit/Swift workflow (not phase-3 production code, which is out of scope here). Covers: acceptance checklist, forbidden shortcuts, the UI-node-coverage audit, and when human input is still required. The "commercial" in the name refers to the…
Skill Claude CodeCodexCursor
A guide for detecting visual states in Figma components, such as selected, unselected, enabled, or disabled, and reflecting those states in UIKit code.
Skill Claude CodeCodexCursor
Map Figma colors and fonts from the data package into Swift via configurable JSON maps under .cursor/bindings/. Hit → emit mapped code snippet; miss → UIKit fallback. Use when generating color or font code from design.json.
Skill Claude CodeCodexCursor
Maps Figma node hierarchy (FRAME/GROUP/INSTANCE) to UIKit UIView containers, preserving parent-child relationships, addSubview order, and coordinate system. Decides which nodes become UIView containers vs leaf views, and how to read relative/absolute coordinates from the data package. Use when generating UIKit code…
Skill Claude CodeCodexCursor
A method for turning a fixed-width Figma iPhone design, based on a 375-point screen, into horizontally adaptive iOS layout code. It chooses between flexible widths, proportional child sizing, list layouts, and fixed positioning based on the design’s margins.
Skill Claude CodeCodexCursor
Map iconfont nodes from design.json[node].iconfont into Swift via .cursor/bindings/iconfontmap.json. Hit → emit mapped font/text snippets; miss → fallback + TODO. Use when generating icon/button code from iconfont nodes.
Skill Claude CodeCodexCursor
Reference iOS image assets that figma-ios-preload-data pre-downloaded into the data package. Covers two cases: (1) local imagesets (copy + UIImage(named:)), and (2) server-side images (avatars / covers / category icons / any RECTANGLE filled with IMAGE that has no local imageset) — these MUST use the data package's…
Skill Claude CodeCodexCursor
A workflow for deciding whether a Figma design node should become a UICollectionView in an iOS app. UICollectionView is Apple's component for displaying repeated items in a scrollable, reusable list or grid.
Skill Claude CodeCodexCursor
Generated Swift and Objective-C UI code must run on iOS 12.0+. Avoid APIs introduced in iOS 13+ unless wrapped in availability checks. Use when the user mentions iOS 12, minimum deployment, SF Symbols, darkContent status bar, or CALayerCornerCurve.
Skill Claude CodeCodexCursor
Identify Figma navigation-bar nodes and generate UIKit navigation code using .cursor/bindings/host.json (bases, custom nav class, utils). Use when generating navigation bar / ViewController base class code from Figma.
Skill Claude CodeCodexCursor
Entry point for Figma → iOS UIKit/Swift code in this repo. Three-phase workflow: phase 1 runs figma-ios-preload-data to produce a unified data package; phase 2 (this playbook) consumes it via linked specialized skills (MK tokens, iOS 12, node conventions, SnapKit layout) to emit baseline UI code — visual/layout…
Skill Claude CodeCodexCursor
A guide for wiring iOS user interactions with either standard UIKit target-action code or RxSwift and RxCocoa. RxSwift is a library for handling events and changing values as streams over time.
Skill Claude CodeCodexCursor
Phase 4 visual fidelity check. Read the pre-fetched screenshot.png in the data package, compare it visually against generated code, and emit a difference report. Use after iOS code generation to confirm visual fidelity.
Skill Claude CodeCodexCursor
A guide for generating Swift code for selection controls from prepared Figma design data. It supports single selection, multiple selection, toggles, segmented controls, and keeping the selected data in sync with the screen.
Skill Claude CodeCodexCursor
When turning Figma designs into iOS UIKit/Swift, prefers relative Auto Layout over absolute frames and uses SnapKit for constraints. Use when generating or refactoring Figma-based views, layout code, constraints, or when the user mentions SnapKit, relative layout, or avoiding fixed frames from Figma.
Skill Claude CodeCodexCursor
A guide for identifying common interface components in Figma design data, such as selectors, steppers, toggles, and tag groups. It uses node structure, arrangement, size, and visual differences to classify them.
Skill Claude CodeCodexCursor
A set of rules for deciding which Figma nodes should become UIKit code and which are design-only system elements. UIKit is Apple’s framework for building iOS app interfaces.
Skill Claude CodeCodexCursor
A skill that turns Figma design-node data into Swift code for iOS UICollectionView screens. UICollectionView is an iOS component for displaying scrolling grids or lists of reusable cells.
Skill Claude CodeCodexCursor
Translate Figma Variables multi-mode warnings (already detected by figma-ios-preload-data) into top-of-file Swift comments so dark mode is not silently dropped. Use when generating Swift code from a data package whose summary.hasdarkmode is true.
Skill Claude CodeCodexCursor
A guide for deciding whether a Figma vector should be drawn with iOS code or downloaded as an image asset. It keeps text, components, icons, and list-like content as separate, editable elements when needed.
Skill Claude CodeCodexCursor
Handles vertical layout rules and safe-area insets when generating UIKit code from Figma designs. Covers: iPhone X vs iPhone 8 form factor detection, Status Bar height, Home Indicator skip rule, sticky-top/sticky-bottom views, and why vertical values must never be scaled by screenWidth ratio. Use when generating…
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: