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

design-implement-ios

Generate SwiftUI Theme.swift and view components from approved iOS mockups using design tokens.

1|2|Updated Mar 19, 2026
Search Tags:#ios#swiftui#dark-mode#design-tokens#theme-generation#mockup-implementation
One-click install
npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-implement-ios
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-implement-ios
Source: https://github.com/joi-fairshare/agentic-workflow/tree/main/skills/design-implement-ios
Command: npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-implement-ios

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the tedious process of translating approved iOS mockups into SwiftUI views that are fully aligned with the centralized design tokens and iOS human interface guidelines, so you avoid manual styling guesses and inconsistency.

Core Features & Use Cases

  • Theme.swift generation: Converts every color, typography, spacing, and radius token from design-tokens.json into a strongly typed Theme enum plus a Color(hex:) helper so shared styling stays consistent.
  • SwiftUI view creation: Builds components that mirror the approved mockup, import Theme.*, respect light and dark color schemes via @Environment, and avoid hardcoded spacing, colors, or fonts.
  • Compliance guardrails: Guides you through prerequisite checks, mockup selection, and verification steps so the delivered implementation is ready for design-verify and refine workflows.

Quick Start

Invoke the design-implement-ios skill with an approved iOS mockup to produce Theme.swift and SwiftUI components that use the design tokens.

Frequently Asked Questions about design-implement-ios

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

FAQPage Schema
How do I convert an iOS mockup into SwiftUI views using design tokens?▼

To convert an iOS mockup into SwiftUI views, generate a Theme.swift file from design-tokens.json and build view components that reference Theme.* values, ensuring centralized colors, typography, and spacing without hardcoded styles.

How does SwiftUI dark mode support work with design tokens?▼

SwiftUI dark mode support with design tokens works by applying @Environment color schemes to views that reference Theme.* values. The generated Theme.swift centralizes tokens so views automatically adapt between light and dark color schemes without hardcoded colors.

Do I need a design-tokens.json file to generate SwiftUI components from a mockup?▼

Yes, you need a design-tokens.json file to generate SwiftUI components. The workflow requires an approved mockup-ios.png baseline and design-tokens.json in your agentic workflow repo to translate colors, typography, spacing, and radius into Theme.swift values.

What is the best way to centralize SwiftUI colors and typography for mockup implementation?▼

The best way to centralize SwiftUI colors and typography is generating a strongly typed Theme enum with a Color(hex:) helper from design-tokens.json. All views reference Theme.* values so shared styling stays consistent across light and dark modes.

Can I hardcode spacing and colors in SwiftUI views after mockup implementation?▼

No, you should not hardcode spacing or colors in SwiftUI views. The generated components import Theme.* and avoid hardcoded design values entirely, ensuring all styling references centralized tokens for consistent light and dark mode rendering.

Why does mockup implementation require prerequisite checks before generating SwiftUI views?▼

Mockup implementation requires prerequisite checks to verify design-tokens.json and mockup-ios.png baselines exist in the agentic workflow repo. These compliance guardrails ensure the delivered SwiftUI implementation is ready for design-verify and refine workflows.

Related Skills

Explore More Design & Creative Skills→
joi-fairsharejoi-fairshare
1

design-mockup-ios

Generate SwiftUI previews and simulator baselines from design tokens.

Community
Advanced
binan-makerbinan-maker

mockup-extract

Extract UI components into a mockup sandbox with dependency stubbing and import rewriting.

Community
Intermediate
gabelulgabelul
38

stitch-swiftui-components

Convert Stitch mobile designs into native iOS SwiftUI view code.

Community
Advanced
giosuetedeschi-specgiosuetedeschi-spec

core-components

Enforce semantic design tokens and centralized components in Next.js UI development.

Community
Intermediate