SkillHey.
Submit a skill

Typography & Color Skills for Claude Code, Codex & AI Agents

These skills help an agent choose and apply type and color that look deliberate. They include focused typography and color guides, theme generators and broader polish skills that touch both.

16 skills

Start here

Impeccable — design directions and gallery
Free
Web & UI

Impeccable

Impeccable is an AI frontend design Skill for building and refining interfaces: typography, layout, accessibility, responsive behavior and browser iteration.

108.6KStars6.5KForks
Repository last pushed
pbakaus
Illustrative Claude Academy recommendation linking to the official Claude Code learning resource.
Free
Images

Anthropic Brand Guidelines

Apply Anthropic’s documented colors and typography to documents, slides and other artifacts.

193.4KStars22.8KForks
Repository last pushed
Anthropic
Official Minimal template preview: a light landing page with restrained typography, spacious layout and a single primary action.
Free
UI & UX design

Awesome Design Skills

A unified design Skill library with selectable visual templates, reusable UI tokens, component rules and implementation checks for AI coding assistants.

3.6KStars340Forks
Repository last pushed
Bergside

Design Rules Companion

Sergey

Turn vague UI feedback into focused changes using practical heuristics for spacing, typography, color, hierarchy, icons and interaction.

  • ui-design
  • ux-design
  • design-review
1Stars0Forks
Repository last pushed

Explore Typography & Color skills

12 skills
RecommendedNewest first

Pixel Art Professional

Brandon Williams

Refine existing pixel art using dithering, palette reduction, shading and antialiasing.

  • pixel-art
  • color
  • Illustration
422Stars31Forks
Repository last pushed
Magazine presentation showcase supplied in the official repository, with image and text slide layouts.
Free
Presentations

Guizang PPT Skill

Create single-file HTML presentations in editorial magazine or Swiss style, with horizontal navigation, speaker notes, rehearsal timers and a synchronized audience window.

29.7KStars2KForks
Repository last pushed
Guizang (歸藏 / op7418)

Make Interfaces Feel Better

Jakub Krehel

Polish frontend interfaces with concrete rules for typography, nested corners, shadows, icons, hit areas and restrained motion, plus structured quick or full reviews.

  • ui-design
  • ux-design
  • interaction-design
4KStars169Forks
Repository last pushed

Modular Scale Typography

Dembrandt

Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.

  • typography
  • design systems
193Stars23Forks
Repository last pushed

Web Typography

wondelai

Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.

  • typography
  • Web design
2.7KStars266Forks
Repository last pushed
Taste Skill homepage with its frontend framework introduction, installation command and website examples.
Free
Web & UI

Taste Skill

Art direction for AI-built websites and app screens, with real imagery, separate page and app workflows, and browser inspection. The main entry is design-taste-frontend.

113.9KStars7.7KForks
Repository last pushed
Leonxlnx
Exploded technical illustration of a hard disk drive, with its cover, head assembly, platters, enclosure and circuit board.
Free
Web & UI

Better Colors

Build and audit palettes, semantic color tokens and measured contrast.

12.1KStars468Forks
Repository last pushed
Jakub Krehel
Illustrative Claude Academy recommendation linking to the official Claude Code learning resource.
Free
Images

Theme Factory

Apply one of ten documented color-and-font themes to existing artifacts, or create a custom theme.

193.4KStars22.8KForks
Repository last pushed
Anthropic
yang0's comic storyboard gallery showing grid, four-panel, large-panel and diagonal storytelling layouts.
Free
Images

Poster Prompt Generator

Turn a poster brief into structured prompts with audience, message, density, emotion, color and illustration style.

7.5KStars885Forks
Repository last pushed
yang0
Exploded technical illustration of a hard disk drive, with its cover, head assembly, platters, enclosure and circuit board.
Free
Web & UI

Better Typography

Set and review type scales, spacing, font features and text wrapping.

12.1KStars468Forks
Repository last pushed
Jakub Krehel
A grid of 24 example brand logos from the upstream project.
Free
Images

Brand Identity

Design and compare coordinated logo, typography and colour systems, then create a brand guidelines kit for the chosen direction.

382Stars34Forks
Repository last pushed
Fatih Aydost

Typography Audit

mblode

Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.

  • typography
  • ui review
202Stars18Forks
Repository last pushed

Related topics

Design 165 skillsUI/UX Design 73 skillsFrontend Design 31 skillsIcon & Illustration 30 skillsAccessibility 28 skillsWebsite Design 26 skillsDesign System 21 skills

How to choose Typography & Color skills

Choose a focused typography or color skill for a targeted fix, a theme factory to generate a full palette, and brand-guideline skills when you must match an existing brand.

  • Set a readable type scale for a product UI
  • Generate a palette and theme from a brand color
  • Apply existing brand guidelines to new pages