skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

pinterest-ui-skills

Enforce Pinterest UI design constraints for light-mode interfaces.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#color palette#ui design#light mode#pinterest
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill pinterest-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pinterest-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/pinterest
Command: npx skills add https://github.com/ihlamury/design-skills --skill pinterest-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Pinterest's aesthetic, ensuring a familiar and intuitive user experience.

Core Features & Use Cases

  • Style Guide Enforcement: Ensures adherence to Pinterest's specific color palette, typography (Inter font), and spacing (4px grid).
  • Accessibility Compliance: Mandates sufficient text contrast ratios for better readability.
  • Use Case: When designing a new social media platform that aims for a clean, light-mode aesthetic similar to Pinterest, use this Skill to guide the UI development process.

Quick Start

Apply the pinterest-ui-skills to design a light-mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about pinterest-ui-skills

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

FAQPage Schema
How do I build a UI design system with a 4px spacing grid and light mode color palette?▼

To build a light-mode UI design system with a 4px spacing grid, apply constraints that enforce specific color tokens, Inter font family typography rules, and defined border-radius scales for visual consistency.

What is the best way to ensure typography and color palette consistency in a social media UI?▼

The best way to ensure UI consistency is by enforcing semantic design tokens and typography rules, which mandate specific color palettes, Inter font usage, and sufficient text contrast ratios for accessibility compliance.

Can I use this approach to design dark mode interfaces for a Pinterest-style platform?▼

No, this approach is specifically configured for building light-mode interfaces and does not support dark mode, enforcing a defined light-mode color palette and accessibility standards through semantic tokens.

Do I need the Inter font family to maintain UI design system constraints?▼

Yes, the Inter font family is required to maintain these UI design system constraints, as the approach enforces specific typography rules alongside a 4px spacing grid and defined border-radius scales.

When should I use semantic tokens for border-radius scales and color palettes?▼

Use semantic tokens for border-radius scales and color palettes when you need to satisfy visual consistency and accessibility standards across a new social media platform aiming for a clean, intuitive user experience.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
ihlamuryihlamury
73

slack-ui-skills

Enforce Slack UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
altrupetsaltrupets

Theming Avanzado

Implement light, dark, and system themes with Material 3 in Flutter apps.

Official
Intermediate