claude-design-system-prompt

Transform LLMs into opinionated, accessibility-focused, and AI-abuse-resistant design collaboration partners.

Agent SkillDesignOpen source

Type: Agent Skill
Open source: Yes
GitHub Stars: ★ 1.2k
Source: skill-github
Repository: github.com/Trystan-SA/claude-design-system-prompt

Overview

Claude Design System Prompt is a reverse-engineered system prompt and skill library that transforms large language models (LLMs) into design collaboration partners with a clear design philosophy, strong focus on accessibility, and resistance to AI-generated spam. The skill library includes 20 system prompts and 14 callable skills, suitable for scenarios requiring high-quality design outputs. Users can directly use the system prompts or invoke the skills programmatically for various design tasks such as problem identification, frontend aesthetic direction, wireframing, and more.

Capabilities

▪Content discipline: Every element has value
▪Aesthetic discipline: Avoid AI clichés, maintain consistent color and style
▪Visual hierarchy and rhythm: Size, color, weight, position, density, spacing ratios
▪Accessibility: WCAG compliance, semantic HTML, keyboard navigation, focus indicators, motion preferences
▪Interaction and feedback: Hover, active, disabled, focus, loading, validation states
▪Systems thinking: Components and tokens over one-off pages

Use cases

Problem protocol during design project kickoffFrontend aesthetic direction without brand guidelinesLow-fidelity exploration and multiple variationsCreating interactive prototypes

Setup

Requires: API Key

Paste the content of `system-prompt.md` into any LLM that supports system prompts, and invoke skills from the `skills/` directory as needed.

This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.

FAQ

What LLMs does this skill library support?

Supports LLMs that accept system prompts, such as Claude, GPT, Gemini, etc.

How do I use these skills?

Use the skill name as a trigger; when the user's request matches the skill description, the agent loads and executes the skill.

Related skills

material-3-skill

Material Design 3 skills, supporting over 30 components, design tokens, themes, and responsive layouts.

Agent Skillmaterial designui

xhs-visual-director-skill

Visual director for Xiaohongshu image and text planning, offering multi-page structure and visual solutions.

Agent Skill

drawio-skill

Generate draw.io diagrams from natural language, supporting multiple presets and export formats.

Agent Skill

ui-ux-pro-max-skill-cn

Professional-grade UI/UX design intelligence for AI coding assistants.

Agent Skill

logo-generator-skill

Professional SVG logo generator with multiple design variants and presentation backgrounds.

Agent Skill

claude-skill-aso-appstore-screenshots

Generate high-quality App Store screenshots to boost app download rates.

Agent Skill