skills.rest
n0rvyn
n0rvynCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

generate-design-system

Generate SwiftUI design system code from token specifications and a primary color.

1|Updated Feb 15, 2026
Search Tags:#xcode#tokens#swiftui#design-system#color-palette#oklch#apple-hig
One-click install
npx skills add https://github.com/n0rvyn/indie-toolkit --skill generate-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-design-system
Source: https://github.com/n0rvyn/indie-toolkit/tree/main/apple-dev/skills/generate-design-system
Command: npx skills add https://github.com/n0rvyn/indie-toolkit --skill generate-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns a primary color and token specifications into a complete, Apple HIG–compliant SwiftUI design system so designers and engineers avoid error-prone manual token creation and inconsistent theming across iOS and macOS apps.

Core Features & Use Cases

  • OKLCH-based color generation: Derives a neutral, primary, and accent palette from a single primary color using OKLCH math and configurable relationships (complementary, analogous, triadic).
  • Design token output: Produces spacing, layout, corner radius, shadow, typography guidance, and generated Swift files (DesignSystem, OKLCH converter, Colors+Tokens, Typography).
  • Platform-aware templates: Targets iOS, macOS, or both with dynamic type mapping and optional SwiftUI components (buttons, cards, text fields) integrated into an Xcode project path.

Quick Start

Generate a SwiftUI design system for the Xcode project at /path/to/project using primary color #3A73B5, complementary relationship, 60-30-10 proportion, platform both, and include components.

Frequently Asked Questions about generate-design-system

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

FAQPage Schema
How do I generate SwiftUI design tokens from a primary color for an Xcode project?▼

To generate SwiftUI design tokens, provide a primary color and token specifications to automatically produce Apple HIG-compliant spacing, typography, and OKLCH-derived color palettes as Swift files directly into your Xcode project.

What is OKLCH color generation and how does it apply to SwiftUI design systems?▼

OKLCH color generation derives neutral, primary, and accent palettes from a single color using OKLCH math. It applies to SwiftUI design systems by applying configurable relationships like complementary, analogous, or triadic to ensure perceptual color consistency.

Can I generate Apple HIG-compliant design tokens for both iOS and macOS?▼

Yes, you can generate Apple HIG-compliant design tokens for iOS, macOS, or both. The output includes platform-aware templates with dynamic type mapping and optional SwiftUI components like buttons and cards.

How do I apply 60-30-10 proportion rules to a SwiftUI color palette?▼

You apply 60-30-10 proportion rules by specifying the ratio during token generation. The system processes your primary color through OKLCH math and outputs semantic color tokens formatted for SwiftUI.

What Swift files are generated for a SwiftUI design system?▼

The generated Swift files include DesignSystem.swift, OKLCHConverter.swift, Colors+Tokens.swift, and Typography+Tokens.swift, along with optional component files for SwiftUI elements like buttons and text fields.

Related Skills

Explore More Design & Creative Skills→
windyskywindysky

moai-docs-generation

Generate documentation patterns from code for Sphinx, MkDocs, TypeDoc, and Nextra.

Community
Advanced
yebotyebot
9

swift

Build native Apple platform apps with Swift and SwiftUI.

Community
Intermediate
deepeshBodhdeepeshBodh
35

analysis-screenshot

Analyze UI screenshots to produce design-token catalogs for CSS, Tailwind, and SwiftUI.

Community
Advanced
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced