Open Claude Design System

Name: open-claude-design-system
Author: maxritter

Extract, document, or normalize a product UI design system from code, screenshots, or brand sources. Use for visual tokens, theme variables, typography, spacing, colors, radii, shadows, component inventories, variants, states, or building a reusable UI library. Do not use for software architecture, database schemas, or generic system design.

★ 20 Source-available; see LICENSE.md Synced 1 hour ago View SKILL.md

At a glance

Design Manual install Source-available; see LICENSE.md

This skill is for Design and helps you extract design tokens from code, document ui component variants, and normalize color and typography systems.

Install

git clone --depth 1 https://github.com/maxritter/open-claude-design
cp -r open-claude-design/skills/open-claude-design-system ~/.claude/skills/open-claude-design-system

Can use Not declared by the author

Good for Extract design tokens from figma Document ui components Document design system components Normalize color and typography systems Build a reusable component library

design-tokens Ui Library Component Variants Visual Design Design Documentation Theming

Also in maxritter/open-claude-design

View the repo

Open Claude Design Design

Access the Anthropic product named Claude Design when the request contains that exact name, a claude.ai/design URL, or a .dc.html file. Use...

Open Claude Design Quality Design

Apply product-grounded visual quality constraints during user-visible UI changes. Use for layout, styling, content hierarchy, theming, respo...

Open Claude UI Design Presentations

Create or redesign product UI in an existing codebase, including a wireframe, substantive visual variations, and an interactive prototype. U...

Open Claude UI Review Code Review & Testing

Review or polish a product UI for accessibility, brand fidelity, hierarchy, rhythm, responsive behavior, themes, interaction states, and gen...

Other Design skills

Frontend Design anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...

Algorithmic Art anthropics/skills

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...

Prototype mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...

Design An Interface mattpocock/skills

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...

Wireframe Sketch nexu-io/open-design

A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...

Wireframe Annotated nexu-io/open-design

An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...