Open Claude Design Quality
maxritter/open-claude-designApply product-grounded visual quality constraints during user-visible UI changes. Use for layout, styling, content hierarchy, theming, responsive behavior, or interaction affordances. Stay inactive for logic-only changes that preserve the rendered interface.
At a glance
This skill is for Design and helps you review ui layout and spacing, evaluate visual hierarchy, and assess responsive design.
git clone --depth 1 https://github.com/maxritter/open-claude-design
cp -r open-claude-design/skills/open-claude-design-quality ~/.claude/skills/open-claude-design-quality
UiVisual DesigncssLayoutsaccessibilityInteraction Design
Also in maxritter/open-claude-design
View the repoAccess the Anthropic product named Claude Design when the request contains that exact name, a claude.ai/design URL, or a .dc.html file. Use...
Extract, document, or normalize a product UI design system from code, screenshots, or brand sources. Use for visual tokens, theme variables,...
Create or redesign product UI in an existing codebase, including a wireframe, substantive visual variations, and an interactive prototype. U...
Review or polish a product UI for accessibility, brand fidelity, hierarchy, rhythm, responsive behavior, themes, interaction states, and gen...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
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,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...