skill

art-inspired-design-system-for-AI

: Three AI agent skills that turn paintings into design systems. Extract color, typography, and spacing as W3C DTCG tokens. Generate React components with zero hardcoded values. Compose preview pages

peiqingzhang/art_inspired_design_system_for_AIcommunitylistedunreviewed

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/peiqingzhang/art_inspired_design_system_for_AI itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 25, 2026

Painting to Design System

Turn classic paintings into production-ready design systems — using AI agent skills. Three skills form a pipeline: analyze a painting's colors, generate design tokens, then build a full React component library. Every color, radius, and spacing value traces back to the source artwork.

The tokens and components are structured for AI agents to consume and build with. An agent can read the design tokens, apply them to new UI, or extend the component library — no manual design handoff needed.

Skills

Three self-contained skills in skills/. Each has a SKILL.md (instructions any LLM agent can follow), reference files, and Python scripts that do the heavy lifting.

Skill	What it does
painting-to-m3	Strict Material Design 3 tokens. Picks 3 maximally-distinct colors for primary/secondary/tertiary, standard near-white surfaces. Drop-in compatible with MUI, Jetpack Compose, Flutter.
painting-to-theme	Expressive tokens that capture the painting's full color richness. Bold surfaces pulled from the canvas, extended color tokens for every accent, dark mode from the painting's shadows.
tokens-to-components	25 React components (TypeScript + CSS variables) generated from the tokens. Includes Storybook stories, visual preview HTML, and WCAG AA contrast compliance.

These skills work with Claude Code (as local plugins), but the SKILL.md format is plain markdown — any AI coding agent (Cursor, Windsurf, Copilot, etc.) can follow the instructions and run the scripts.

Pipeline

Painting image
  → painting-to-m3  or  painting-to-theme
    → .tokens.json (W3C DTCG format)
      → tokens-to-components
        → React components + preview.html

Themes

Eight paintings, every single of them is completely in the Public Domain., each with both an M3 (strict) and Theme (expressive) variant — 16 complete design systems.

Theme	Painting	Mood
`vangogh-irises`	Van Gogh — Irises (1889)	Vibrant, impasto, impressionist energy
`vangogh-green-wheat`	Van Gogh — Green Wheat Fields (1890)	Serene, pastoral, luminous
`monet-water-lilies`	Monet — Water Lilies (1906)	Serene, ethereal, impressionist reverie
`hokusai-great-wave`	Hokusai — The Great Wave (1831)	Dramatic, powerful, ukiyo-e precision
`hopper-nighthawks`	Hopper — Nighthawks (1942)	Urban, noir, late-night melancholy
`matisse-red-studio`	Matisse — The Red Studio (1911)	Bold, expressive, Fauvist energy
`cezanne-mont-sainte-victoire`	Cezanne — Mont Sainte-Victoire (1887)	Structured, contemplative, proto-cubist
`wang-ximeng-rivers-mountains`	Wang Ximeng — A Thousand Li (1113)	Majestic, classical Chinese landscape

Theme structure

themes/{painting-name}/
├── source/painting.jpg          # Source painting
├── m3/                          # Strict M3 variant
│   ├── tokens/                  # .tokens.json, theme.css, tailwind config
│   ├── components/              # 25 React components + Storybook stories
│   └── review/                  # preview.html, palette-review.html, contrast-report.md
└── theme/                       # Expressive variant
    ├── tokens/
    ├── components/
    └── review/

Usage

With an AI coding agent

Point your agent at a skill's SKILL.md and give it a painting. The instructions and scripts handle the rest.

In Claude Code, install as a local plugin and use the slash commands:

> /painting-to-theme path/to/painting.jpg
> /tokens-to-components path/to/tokens/

Using the tokens directly

The .tokens.json files follow the W3C DTCG spec. Use theme.css for CSS custom properties, or tailwind.config.snippet.js for Tailwind.

Using the components

Each theme's components/ folder is a self-contained React library:

import { Button, Card, Input } from './components';
import './components/theme.css';

<Button variant="filled">Primary Action</Button>
<Card variant="elevated">Content here</Card>

Component sets

25 components across 5 sets:

Set	Components
Core	Button, Card, Input, Chip, Badge, Avatar, Divider
Navigation	AppBar, Tabs, Sidebar, Breadcrumb, BottomNav
Data	Table, List, DataCard, Stat
Feedback	Dialog, Snackbar, Tooltip, Progress, Skeleton
Layout	Container, Grid, Stack, Surface

All components follow M3 spec with filled/outlined/tonal variants, state layers, and WCAG AA keyboard accessibility.

License

The skills and generated code are provided as-is. Source paintings are public domain.