whatisgithub

What is claude-design-system-prompt?

trystan-sa/claude-design-system-prompt — explained in plain English

Analysis updated 2026-05-18

1,767Audience · designerComplexity · 1/5LicenseSetup · easy

In one sentence

A reverse engineered system prompt and skill library that turns an AI chat assistant into an opinionated, accessibility focused design collaborator that avoids generic AI style visuals.

Mindmap

mindmap
  root((repo))
    What it does
      System prompt for design
      Skill library
      Anti AI slop rules
    Tech stack
      Markdown prompts
      Claude and Codex variants
    Use cases
      Redesign UI
      Accessibility audit
      Extract design tokens
    Audience
      Designers
      AI agent builders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Paste the system prompt into Claude, GPT, Gemini or a local model to get design help that avoids generic AI aesthetics.

USE CASE 2

Use the skill files to run structured design workflows like wireframing, prototyping and accessibility audits.

USE CASE 3

Extract a design system or component inventory from an existing site or app.

USE CASE 4

Run a final polish pass before shipping a design to check hierarchy, accessibility and interaction states.

What is it built with?

Markdown

How does it compare?

trystan-sa/claude-design-system-promptfacebookresearch/tensorcomprehensionsop7418/guizang-social-card-skill
Stars1,7671,7661,763
LanguageC++HTML
Last pushed2023-04-28
MaintenanceDormant
Setup difficultyeasyhardeasy
Complexity1/55/52/5
Audiencedesignerresearchervibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

This repository shares a system prompt and a set of skill files that turn an AI chat assistant into a design collaborator with strong opinions about visual quality. It was built by reverse engineering the prompt behind Claude's design tool from Anthropic, then packaged so anyone can paste it into any large language model that accepts a system prompt, including Claude, GPT, Gemini, or models run locally. The core idea is to push back against generic AI generated design work: heavy gradients, emoji used as decoration, cards with a rounded corner and a colored left border, and the same one or two fonts appearing everywhere. Instead the prompt lays out a full design philosophy covering content discipline, so nothing appears unless it earns its place, visual hierarchy through size, color, weight and spacing, accessibility rules like keyboard navigation and focus states, and treating components and reusable tokens as the building blocks rather than one off pages. Alongside the main prompt sit 14 separate skill files the assistant can call on for specific jobs: asking discovery questions before starting, picking an aesthetic direction when no brand exists yet, building wireframes, making slide decks or clickable prototypes, extracting a design system or component inventory from existing sources, and running review passes for accessibility, generic AI look, visual rhythm, interaction states, and a final polish check. These skills are meant to be chained together, for example moving from discovery questions through aesthetic direction, wireframing, prototyping, and a polish pass. There are two variants included: one written for Claude Code and Claude.ai, using subagents for parallel review work, and one adapted for OpenAI's Codex that runs the same reviews in sequence instead. The project also documents how its instructions were calibrated for newer models that follow directions more literally, noting that older models may need stronger, more insistent phrasing to get the same behavior. The project is open source under the MIT license, so it can be copied, modified, and reused freely, including for commercial purposes, as long as the copyright notice is kept.

Copy-paste prompts

Prompt 1
Load the system prompt from claude-design-system-prompt and use it to redesign my landing page without generic AI visual patterns.
Prompt 2
Using the ai-slop-check skill from this repo, review my current UI for gradients, emoji decoration and other AI style tropes.
Prompt 3
Walk me through the discovery-questions skill before we start designing my app's dashboard.
Prompt 4
Use the design-system-extract skill to pull color, type and spacing tokens from this codebase.

Frequently asked questions

What is claude-design-system-prompt?

A reverse engineered system prompt and skill library that turns an AI chat assistant into an opinionated, accessibility focused design collaborator that avoids generic AI style visuals.

What license does claude-design-system-prompt use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is claude-design-system-prompt to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is claude-design-system-prompt for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.