What code formats can this skill export?

It generates implementation-ready code for CSS Custom Properties, Tailwind CSS configurations, SwiftUI enums, and Android Compose themes.

Do I need other skills to use this?

Yes, you must first run 'humaninloop:analysis-screenshot' on your reference images to provide the raw material for this skill to assemble.

Can I trace where a specific color or font came from?

Yes, the skill generates a Source Attribution Index that maps every unified token back to its original source screenshot or extraction document.

What is the main purpose of the Design System Architect skill?

It merges multiple UI extractions from screenshots into a single, consistent design system with unified tokens, components, and clear documentation.

How are design conflicts handled?

The skill identifies overlaps and discrepancies (like different base spacing units), resolves them based on mathematical consistency, and logs the decision rationale in a conflict report.

Design System Architect

Name: Design System Architect
Author: deepeshBodh

bydeepeshBodh

•

デザインツール

Synthesizes multiple visual extractions into a unified, production-ready design system with consistent tokens and components.

The Design System Architect skill provides a structured framework for merging fragmented UI extractions from multiple sources into a single, cohesive design system. It automates the complex process of consolidating color palettes, typography scales, and spacing units while maintaining strict source attribution and resolving design conflicts with documented rationale. By establishing clear hierarchies and normalizing component variants, it transforms visual inspiration into implementation-ready code for modern frontend frameworks, ensuring consistency across complex projects.

主な機能

01Platform-specific exports for CSS, Tailwind, SwiftUI, and Compose

02Structured conflict resolution with logged design rationale

03Multi-source token consolidation for colors, typography, and spacing

04Automated component normalization across disparate UI sources

0524 GitHub stars

06Full source attribution tracing every token back to its origin

ユースケース

01Building a unified design system from multiple disparate visual inspirations

02Consolidating legacy UI components into a standardized modern token system

03Generating implementation-ready theme configurations from raw screenshot analyses

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add deepeshbodh/human-in-loop authoring-design-system

For use in Claude.ai and ChatGPT

Download Skill