design MCP Server
The Nyuchi Design Portal -- component registry, brand documentation hub, design system, and developer portal for the mukoko ecosystem.
Discovered via github-topic:mcp and last synced 4mo ago.
1. Install the package
npm install design-portal
Structured docs (use cases, variants, a11y notes)
Five Ubuntu Principles — rows from `ubuntu_principles`
`#B388FF`
Read a documentation page by slug
Browse all registry items, filter by type/layer/category
Brand system — ecosystem brands, typography, spacing
Hex
Search by name, description, or category
Technology
Nextra
[lingo.mukoko.com](https://lingo.mukoko.com)
Lucide React
—
Vitest + Testing Library
[nyuchi.com](https://nyuchi.com)
Five Ubuntu Pillars — rows from `ubuntu_pillars`
List every published agent skill (summary only; no body_mdx)
Static Ubuntu philosophy doctrine (philosophy, design, community, languages)
Fetch a single skill (full MDX body) by name
Version history for a component
Component count / categories / names for a given frontend layer (1–10)
Registry database status and row counts
`#D4A574`
Recharts
Description
[shamwari.ai](https://shamwari.ai)
What it does
Recent releases from the `changelog` table
`#0047AB`
Method
Database
Supabase / PostgreSQL
TypeScript (strict mode)
Supabase
URL
[mukoko.com](https://mukoko.com)
[bundu.family](https://bundu.family)
All portal URLs for a component
Data architecture (principles, data layer, pipeline, sovereignty)
System prompts from `ai_instructions` by target (mcp-server/claude/copilot)
Examples
OpenAPI 3.1 specification (YAML)
Next.js (App Router)
react-hook-form + zod
Trigger
[bushtrade.co.zw](https://bushtrade.co.zw)
Fetch full source code + metadata for any component
Fetch the Five African Minerals palette + semantic tokens
`#64FFDA`
ScyllaDB
Tailwind CSS 4 + CSS custom properties
@modelcontextprotocol/sdk
[nhimbe.com](https://nhimbe.com)
Generate a new component following CVA + Radix + cn() patterns
Get the shadcn CLI install command for one or more components
3D frontend axes + layers
Public API and MCP usage metrics (open data, CC BY 4.0)
`#FFD740`
Web3 Pod (TBD)
2.17.2
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.