Description
#Playwright #VisionLLM #FrontendDevelopment #UIReplication #WebRestoration #OpenSourceProject
OpenDesign is an open-source tool for automatically extracting website visual design specifications. It is based on Playwright and Vision LLM, allowing direct analysis of target web pages to organize visual information such as colors, fonts, font sizes, spacing, corner radii, and shadows into standardized Design Tokens.
Previously, when replicating web pages, developers typically had to open the browser console, inspect element styles one by one, and manually record CSS parameters. OpenDesign automates this process, extracting styles from the actual rendering results in a real browser, and then using a multimodal model for induction and verification, ultimately outputting design specifications suitable for frontend development and AI programming tools.
- Extract Computed Styles: Automatically reads the final effective CSS properties such as color, font, spacing, border, corner radius, and shadow of elements.
- Dynamic State Analysis: Can analyze style changes under interactions such as hover, focus, and active states.
- Pseudo-Class Style Extraction: Identifies styles related to certain pseudo-classes and pseudo-elements, reducing manual inspection work.
- Vision LLM Visual Verification: Analyzes page layout, visual hierarchy, and color relationships through a multimodal model, normalizing and organizing the extraction results.
- Clean Redundant Styles: Filters out duplicate, temporary, or irrelevant CSS data, retaining core parameters more suitable for building design systems.
- Generate Design Tokens: Organizes scattered styles into unified specifications for colors, fonts, spacing, corner radii, and shadows.
- Multiple Format Exports: Supports outputting standardized JSON, CSS Variables, and Markdown design specification files.
- Compatible with AI Programming Tools: The exported Markdown or Token files can be directly provided to tools like Claude Code and Cursor for constraining subsequent UI generation.
- Suitable for Web Restoration: Can be used to reference the visual systems of excellent websites, assisting in building one's own component library and design system.
- Target Audience: Suitable for frontend developers, independent developers, product managers, and users engaged in AI-native interfaces and UI automation generation.
- Note Copyright and Trademark Risks: The extraction results are more suitable for style research and design system references. When used for commercial projects, direct copying of brand logos, illustrations, icons, and other protected assets should be avoided.
OpenDesign is an open-source tool for automatically extracting website visual design specifications. It is based on Playwright and Vision LLM, allowing direct analysis of target web pages to organize visual information such as colors, fonts, font sizes, spacing, corner radii, and shadows into standardized Design Tokens.
Previously, when replicating web pages, developers typically had to open the browser console, inspect element styles one by one, and manually record CSS parameters. OpenDesign automates this process, extracting styles from the actual rendering results in a real browser, and then using a multimodal model for induction and verification, ultimately outputting design specifications suitable for frontend development and AI programming tools.
Software Features
- Real Browser Rendering: Utilizes Playwright to open and run the target web page, obtaining the actual rendered results of the page.- Extract Computed Styles: Automatically reads the final effective CSS properties such as color, font, spacing, border, corner radius, and shadow of elements.
- Dynamic State Analysis: Can analyze style changes under interactions such as hover, focus, and active states.
- Pseudo-Class Style Extraction: Identifies styles related to certain pseudo-classes and pseudo-elements, reducing manual inspection work.
- Vision LLM Visual Verification: Analyzes page layout, visual hierarchy, and color relationships through a multimodal model, normalizing and organizing the extraction results.
- Clean Redundant Styles: Filters out duplicate, temporary, or irrelevant CSS data, retaining core parameters more suitable for building design systems.
- Generate Design Tokens: Organizes scattered styles into unified specifications for colors, fonts, spacing, corner radii, and shadows.
- Multiple Format Exports: Supports outputting standardized JSON, CSS Variables, and Markdown design specification files.
- Compatible with AI Programming Tools: The exported Markdown or Token files can be directly provided to tools like Claude Code and Cursor for constraining subsequent UI generation.
- Suitable for Web Restoration: Can be used to reference the visual systems of excellent websites, assisting in building one's own component library and design system.
- Target Audience: Suitable for frontend developers, independent developers, product managers, and users engaged in AI-native interfaces and UI automation generation.
- Note Copyright and Trademark Risks: The extraction results are more suitable for style research and design system references. When used for commercial projects, direct copying of brand logos, illustrations, icons, and other protected assets should be avoided.
