design-guide

Enforce a consistent 8px-grid design system across SwiftUI, Android, and web UI.

18|Updated Nov 23, 2025

Search Tags:#typography #cross-platform #ui-design #color-palette #design-guide

Ready to run

npx skills add https://github.com/mosif16/codex-Skills --skill design-guide-mosif16

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/mosif16/codex-Skills/tree/main/skills/design-guide
Command: npx skills add https://github.com/mosif16/codex-Skills --skill design-guide-mosif16

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures modern, professional UI across SwiftUI, Android, and web platforms by enforcing a cohesive design system, typography, spacing, color usage, and interactive states. This Skill accelerates UI consistency and reduces design debt.

Core Features & Use Cases

Bundled Resources: Access reference materials like color palettes and component templates to speed UI implementation.
Design Principles: Clean and minimal aesthetics, one accent color, 8px grid, typography hierarchy, accessible interactive states.
Cross‑Platform UI: Guides for SwiftUI, Android, and web UI components to maintain a unified look and feel.

Quick Start

Review the bundled references at references/color-palettes.md and references/component-templates.md to begin applying the design system to your UI.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I maintain consistent UI design across SwiftUI, Android, and web platforms?▼

Apply a unified design system enforcing 8px spacing grid, neutral color palette with accent color, typography hierarchy, and interactive states across all platforms. This Skill provides bundled references and guidelines for SwiftUI, Android, and web components to eliminate design inconsistency.

What design principles should I follow for a cross-platform UI system?▼

Cross-platform UI design prioritizes clean, minimal aesthetics with a single accent color, consistent 8px grid spacing, defined typography hierarchy, and accessible interactive states. This Skill enforces these principles to accelerate implementation and reduce design debt across platforms.

Can I use bundled design resources to speed up UI component implementation?▼

Yes. This Skill includes bundled references like color palettes and component templates in the references folder. Review color-palettes.md and component-templates.md to apply pre-defined design patterns and accelerate consistent UI implementation.

How do I reduce design debt and ensure UI consistency in multi-platform projects?▼

Enforce a cohesive design system with explicit rules for spacing, color usage, typography, and interactive states. This Skill applies these constraints across SwiftUI, Android, and web platforms to maintain professional UI consistency and eliminate accumulated design inconsistencies.

Does this design system work with existing SwiftUI, Android, and web projects?▼

Yes. This Skill guides UI composition for buttons, forms, cards, layouts, and full screens across SwiftUI, Android, and web. Apply it when composing any UI elements to maintain consistent modern design without restructuring existing projects.