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.
Install
npx skillscat add jthorare/agentic-workflow/design-analyze-ios Install via the SkillsCat registry.
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.jsonis 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*.swiftIf 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.xcassetscolorsets + Swift theme-file patterns - Typography — Swift font patterns
- Spacing (restricted) — only
CGFloatconstants 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.swiftRules
- 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