New CLI Tool Extracts Design Systems from Websites
A new command-line interface tool called `design-memory` is gaining attention among developers. The tool crawls web pages to automatically extract design system elements such as colors, typography, and spacing values. This utility could help teams document existing design systems, analyze competitor sites, and streamline the creation of new pages.
- The tool's creator, operating under the GitHub handle "memvid," was motivated by the tedious nature of manually inspecting websites to understand their design patterns. - `design-memory` operates in a four-stage pipeline: "Acquire" uses Playwright to crawl and screenshot pages, "Analyze" deterministically extracts initial design tokens, "Interpret" uses OpenAI's GPT-4o to semantically label elements and infer design principles, and "Project" generates the final AI-readable markdown files. - The final output is a `.design-memory/` folder containing markdown files specifically structured to be consumed by LLMs like Claude or those in AI-native code editors such as Cursor, to facilitate high-fidelity reproduction of the original design. - Beyond single URLs, the tool can also learn a design system from a local image file, which bypasses the crawling and computed styles stages, and can merge inputs from multiple pages into a single, unified design system. - The underlying architecture relies on several key open-source libraries, including Playwright for browser automation, Sharp for handling image buffers, and Zod for data validation and schema repair of the extracted design information. - A similar open-source tool, `Dembrandt`, also uses Playwright to extract design tokens from live websites. However, `Dembrandt` focuses on outputting confidence scores for extracted colors and provides exports in the W3C Design Tokens standard, whereas `design-memory` is geared towards generating descriptive markdown for AI interpretation. - The GitHub repository for `design-memory` is part of a broader set of projects by "memvid" focused on AI memory, including a library that uses MP4 files as a portable vector database for text, suggesting a deeper interest in how AI agents can store and retrieve information.
