thehardwarestore.ai

dembrandt is a production-grade design token extraction tool that analyzes live websites via headless Chromium (Playwright) and produces structured outputs including colors, typography, spacing, components, shadows, motion, and gradients. It supports multiple export formats: W3C DTCG tokens, Tailwind CSS v4 themes, DESIGN.md, self-contained HTML reports, PDF brand guides, and terminal display. Beyond extraction, it offers drift detection (comparing extractions over time with a 0–100 score), a GitHub Action for CI gates, and an MCP server for AI agent integration (Claude, Cursor). The architecture is modular with fault-isolated extractors, a pure-function drift engine, and a generic async job queue. While primarily an application, it includes an optional ONNX ML model for brand primary color prediction and advanced color science (OKLab, CIEDE2000, gamut mapping), giving it a hybrid character. The codebase demonstrates strong engineering practices: extensive test coverage, CI/CD pipelines, lazy browser loading, and graceful degradation across all output formatters.

This repository is a comprehensive native UI component library that implements Microsoft's Fluent Design System for Apple platforms (iOS, macOS, and visionOS). It provides over 30 reusable controls—such as buttons, avatars, tables, navigation bars, date pickers, tooltips, and notifications—each backed by a sophisticated token-based theming system. The architecture is modular: a common core (`FluentUI_common`) defines design tokens, themes, and utilities, while platform-specific modules (`FluentUI_iOS`, `FluentUI_macOS`) contain UIKit and AppKit implementations. Both SwiftUI and UIKit are supported, with bridging components like `ControlHostingView` and `MSF*` wrapper classes. The library is distributed via CocoaPods and Swift Package Manager, and includes extensive demo apps and UI tests. The codebase is actively maintained, with CI pipelines, localization automation, and regular commits. The standout feature is the token system (`ControlTokenSet`, `TokenSet`, `DynamicColor`), which provides a clean, extensible abstraction for theming that could be extracted and reused in other projects.

This is the IBM Carbon Design System monorepo, a comprehensive UI component library and design token system. It provides production-ready React components (via `@carbon/react`) and Lit-based Web Components (via `@carbon/web-components`), along with SCSS styles, icons, pictograms, themes, typography, layout, and motion design tokens. The repository also includes a CLI tool for scaffolding and bundling (`@carbon/cli`), an upgrade utility with jscodeshift codemods for automated version migrations (`@carbon/upgrade`), and a set of shared configurations (ESLint, stylelint, prettier, Jest). The architecture is a multi-package monorepo managed with Yarn workspaces and Lerna, with dedicated build pipelines for icons (via `@carbon/icon-build-helpers`) and design tokens (via Style Dictionary). The system is heavily tested with Jest, Playwright for accessibility and end-to-end tests, and includes Figma code-connect files for design-to-code integration.

Style Dictionary is a mature, well-architected design token transformation and build system. It ingests structured design tokens (JSON, JS, JSON5, YAML) and, through a configurable pipeline of parsers, preprocessors, transforms, reference resolution, and formatters, outputs platform-specific code files for web (CSS, SCSS, Less, Stylus, JavaScript, TypeScript), Android (XML, Compose/Kotlin), iOS (Objective-C, Swift), Flutter/Dart, and more. The system is heavily extensible via hooks—transforms, formats, filters, actions, parsers, preprocessors, and file headers—allowing teams to adapt token processing to any design system. It supports the W3C Design Tokens Community Group (DTCG) standard syntax ($value, $type) alongside its original format. The codebase demonstrates strong engineering: comprehensive test suites (unit, integration, snapshot, performance), a clean class-based core (lib/StyleDictionary.js), thoroughly tested reference resolution, and a plugin-style registration system. While the sheer breadth of platform targets and dual syntax support adds complexity, the architecture remains modular and the majority of components are independently reusable. A few areas show technical drift—patched external test dependencies, bundled ESM shims for glob and memfs, and some deprecated APIs slated for removal in v6—but overall the project is actively maintained with frequent releases and responsive issue triage.

This repository is a production-grade Model Context Protocol (MCP) server that bridges AI assistants to Figma. It exposes 100+ MCP tools for reading and manipulating Figma files, variables, components, styles, FigJam boards, Slides, version history, tokens, and accessibility audits. The architecture is dual-mode: a local Node.js server (`src/local.ts`) communicates over stdio to AI clients and via WebSocket to a bundled Figma Desktop Bridge plugin, while a Cloudflare Workers variant (`src/index.ts`) supports cloud sessions with OAuth and a Durable Object WebSocket relay. The Desktop Bridge is the primary data channel, with Figma REST API fallbacks for scenarios where the plugin is unavailable or limited to certain plans. Beyond basic Figma CRUD, the codebase contains substantial engineering investment in design-token synchronization: canonical DTCG-aligned token documents round-trip through parsers and formatters for CSS variables, Tailwind v3/v4, SCSS, TypeScript modules, Style Dictionary, and Tokens Studio. A separate extraction engine (`src/core/extraction/`) mines production codebases for styling conventions and scaffolds design-system packages, while a scoring engine produces weighted design-system health dashboards. These components give the repo a hybrid quality: it is fundamentally an application, but its token pipeline and codebase-analysis subsystems are data-engineering-like assets that could be reused independently. The codebase demonstrates strong engineering practices: strict Zod schemas, consistent tool registration factories, connector abstraction, extensive Jest test coverage, atomic file writes, adaptive response compression, and careful caching/invalidation. However, it also carries meaningful debt: some token parsers are unimplemented stubs, a few files are monolithic (`figma-tools.ts`, `src/local.ts`), local/cloud connector implementations must be kept in sync manually, and some documentation references outdated internal paths. Overall, this is a mature, feature-rich MCP server with several genuinely reusable components for anyone building design-tool pipelines, token bridges, or local process-lifecycle infrastructure.

This repository implements `@google/design.md`, a CLI tool and programmatic library for a design token format called DESIGN.md. The format pairs YAML frontmatter (tokens) with Markdown prose (rationale). The tool provides validation (lint), diffing, multi-format export (Tailwind v3 JSON, Tailwind v4 CSS, DTCG JSON, CSS custom properties), and spec generation. It is published as an npm package and is designed to be consumed by both human designers and AI coding agents. The architecture is a monorepo with a single CLI package (`packages/cli`) that uses `citty` for command routing. The core pipeline parses DESIGN.md files, builds a token model with reference resolution and color parsing, runs 11 lint rules (including WCAG contrast ratio checks), and emits results via stateless handler functions. A separate spec generation pipeline compiles `spec.mdx` with a custom MDX compiler to produce `docs/spec.md`. The codebase is well-tested with unit tests for each component. Key entry points include the CLI binary (`packages/cli/src/index.ts`), the programmatic `lint()` function (`packages/cli/src/linter/index.ts`), and the spec generator (`packages/cli/src/linter/spec-gen/`). External dependencies are minimal: `citty` for CLI, `zod` for validation, `consola` for logging, and `bun` for build/test. The repository also includes three complete example design systems and a set of agent skills for development workflow.