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 the DesignCompose SDK, a production-grade Android library that renders Figma designs as native Jetpack Compose UI. It provides a complete pipeline: Figma plugins for designers (extended layout, animation timeline, auto-content preview), a Rust-based import crate (`dc_figma_import`) that fetches and caches Figma documents, a layout engine (`dc_layout`) wrapping the Taffy flexbox library, and a Kotlin runtime (`designcompose`) that resolves variants, handles interactions, and renders via Compose. The architecture is modular with clear separation: Rust crates handle data ingestion and layout computation, Kotlin modules provide the public API and rendering, and Gradle plugins automate Rust cross-compilation and Figma token management. The codebase includes extensive tests (unit, integration, Roborazzi screenshot, benchmarks) and reference apps (Tutorial, HelloWorld, Cluster Demo, AAOS Media Center). It supports live updates via polling or WebSocket, incremental document fetching, variable theming, and complex animations (smart animate, keyframe timelines). The repository is actively maintained with frequent commits, a versioned protobuf schema, and a CI/CD pipeline. While the multi-language stack (Kotlin, Rust, TypeScript) adds complexity, the code demonstrates strong engineering practices with reusable patterns in caching, layout, and animation.
Onlook is a browser-based visual editor for building and modifying Next.js + Tailwind CSS websites. It provides a Figma-like canvas where users can directly manipulate React components, with changes written back to source code via AST-based transformation. The application integrates an AI chat assistant that can generate code, edit files, and run terminal commands through a set of well-defined tools (e.g., search-replace, file edit, bash). The monorepo architecture separates concerns into packages for AI agents, code parsing, font management, UI components, database access (Drizzle + Supabase), git operations, and sandbox management (CodeSandbox). It also includes a complete billing system (Stripe), GitHub integration for project import, custom domain management, and a publish/deployment pipeline. The codebase demonstrates strong engineering practices with type-safe tRPC APIs, MobX state management in the editor, extensive use of Radix UI primitives, and a consistent monorepo toolchain (Bun workspaces, ESLint, Prettier). While the editor engine is somewhat monolithic, individual packages like the AST parser, font helpers, and utility library are well-isolated and testable.