skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-claude

Apply Claude (Anthropic) design tokens, typography, and component styles to UI generation.

Updated Feb 23, 2026
Search Tags:#typography#design system#color palette#claude#design tokens#anthropic#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-claude-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-claude
Source: https://github.com/deepparser/skills/tree/main/design-claude
Command: npx skills add https://github.com/deepparser/skills --skill design-claude-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Claude (Anthropic)'s visual identity requires exact design tokens — colors, typography, spacing, shadows — that are hard to reproduce from memory. This Skill provides the complete design system so generated UI matches the brand's warm, editorial aesthetic. ## Core Features & Use Cases - Complete Design Token Catalog: Exact hex values for the warm-toned palette (Parchment #f5f4ed, Terracotta #c96442, Near Black #141413), typography scale (Anthropic Serif/Sans/Mono), spacing, radius, and elevation rules. - Component Specifications: Detailed styling for buttons, cards, inputs, navigation, and model comparison grids, including the signature ring-shadow system. - Light & Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) showing the full token catalog rendered in both themes for visual verification. - Use Case: When asked to build a landing page or dashboard styled like Claude's website, invoke this Skill to generate UI with the correct serif headlines, warm neutrals, terracotta CTAs, and editorial spacing. ## Quick Start Use the design-claude skill to build a hero section styled like Claude's website with a terracotta CTA button.

Frequently Asked Questions about design-claude

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

FAQPage Schema
How do I build a UI that looks like Claude's website?▼

Invoke this Skill when generating UI and it applies Claude's design tokens automatically: Parchment (#f5f4ed) backgrounds, Anthropic Serif headlines at weight 500, Terracotta (#c96442) CTA buttons, and warm-toned neutrals throughout.

What colors does the Claude design system use?▼

The palette centers on Parchment (#f5f4ed) backgrounds, Terracotta Brand (#c96442) for CTAs, and Anthropic Near Black (#141413) for text. All neutrals are warm-toned with yellow-brown undertones; the only cool color is Focus Blue (#3898ec) for input focus rings.

Does the Claude design system support dark mode?▼

Yes, the Skill includes a dark theme using Near Black (#141413) page backgrounds, Dark Surface (#30302e) cards, Warm Silver (#b0aea5) text, and Coral (#d97757) accents. A bundled preview-dark.html file shows the full dark token catalog.

What fonts should I use for a Claude-style interface?▼

Headlines use Anthropic Serif at weight 500 (Georgia as fallback), UI text uses Anthropic Sans (Arial/system-ui fallback), and code uses Anthropic Mono. Serif weight never exceeds 500, and body text uses a generous 1.60 line-height.

When should I not use this design system?▼

Avoid it when the project requires cool-toned palettes, heavy drop shadows, bold serif headlines, or saturated multi-color schemes. The system is deliberately muted, warm, gradient-free, and uses ring shadows instead of traditional elevation.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
KARENLHAOKARENLHAO
1

frontend-design

Generate frontend interfaces and components with HTML/CSS, React, or Vue.

Community
Advanced
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced
Lev-itLev-it

minimalist-ui

Generate minimalist document-style web interfaces with warm monochrome palettes and bento-grid layouts.

Official
Advanced