design-md-chrome
Extract styles from any website and generate a DESIGN.md file for AI use.
- Type
- Agent Skill
- Open source
- Yes
- GitHub Stars
- ★ 2.3k
- Source
- skill-github
- Repository
- github.com/bergside/design-md-chrome
Overview
This is a Chrome extension that extracts styles and information from any given website and generates DESIGN.md or SKILL.md files. These files can be used with tools like Google Stitch, Claude Code, Codex, etc., to build websites based on design system blueprints. The generated files follow the open-source TypeUI DESIGN.md format. With this capability, AI can obtain design system documentation to better understand and apply design guidelines.
Capabilities
- ▪Automatically extract page styles
- ▪Generate DESIGN.md file
- ▪Generate SKILL.md file
- ▪Refresh extraction results
- ▪Download generated files
- ▪Explain generation process
Use cases
Setup
1. Open chrome://extensions; 2. Enable Developer Mode; 3. Click Load unpacked; 4. Select this project folder.
This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.
FAQ
How do I get started?
Load the extension in Chrome, then visit the target website to perform extraction.
What does the generated file structure look like?
Includes sections such as Mission, Brand, Style Foundations, etc.
Related skills
material-3-skill
Material Design 3 skills, supporting over 30 components, design tokens, themes, and responsive layouts.
xhs-visual-director-skill
Visual director for Xiaohongshu image and text planning, offering multi-page structure and visual solutions.
drawio-skill
Generate draw.io diagrams from natural language, supporting multiple presets and export formats.
ui-ux-pro-max-skill-cn
Professional-grade UI/UX design intelligence for AI coding assistants.
logo-generator-skill
Professional SVG logo generator with multiple design variants and presentation backgrounds.
claude-skill-aso-appstore-screenshots
Generate high-quality App Store screenshots to boost app download rates.