DesignDNA-Skills

Based on Google Stitch DESIGN.md methodology and 58 world-class brand design systems (Apple, Tesla, Stripe, Vercel, Linear, Airbnb, Spotify, Notion, etc.), this skill provides a complete framework for AI agents to generate production-grade UI with distinctive aesthetic quality. Covers design analysis, DESIGN.md creation, and pixel-perfect implementation across all frontend platforms.

OpenAI GPT Image 2 skill for production visual asset generation and editing. Covers Image API vs Responses API selection, prompt-to-asset workflows, high-fidelity edits, output sizing, compression, moderation, cost controls, and DesignDNA-ready asset handoff.

Ant Design Pro — enterprise React admin scaffold + pro-components library. Scaffold (37k stars) gives a full B2B admin starter with layouts, routes, authentication, i18n. Pro-components (4k stars) provides high-level business components (ProTable, ProForm, ProLayout, ProDescriptions). Both active through 2026.

Ant Design (antd) React component library skill — Alibaba's flagship enterprise React UI (97k+ stars, v6.x, active). The de-facto standard for B2B admin/dashboard in China and widely used globally. Covers 60+ components with Form/Table patterns, v6 CSS-variable theming, App/ConfigProvider usage, @ant-design/cli, and v5 → v6 migration notes.

Ant Design X — Alibaba's React AI/LLM conversation UI library (active v2.x). Purpose-built for AI copilot / chatbot interfaces with streaming, message bubbles, sender input, suggestions, prompts, and thought processes. The React equivalent of TDesign Chat.

TDesign Vue Next Chat — Tencent's official AI/LLM conversation UI component package for Vue 3 (part of tdesign-vue-next monorepo, active v0.5.x). Covers Chatbot/Chat primitives, streaming message rendering, Markdown + code-block support, AG-UI or custom SSE service protocols, tool-call/thinking UI, and AI copilot interface patterns.

TDesign WeChat MiniProgram component library skill — Tencent's official native WeChat MP component library (v1.14.x, active). Covers 60+ components matching TDesign's cross-platform visual DNA. Includes npm install, component catalog, theme tokens, retail starter template, and WeChat Developer Tools integration.

TDesign Mobile component libraries for Vue 3 and React — Tencent's mobile H5 component libraries (tdesign-mobile-vue v1.13.x + tdesign-mobile-react v0.22.x, active). Covers mobile-optimized components (Tabbar, NavBar, ActionSheet, SwipeCell, etc.) with responsive sizing, safe-area behavior, and TDesign token parity.

TDesign React desktop component library skill — Tencent's React enterprise library (v1.16.x, active). Covers 60+ desktop components for B2B admin/dashboard. Includes installation, component catalog, theme customization via CSS variables, Starter templates, and Next.js setup.

TDesign Vue 3 desktop component library skill — Tencent's flagship Vue 3 enterprise library (2.1k stars, active, v1.19.x). Covers 60+ desktop components for B2B admin/dashboard. Includes installation with on-demand imports, component catalog, TDesign design tokens/CSS variables, Starter templates, dark mode, and Tencent-ecosystem integration patterns.

Ant Design Vue (antdv) — community Vue 3 port of Ant Design (20k stars, v4.x, active). Visual and API parity with React antd. For Vue 3 B2B admin apps wanting antd's design language. Covers installation, component catalog, v3 → v4 migration, on-demand imports, and theme tokens.

AntV (G2 / G6 / X6) — Alibaba's framework-agnostic data visualization stack. G2 (25k+ combined stars) for statistical charts, G6 for graph/network viz, X6 for flowchart/diagram editor. Plus @ant-design/charts as the React wrapper. Active through 2026. Includes use-case guide and typical chart/graph patterns.

Arco Design Vue — ByteDance's Vue 3 enterprise component library (4k stars, active). Paired Vue sibling of Arco Design React. Used extensively inside ByteDance products (Lark, Feishu) — polished, commercial visual aesthetics. 60+ components, tree-shakeable, TypeScript-friendly.

Chakra UI v3 — accessible React component library rebuilt on Panda CSS for zero-runtime styles (40k stars, active 2026). v3 is a breaking rewrite from v2 with new API (Field vs FormControl, style props via recipe). Covers install, v2 vs v3 differences, component patterns, and theme customization.

Element Plus — Vue 3 flagship desktop component library from Eleme/Ele.me (26k stars, active). Chinese-localized, mature, most-used Vue 3 B2B admin library in China. Covers 60+ components with full Vue 3 Composition API, theme tokens, and SFC-optimized imports.

Material Components for Flutter — historically a standalone repo, now consolidated into the Flutter SDK itself. The `package:flutter/material` bundled with Flutter is the continuation of this work. See `flutter-material` skill for the current path.

Material Components for iOS (MDC-iOS) — Google's Material Design library for UIKit. Archived 2025-12 but still usable for existing projects. Covers installation, component reference, theming, and migration guidance to SwiftUI/Apple HIG for new projects.

Material Web — Google's framework-agnostic Lit-based Web Components implementation of Material 3 (~9k stars, currently in maintenance mode). Safe for existing projects. For new React projects, MUI is usually the stronger path (see `mui-material` skill).

MUI material-ui — React's biggest Material Design component library (98k stars, v7.3+, active). Google Material Design's de-facto carrier on the web. Covers 100+ components with Emotion/styled CSS-in-JS, theme provider, Material 2/3 styling, dark mode, and Figma kits. For advanced components (DataGrid/Charts/DatePicker Pro), pair with `mui-x` skill.

MUI X — enterprise React components for MUI (v9, active, MIT + Pro/Premium tiers). DataGrid (most capable React table), Charts, DatePicker Pro (range, multi-input), TreeView. Pair with `mui-material` skill. Community tier covers 80% of needs; Pro unlocks column pinning, row grouping, Excel export; Premium adds aggregation, clipboard, row reordering.

NutUI Biz business components skill — e-commerce domain components for NutUI React (address, SKU, coupon, invoice, order list). ⚠️ MAINTENANCE MODE — last major release 2023-03, minor fixes through 2025-01. Still usable but not actively developed. For new projects, copy components out as starting points rather than npm-depending on them.

NutUI React v3 component library skill — JD's mobile-first React component library (1.2k stars, active). Covers 70+ components across basics, forms, feedback, layout, e-commerce. Works with plain React, Next.js, and Taro + React. Includes installation, component reference, theme tokens, on-demand imports, and Taro integration patterns.

NutUI official page templates skill — JD-style Vue 3 and React page/layout templates for mobile H5 and Taro MiniProgram (152 stars, active). Covers template taxonomy (home / product / order / checkout / me), how to scaffold from a template, and integration with NutUI Vue / React.

React Native Paper — Material Design for React Native (13k+ stars, v5.x, active). Cross-platform native iOS/Android Material 3 components. Use when building RN apps wanting Material aesthetics. Covers installation, component catalog, theme tokens, adaptive theme (light/dark/auto), and MD3 migration.

Remotion — "Make videos programmatically with React" (43.6k stars, active). A React-based framework that lets developers create videos using React components, props, CSS, Canvas, and SVG. Use for programmatic video generation (explainer videos, personalized ads, data-driven videos, GitHub Unwrapped-style content). Covers install, core concepts (Composition, frames, useCurrentFrame), Remotion Player for embedding, and Lambda for cloud rendering.

Tamagui — universal React UI library that compiles to React Native + web from the same source (10k+ stars, active). Zero-runtime styles via compile-time optimization. Best for shared React + React Native codebases. Covers install, core components, theme tokens, and the compiler setup.

Vant Weapp — Youzan's native WeChat MiniProgram component library (18.4k stars, v1.11+, active 2026). The most popular native MP library with 50+ mobile-optimized components. Use for WeChat-only MiniPrograms — for multi-vendor use Taro + NutUI instead.

Ant Design Mobile (antd-mobile) — Alibaba's React mobile H5 component library (11k stars, v5.x, active). Mobile-optimized components (Tabs, List, Form, Swiper, Popup, SafeArea) with iOS/Android adaptive styling. Includes install, catalog, theme tokens, and RN/H5 target distinctions.

Apple Human Interface Guidelines skill — spec (not code library) for iOS / iPadOS / macOS / visionOS / watchOS / tvOS native apps. Use as design token source for SwiftUI or as visual reference when replicating Apple aesthetics on the web. Includes SF Pro typography, spacing scale, corner radius tokens, dynamic system colors, Liquid Glass materials (WWDC 2025), and HIG principles.

Bootstrap 5 — classic CSS + JS component framework (174k stars, v5.3+, active). Mature, battle-tested for enterprise admin, internal tools, marketing sites. Ships with Bootstrap Icons. Vanilla-JS (no React/Vue dep). Best for projects wanting "install a theme and ship" speed. v4 is security-only. Includes install, grid, components, SASS customization.

Microsoft Fluent UI — Fluent 2 design language implementation. `@fluentui/react-components` v9 (React, active, used by Teams/Copilot) + `@fluentui/web-components` v3 RC (framework-agnostic). Use for Microsoft 365 plugin integration, Teams apps, enterprise apps wanting Fluent aesthetic. ⚠️ v8 (`@fluentui/react` / Fabric) is maintenance-only.

Flutter Material 3 — Google's cross-platform UI toolkit with built-in Material 3 components (`package:flutter/material`, bundled with Flutter SDK). Recommended path since `material-components-flutter` was archived in 2023. Covers widget catalog, ThemeData tokens, dynamic color, and Material 3 migration notes.

Material Components for Android (MDC-Android) — Google's Material Design implementation for the View / XML UI system on Android (17k stars, v1.14-beta with M3 Expressive, 🟢 active 2026). Use for legacy View-system Android apps. ⚠️ New Compose projects should use `androidx.compose.material3` instead.

MUI Base UI (`@base-ui-components/react`) — MUI's headless React primitives library (9.1k stars, v1.1 stable, active). Alternative to Radix Primitives. Unstyled, accessible components (Dialog, Popover, Select, Menu, etc.) to build your own design system.

Naive UI — modern TypeScript-first Vue 3 component library (17k stars, active, endorsed by Evan You). No CSS file to import (CSS-in-JS), full TS types, flexible theming via JS config. 80+ components. Best for Vue 3 teams wanting typed API and modern-flexible theming without CSS overhead.

Radix UI — two sibling libraries. Radix Primitives (18.8k stars) is unstyled, accessible React primitives (Dialog, Popover, Tooltip, Select, etc.) used by shadcn/ui and thousands of custom design systems. Radix Themes (8.3k stars, v3.3) is an opinionated styled layer on Primitives with 12-step color scales. Both active 2026.

React Bits — "the largest, most creative" React animated component library by David Haz (38.3k stars, active). 110+ animated components across text animations, UI elements, and backgrounds (including Three.js 3D effects). Distributed via shadcn CLI / jsrepo / manual copy. 4 technology variants per component (JS-CSS, JS-Tailwind, TS-CSS, TS-Tailwind). Perfect for memorable landing pages and marketing sites.

shadcn/ui — copy-paste React component library built on Radix Primitives + Tailwind CSS (80k+ stars, de-facto modern React standard 2024-2026). Not a traditional npm library — you own the code after CLI adds it. Includes setup, CLI commands, 40+ components, theming via CSS variables, dark mode.

Tailwind CSS v4 — utility-first CSS framework (87k+ stars, active). The dominant CSS choice for modern React/Vue/Svelte projects. v4 uses Oxide engine (much faster) and native CSS `@theme` directive. Covers install, v3 → v4 migration, design token customization, and common UI patterns.

TDesign Flutter — Tencent's Flutter component library (1.1k stars, active 2026). Alternative visual flavor to Flutter SDK's built-in Material. Use when you want Tencent's cross-platform design language on Flutter iOS/Android/Web. Includes install, component catalog, and theme customization.