design-implement-ios

Name: design-implement-ios
Availability: InStock
Author: joi-fairshare

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

Ready to run

npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-implement-ios

💬 Prompt for ChatGPT / Claude Chat▼

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.