What is the primary focus of the Design Foundations skill?

The skill focuses on the underlying logic and mathematical consistency of a design system, ensuring that spacing, color, and geometry follow a structured, professional framework.

How does this differ from the frontend-design skill?

Design Foundations is for establishing the 'why' and the 'rules' of a visual system, whereas frontend-design is focused on the heavy implementation and coding of UI components.

Can this skill help with accessibility compliance?

Yes, it includes built-in quality gates for WCAG AA contrast and uses a grayscale test to ensure that the interface remains legible and functional without relying solely on color.

Why does the skill emphasize mathematical scales?

Mathematical scales eliminate 'magic numbers'—arbitrary pixel values—ensuring that every element in the UI has a proportional relationship to the others, which creates a more professional and 'inevitable' feel.

Design Foundations

Name: Design Foundations
Author: Genuineh

byGenuineh

0•

デザインツール

Establishes production-grade visual systems through mathematical consistency, semantic color logic, and rigorous aesthetic frameworks.

The Design Foundations skill transforms Claude into a senior design systems architect capable of defining the core visual logic of software products. Rather than relying on arbitrary styling, this skill applies mathematical progressions to spacing and typography, enforces semantic color roles, and builds a cohesive aesthetic thesis. It is designed to eliminate 'magic numbers' and visual noise by creating a repeatable, systematic language for interface design, ensuring that visual quality is a predictable result of logical constraints rather than subjective decoration.

主な機能

01Concentric geometry rules for harmonious nested surfaces and containers.

02Semantic color architecture that prioritizes value logic and accessibility over raw hue.

03Systematic elevation and lighting models for consistent depth and hierarchy.

04Mathematical scale functions for consistent typography, spacing, and radius hierarchy.

05Aesthetic thesis modeling to define temperament, density, and texture constants.

060 GitHub stars

ユースケース

01Establishing a semantic color palette that ensures accessibility and functional clarity.

02Defining a robust visual language and design system tokens for a new software product.

03Refactoring an inconsistent legacy interface to follow a strict mathematical grid and scale.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add genuineh/fus design-foundations

For use in Claude.ai and ChatGPT