skills.rest
tyk-lab
tyk-labCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Document a cross-platform UI design system standardizing spacing, color, typography, and components.

Updated Feb 5, 2026
Search Tags:#typography#cross-platform#ui-design#design-system#color-palette#design-guide#component-templates
One-click install
npx skills add https://github.com/tyk-lab/my-ai-skill --skill design-guide-tyk-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/tyk-lab/my-ai-skill/tree/main/skills/design-guide
Command: npx skills add https://github.com/tyk-lab/my-ai-skill --skill design-guide-tyk-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Centralizes UI design decisions into a reusable system to ensure consistent visuals and reduce drift across platforms, speeding up UI work and improving product cohesion.

Core Features & Use Cases

  • Central 8px grid spacing and a single accent color to maintain harmony across SwiftUI, Android, and web.
  • Comprehensive color palettes with neutral bases and a single accent to ensure accessible contrast and brand consistency.
  • Typography guidelines defining heading and body text hierarchy, font pairings, and line heights.
  • Ready-to-use component templates and references in references/component-templates.md and references/color-palettes.md for quick adoption.
  • Use Case: when creating new UI components or updating existing ones to align with the design system across all platforms.

Quick Start

Consult this guide before creating any UI component to apply the standard spacing, typography, color, and templates.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I create a cross-platform UI design system for SwiftUI, Android, and Web?▼

A cross-platform UI design system standardizes spacing, color, and typography across SwiftUI, Android, and Web. It enforces an 8px grid, a single accent color, and a defined typography scale to ensure consistent visuals and reduce drift across platforms.

What spacing and color rules should I use for consistent UI components?▼

Consistent UI components require an 8px grid for spacing and a single accent color applied to a neutral base palette. This approach maintains harmony, ensures accessible contrast, and improves product cohesion across all platforms.

How do I standardize typography scales for cross-platform mobile and web apps?▼

Standardize typography scales by defining heading and body text hierarchy, font pairings, and line heights. A defined typography scale enforces consistent text rendering across SwiftUI, Android, and Web projects.

Can I get ready-to-use component templates for buttons, forms, and cards?▼

Ready-to-use component templates for buttons, forms, cards, and layouts are provided in the references. Consulting these templates allows for quick adoption of standardized UI components across all platforms.

Does this design guide work for both mobile and web platforms?▼

This design guide works for SwiftUI, Android, and Web platforms. It applies standardized spacing, color palettes, and typography guidelines to maintain visual harmony and brand consistency across mobile and web environments.

Related Skills

Explore More Design & Creative Skills→
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
msrivmsriv

mobile-ui-scaffold

Generate Kotlin/Jetpack Compose and SwiftUI screen scaffolds with MVVM structure.

Community
Advanced
ihlamuryihlamury
73

framer-ui-skills

Enforce Framer design constraints for dark mode interfaces with Inter font and 4px grid.

Community
Intermediate
ruskibeatsruskibeats

zoom-out

Summarize software module interactions for high-level system architecture review.

Community
Intermediate