design-principles

Enforce Swiss International Style typography, color, spacing, and component patterns in UI components.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/KaiBoo404/agent-skills-with-project-template --skill design-principles-kaiboo404
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/KaiBoo404/agent-skills-with-project-template/tree/main/.agents/skills/design-principles
Command: npx skills add https://github.com/KaiBoo404/agent-skills-with-project-template --skill design-principles-kaiboo404

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Swiss International Style design principles are not always followed, leading to inconsistent UI and a lack of visual harmony across components.

Core Features & Use Cases

  • Enforces typography, color tokens, spacing, and component patterns according to the Swiss design system.
  • Guides frontend components creation or refactors to maintain visual harmony across pages and modules.
  • Use case: when building a new UI card, follow the Swiss rules to ensure typography scale, color contrast, and spacing tokens are applied consistently.

Quick Start

Ask the AI to review a frontend component and apply Swiss design tokens for typography, color, and spacing.

Frequently Asked Questions about design-principles

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

FAQPage Schema
How do I apply Swiss design principles to UI components for visual consistency?

Swiss design principles enforce visual consistency in UI components by standardizing typography, color tokens, spacing, and component patterns. This approach applies Swiss International Style rules to frontend creation and style audits, ensuring visual harmony across modules.

What is Swiss International Style in frontend design systems?

Swiss International Style in frontend design is a methodology enforcing visual harmony through strict typography scales, color contrast, and spacing tokens. It evaluates component patterns to maintain consistency across web applications.

How do I audit a frontend component for typography and color token consistency?

Auditing a frontend component for typography and color token consistency involves reviewing it against Swiss design rules. This process evaluates color usage, spacing tokens, and typography scale to ensure design-system consistency.

Can I use Swiss style rules to refactor existing web application UI components?

Yes, you can refactor existing web application UI components using Swiss style rules. This process applies Swiss design tokens for typography, color, and spacing to maintain visual harmony across pages.

Does this Swiss design approach work for building new UI cards?

Yes, the Swiss design approach works for building new UI cards. It follows Swiss rules to ensure typography scale, color contrast, and spacing tokens are applied consistently for visual harmony.

Why does my UI lack visual harmony across different web application modules?

Your UI lacks visual harmony across modules when Swiss International Style design principles are not followed. Inconsistent typography, color usage, and spacing tokens across components lead to this lack of visual harmony.