design-principles
Maintains design consistency using a Swiss-inspired system for UI components and typography.
Install
mkdir -p .claude/skills/design-principles-saisagar7779 && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17973" && unzip -o skill.zip -d .claude/skills/design-principles-saisagar7779 && rm skill.zipInstalls to .claude/skills/design-principles-saisagar7779
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles. Provides colors, typography, borders, shadows, and component patterns.Key capabilities
- →Define colors for UI components based on a design system.
- →Specify typography for headers, labels, and body text.
- →Provide patterns for component styles like buttons and cards.
- →Define status indicators for different states.
- →List anti-patterns to avoid in UI design.
How it works
The skill provides design principles, including color palettes, typography rules, component patterns, and anti-patterns, based on the Swiss International Style for UI design.
Inputs & outputs
When to use design-principles
- →Style new UI component
- →Update existing UI design
- →Ensure consistency in UI components
- →Apply spacing tokens
About this skill
Swiss International Style Design
Invoke when: Creating new components, modifying styles, or building new pages. Skip when: Backend work, API changes, logic-only changes.
Before Designing
Read the full design specs in docs/agent/design/:
- style-guide.md - Core rules, colors, typography, components
- design-system.md - Extended tokens, spacing, shadows
- swiss-design-system-prompt.md - AI prompt for Swiss UI
Colors
| Name | Hex | Usage |
|---|---|---|
| Canvas | #F0F0E8 | Background |
| Ink | #000000 | Text, borders |
| Hyper Blue | #1D4ED8 | Primary actions |
| Signal Green | #15803D | Success |
| Alert Orange | #F97316 | Warning |
| Alert Red | #DC2626 | Danger |
| Steel Grey | #4B5563 | Secondary text |
Typography
font-serif → Headers
font-mono → Labels, metadata (uppercase, tracking-wider)
font-sans → Body text
Component Patterns
// Button: Square corners, hard shadow, press effect
<button className="rounded-none border-2 border-black shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">
// Card: Hard shadow, no rounded corners
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000]">
// Label: Mono, uppercase
<label className="font-mono text-sm uppercase tracking-wider">
Status Indicators
<div className="w-3 h-3 bg-green-700" /> // Ready
<div className="w-3 h-3 bg-amber-500" /> // Warning
<div className="w-3 h-3 bg-red-600" /> // Error
<div className="w-3 h-3 bg-blue-700" /> // Active
Anti-Patterns (NEVER)
rounded-*(exceptrounded-none)- Gradients or blur shadows
- Custom colors outside palette
- Pastel or soft colors
- Decorative icons without function
Retro Terminal Elements
For dashboard/settings/empty states ONLY:
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
DO NOT use retro elements on resume components.
Checklist
-
rounded-noneon all components - Hard shadows (
shadow-[Xpx_Xpx_0px_0px_#000000]) - Correct typography (serif headers, mono labels, sans body)
- Colors from palette only
- No gradients or blur effects
When not to use it
- →When performing backend work or API changes.
- →When making logic-only changes.
- →When the user wants to use rounded corners, gradients, or custom colors outside the palette.
Limitations
- →The skill applies to UI component design.
- →The skill enforces a specific design style (Swiss International Style).
- →The skill prohibits certain design elements like gradients or custom colors.
How it compares
This skill enforces a specific design system (Swiss International Style) for UI components, providing concrete rules and code patterns, unlike general design advice.
Compared to similar skills
design-principles side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| design-principles (this skill) | 0 | 3mo | No flags | Beginner |
| visual-design-foundations | 5 | 4mo | No flags | Beginner |
| frontend-design-pro | 10 | 8mo | No flags | Intermediate |
| vibefigma | 0 | 5mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Saisagar7779
View all by Saisagar7779 →You might also like
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
vibefigma
vibeflowing-inc
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).
design
dyeoman2
Design and restyle TanStack Start routes and React components in this repo using the March 2026 GPT-5.4 frontend guidance while preserving local conventions. Use when building or refining marketing pages, dashboards, admin surfaces, authenticated app views, page-level layouts, visual systems, or int
frontend-design
darthlinuxer
Design thinking and decision-making for web UI. Use when designing components,
frontend-design
christophacham
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...