skills.rest
joi-fairshare
joi-fairshareCOMMUNITY
Explore all skills by this author →
GitHub

design-analyze-ios

Extract iOS design tokens into W3C DTCG design-tokens.json from asset catalogs and Swift theme files.

1|2|Updated Mar 19, 2026
Search Tags:#typography#swift#ios#colors#spacing#design-tokens#xcassets
One-click install
npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-analyze-ios
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-analyze-ios
Source: https://github.com/joi-fairshare/agentic-workflow/tree/main/skills/design-analyze-ios
Command: npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-analyze-ios

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and engineers often struggle to consolidate colors, typography, and spacing definitions that live across Assets.xcassets and Swift theme files, leaving no single source of truth for downstream design systems.

Core Features & Use Cases

  • Auto-discovery of sources: scans the workspace for asset catalogs and Theme/Color Swift files when no explicit path is provided, and explains what to fix when nothing is found.
  • Token extraction: reads Colorsets and Swift constants to pull light/dark color values plus typography and spacing metrics, normalizes them into W3C DTCG compliant entries, and notes system colors without tokenizing them.
  • Safe persistence: asks before overwriting an existing design-tokens.json and summarizes how many color, typography, and spacing tokens were written, guiding the next steps for mockups and implementation.

Quick Start

Invoke /design-analyze-ios with the path to your Assets.xcassets to extract all available colors, fonts, and spacing constants into design-tokens.json.

Frequently Asked Questions about design-analyze-ios

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from Assets.xcassets into a W3C design-tokens.json file?▼

To extract design tokens from Assets.xcassets, scan the workspace for Colorsets and Swift theme files to normalize color, typography, and spacing definitions into a W3C DTCG compliant design-tokens.json file for your iOS project.

How does dark mode asset extraction work when converting iOS colors to design tokens?▼

Dark mode asset extraction reads Colorsets to pull both light and dark color values, normalizing them into W3C DTCG compliant entries while ensuring dark-mode assets are converted to hex values within the design-tokens.json output.

How do I consolidate Swift theme files and asset catalogs into a single source of truth for design systems?▼

Consolidate Swift theme files and asset catalogs by auto-discovering sources in the workspace, reading Swift constants and Colorsets to pull typography, spacing, and color metrics into a single W3C DTCG design-tokens.json file.

Can I use this to extract typography and spacing constants from Swift files alongside colors?▼

Yes, you can extract typography and spacing constants alongside colors by reading Swift constants and Colorsets, normalizing all definitions into W3C DTCG compliant entries within the design-tokens.json output.

Will extracting design tokens overwrite my existing design-tokens.json file?▼

Extracting design tokens will not automatically overwrite your existing design-tokens.json file; the process prompts before overwriting and summarizes how many color, typography, and spacing tokens were written.

What happens if no Assets.xcassets or Swift theme files are found during auto-discovery?▼

If no Assets.xcassets or Swift theme files are found during auto-discovery, the process explains what to fix in your workspace setup so you can correctly provide a path to your asset catalogs.

Related Skills

Explore More Design & Creative Skills→
anyprotoanyproto
509

Design System Developer (Smart Router)

Route design-system asset mapping to Anytype iOS constants for icons, typography, colors, and spacing.

Official
Intermediate
joi-fairsharejoi-fairshare
1

design-analyze-web

Extract and merge W3C DTCG design tokens from web URLs.

Community
Advanced
firefly-eventsfirefly-events

design-system

Converts brand-system YAML to W3C token JSON and HTML previews for frontend design workflows.

Official
Advanced
shawn-sandyshawn-sandy

design-token-extractor

Extract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.

Community
Advanced