design MCP Server
Open source design system for Angular — and any framework via Web Components. W3C DTCG design tokens as a single source of truth for Figma and code; ships an MCP server for AI assistants. 簡素 — simplicity through elimination of excess.
Discovered via github-topic:model-context-protocol and last synced 3mo ago.
1. Install the package
npm install @kanso-protocol/source
Raw palette values
[accordion.md](docs/components/accordion.md)
[card.md](docs/components/card.md)
36px
24px
Default appearance
[drawer.md](docs/components/drawer.md)
Purpose
Interface roles
52px
Action unavailable — removed from tab order
[avatar-group.md](docs/components/avatar-group.md)
Height
Behavior
Action in progress — keeps focus, `aria-busy`
[breadcrumbs.md](docs/components/breadcrumbs.md)
[markdown-viewer.md](docs/components/markdown-viewer.md)
[virtual-list.md](docs/components/virtual-list.md)
Titled block of form fields (inline / stacked)
Tabs + stack of SettingsPanels (Profile / Preferences / Danger zone)
28px
Pointer over element
Contract
[button.md](docs/components/button.md)
[datepicker.md](docs/components/datepicker.md)
[file-upload.md](docs/components/file-upload.md)
[popover.md](docs/components/popover.md)
Active filter chips + add/save/clear
Single sidebar / nav link with icon and badge
Horizontal flex row primitive
Single-metric tile for dashboards
Centered auth card with form, divider, social buttons
44px
Keyboard focus — 2px outline ring
[avatar.md](docs/components/avatar.md)
[combobox.md](docs/components/combobox.md)
[dropdown-menu.md](docs/components/dropdown-menu.md)
[input.md](docs/components/input.md)
[segmented-control.md](docs/components/segmented-control.md)
[tabs.md](docs/components/tabs.md)
Full-width announcement strip
Avatar + popover with profile + logout
Pointer pressed
[alert.md](docs/components/alert.md)
[checkbox.md](docs/components/checkbox.md)
[divider.md](docs/components/divider.md)
[form-field.md](docs/components/form-field.md)
[progress.md](docs/components/progress.md)
[select.md](docs/components/select.md)
[textarea.md](docs/components/textarea.md)
[tooltip.md](docs/components/tooltip.md)
Page chrome — Header + Sidebar + main slot
Equal-column responsive grid
Title + breadcrumbs + actions + tabs
Vertical flex stack primitive
[badge.md](docs/components/badge.md)
[command-palette.md](docs/components/command-palette.md)
[pagination.md](docs/components/pagination.md)
[rich-text-editor.md](docs/components/rich-text-editor.md)
[table.md](docs/components/table.md)
[toggle.md](docs/components/toggle.md)
What it is
404 / 500 / generic error page layout
Expanded / collapsed app sidebar
What it shows
What it is
[dialog.md](docs/components/dialog.md)
[empty-state.md](docs/components/empty-state.md)
[number-stepper.md](docs/components/number-stepper.md)
[skeleton.md](docs/components/skeleton.md)
[timepicker.md](docs/components/timepicker.md)
[tree.md](docs/components/tree.md)
Page max-width + padding
Top app bar with logo, nav, search, user
Search / filter / actions bar above a table
Full app shell: KPIs, charts, recent activity
[icon.md](docs/components/icon.md)
[radio.md](docs/components/radio.md)
[slider.md](docs/components/slider.md)
[toast.md](docs/components/toast.md)
Bell-anchored notification panel
Card of settings rows with controls
Productivity / admin scaffold — transparent header (logo + flexible header-nav + theme toggle + notifications + user menu), collapsible sidebar with smooth animation, 1-or-2-pane content area with drag-to-resize, light / dark / system theme handling, `prefers-color-scheme` live-tracking. Slot-first API: header-nav / notifications / user-menu items are content-projection slots, so each projected element keeps its own `routerLink` / `(click)` / `*ngIf`.
Inline + command-palette search
Light / dark / system switcher
What it is
Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, UI mockups, product shots, or transparent-background cutouts. Use when the result should be an image asset rather than repo-native SVG, HTML/CSS, or canvas.
Challenges hacky fixes on non-trivial changes.
Apply UI design principles from Refactoring UI by Adam Wathan & Steve Schoger. Covers visual hierarchy (size, weight, color, spacing), layout systems (spacing scales, grids), typography (type scales, line-height, alignment), color (HSL palettes, shade systems, accessible contrast), depth (shadow elevation, overlap), images (text on images, user content, icons), and finishing touches (accent borders, empty states, fewer borders). Trigger on "UI design", "visual hierarchy", "spacing system", "type scale", "color palette", "shadow", "layout", "design system", "component design", "card design", "form design", "button design", "refactoring UI", "design tokens", "dark mode", "responsive design".
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.
Design engineering skill for AI Agents — build interfaces with craft-level quality
Learn how to use the absolute-spec Claude skill. Complete guide with installation instructions and examples.
Learn how to use the oasis-design-system Claude skill. Complete guide with installation instructions and examples.
Learn how to use the Typography Advisor Claude skill. Complete guide with installation instructions and examples.