jthorare

design-analyze-ios

Scan Assets.xcassets and Swift theme files to extract design tokens (colors, typography, spacing) into design-tokens.json in W3C DTCG format. Pass a specific path or let the skill auto-discover.

jthorare 1 3 Updated 3w ago
GitHub

Install

npx skillscat add jthorare/agentic-workflow/design-analyze-ios

Install via the SkillsCat registry.

SKILL.md

Before anything else: read $HOME/.agentic-workflow/toolkit/skills/_preamble.md and follow it (skill index, provider capability map, bootstrap check, session context). Run its Session Close section when this skill finishes.

Design context: read $HOME/.agentic-workflow/toolkit/skills/_design-preamble.md and follow it before continuing.

Note: This skill creates design context — missing design-tokens.json is expected on first run.


Design Analyze iOS — Extract Design Tokens from Swift/Xcode Assets

Scans the Xcode project for color, typography, and spacing definitions and writes design-tokens.json in W3C DTCG format.

Step 1: Locate Source Files

With explicit path argument:

Use the provided path directly (an Assets.xcassets directory or a *Theme*.swift / *Colors*.swift file).

Without argument (auto-discover):

Find files matching these glob patterns:

**/*.xcassets
**/*Theme*.swift
**/*Colors*.swift
**/*Color*.swift

If nothing is found:

"No Swift color definitions or asset catalogs found. Start your project and add a color asset catalog or a theme file, then re-run."

Step 2: Extract Tokens (shared procedure)

Resolve the shared dir from the stable toolkit path:

SHARED_DIR="$HOME/.agentic-workflow/toolkit/skills/_shared"
echo "extraction: $SHARED_DIR/ios-token-extraction.md"

Read $SHARED_DIR/ios-token-extraction.md and follow it exactly for the files located in Step 1:

  • Colors — Assets.xcassets colorsets + Swift theme-file patterns
  • Typography — Swift font patterns
  • Spacing (restricted) — only CGFloat constants whose names match the spacing/layout pattern; never arbitrary CGFloat constants
  • Completeness gate — if fewer than 3 colors or 0 typography tokens were extracted, report the shortfall and ask the user (different path / proceed partial / abort) before writing anything

Step 3: Write design-tokens.json

If design-tokens.json already exists, ask the user:

"design-tokens.json already exists. Overwrite with extracted iOS tokens? (yes/no)"

Write extracted tokens in W3C DTCG format:

{
  "color": {
    "primary": { "$value": "#6366F1", "$type": "color" },
    "primary-dark": { "$value": "#818CF8", "$type": "color" },
    "background": { "$value": "#FFFFFF", "$type": "color" }
  },
  "typography": {
    "heading": {
      "fontSize": { "$value": "28px", "$type": "dimension" },
      "fontWeight": { "$value": "700", "$type": "number" }
    }
  },
  "spacing": {
    "sm": { "$value": "8px", "$type": "dimension" },
    "md": { "$value": "16px", "$type": "dimension" },
    "lg": { "$value": "24px", "$type": "dimension" }
  }
}

If no Swift color definitions existed (only asset catalog):

"Created design-tokens.json from color assets only. Typography and spacing tokens could not be auto-extracted — add them manually or create a theme file."

Step 4: Present Summary

iOS Design Token Extraction Complete
=====================================

Sources scanned:
  {list of files read}

Colors:     N tokens extracted
Typography: N tokens extracted (or: not found)
Spacing:    N tokens extracted (or: not found)

Written to: design-tokens.json

Next steps:
  1. Run /design-language to define brand personality
  2. Run /design-mockup-ios to generate a SwiftUI preview mockup
  3. Run /design-implement-ios to generate Theme.swift

Rules

  • Never infer colors from view background or text color assignments — only extract explicit theme/constant definitions
  • If Swift files use system colors (Color(.systemBlue)) without a custom equivalent, note them in the output but do not add a token for them
  • Do not modify existing Swift files — read-only extraction
  • Convert all CGFloat dimensions to "Npx" string format for DTCG compatibility

Next steps

  • /design-language — define brand from extracted iOS tokens
  • /design-evolve-ios — merge Swift reference into existing design language

Categories