Skip to content
cccskills
FreePublished on GitHub

open-claude-design-system

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.

The English summary is being prepared. Showing the original description.

maxritter/open-claude-design
See how to install

Files included (8)

  • SKILL.md3.7 KB
  • agents/openai.yaml147 B
  • LICENSE.md1.9 KB
  • references/agent-spec.md4.8 KB
  • references/claude-design-package.md7.1 KB
  • references/components.md2.2 KB
  • references/tokens.md2.3 KB
  • tests/evals.json2.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Design System

Turn an existing visual language into authoritative tokens and reusable component contracts. Extraction is evidence work: the source may be inconsistent, but the result must not silently invent consistency.

Important boundaries

  • Inspect the user's code, brand material, screenshots, or named reference before defining values.
  • Preserve source names and exact values when they are authoritative. Record near-duplicates and conflicts rather than merging them without a decision.
  • Match the project's existing token and component format. Do not introduce a second CSS/JSON/TypeScript/Tailwind representation by default.
  • A design-system request concerns product UI. Software architecture, distributed systems, schemas, and API design are outside this skill.

Select the relevant procedure

Read only the required references, resolved relative to this skill:

RequestRequired reference
Colors, type, spacing, radii, shadows, motion, breakpoints, or theme tokensreferences/tokens.md
Reusable UI components, variants, states, composition, or a component inventoryreferences/components.md
A project-local design skill so future agent work follows the product's system automaticallyreferences/agent-spec.md
Publishing the system into Claude Design as a design system that projects can bindreferences/claude-design-package.md

Use tokens and components together when the user wants a complete system or component library. Token extraction precedes component documentation because component contracts should name real tokens. The agent-facing package comes last and restates that evidence; offer it whenever the extraction is meant to govern later UI work in the repository, since a system that lives only in code is re-explained on every task.

Execution contract

  1. Identify authoritative sources and their precedence, including bound design systems, UI kits, component sources, neighboring examples, and applicable templates.
  2. Extract observed values, usage, variants, and states with source locations.
  3. Separate observed facts, inferred groupings, missing decisions, and recommended consolidation.
  4. Emit or update the format already used by the project when the user requested implementation; otherwise produce a reviewable inventory.
  5. Verify that every emitted token/component traces to a source or an explicit user decision and that consuming code still builds or renders when files changed.

Completion

The system is complete when sources and precedence are named, every recorded value is traceable, inconsistencies and gaps remain visible, output matches the repository's native format, and a maintainer can use the result without reverse-engineering the extraction.

When not to use

  • General system design, software architecture, data modeling, or API contracts
  • Creating a new screen or flow; use open-claude-ui-design
  • Auditing a finished UI without extracting reusable structure; use open-claude-ui-review
  • Inventing a brand from scratch when there is no source; establish direction through open-claude-ui-design
  • Reading or changing a design system stored in Claude Design; use open-claude-design for access, then return here for extraction or for the package shape in references/claude-design-package.md

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

open-claude-design

Free

Access Claude Design and Claude artifacts when the request names Claude Design, a Claude artifact, Slides deck, or Design System artifact, or contains a claude.ai/design or claude.ai artifact URL or a .dc.html file. Use for creating and editing designs, decks, design systems, and artifact pages; assets, comments, artifact databases, sharing, versions, rendering, standalone-to-artifact migration, and code-to-design or design-to-code synchronization; otherwise stay inactive.

The English summary is being prepared. Showing the original description.

maxritter/open-claude-design37Updated Oct 20, 2026

open-claude-design-quality

Free

Apply 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.

The English summary is being prepared. Showing the original description.

maxritter/open-claude-design37Updated Oct 20, 2026

open-claude-ui-design

Free

Create or redesign product UI in an existing codebase, including a wireframe, substantive visual variations, and an interactive prototype. Use for requests about UI layout, visual direction, screens, flows, components, a landing page, dashboard, or making an interface feel polished. Do not use for backend work, system architecture, decks, or logic-only UI fixes.

The English summary is being prepared. Showing the original description.

maxritter/open-claude-design37Updated Oct 20, 2026

open-claude-ui-review

Free

Review or polish a product UI for accessibility, brand fidelity, hierarchy, rhythm, responsive behavior, themes, interaction states, and generic AI-template patterns. Use for visual audits, accessibility checks, UX polish, UI critique, or pre-ship design review. Do not use for generic code review, backend review, or API design.

The English summary is being prepared. Showing the original description.

maxritter/open-claude-design37Updated Oct 20, 2026

See all skills by maxritter

Report a problem with this skill