{"id":50671798,"url":"https://github.com/bergside/design-md-chrome","last_synced_at":"2026-06-25T10:00:28.155Z","repository":{"id":351337268,"uuid":"1210537388","full_name":"bergside/design-md-chrome","owner":"bergside","description":"Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI","archived":false,"fork":false,"pushed_at":"2026-05-25T18:28:25.000Z","size":52,"stargazers_count":2062,"open_issues_count":1,"forks_count":254,"subscribers_count":10,"default_branch":"main","last_synced_at":"2026-05-25T20:25:07.259Z","etag":null,"topics":["ai","chrome","chrome-extension","claude","claude-design","codex","design-md","design-skills","extension","gemini","open-source","skills","skills-ai","typeui"],"latest_commit_sha":null,"homepage":"https://chromewebstore.google.com/detail/designmd-style-extractor/ogpdnchdjiibhobphelbbkemnnemkfma","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bergside.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-14T14:10:22.000Z","updated_at":"2026-05-25T18:32:20.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bergside/design-md-chrome","commit_stats":null,"previous_names":["bergside/design-md-extractor-chrome","bergside/design-md-chrome"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/bergside/design-md-chrome","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergside%2Fdesign-md-chrome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergside%2Fdesign-md-chrome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergside%2Fdesign-md-chrome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergside%2Fdesign-md-chrome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bergside","download_url":"https://codeload.github.com/bergside/design-md-chrome/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergside%2Fdesign-md-chrome/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34769611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-25T02:00:05.521Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","chrome","chrome-extension","claude","claude-design","codex","design-md","design-skills","extension","gemini","open-source","skills","skills-ai","typeui"],"created_at":"2026-06-08T12:00:31.466Z","updated_at":"2026-06-25T10:00:28.143Z","avatar_url":"https://github.com/bergside.png","language":"JavaScript","funding_links":[],"categories":["DESIGN.md by Aesthetic Family"],"sub_categories":["External catalogs"],"readme":"# TypeUI DESIGN.md Extractor (Chrome Extension)\n\nThis Chrome extension extract styles and information from any given site and generates a `DESIGN.md` or `SKILL.md` file that you can use with tools such as Google Stitch, Claude Code, Codex, and others to build websites with a given design system blueprint. The file is based on the open-source [TypeUI DESIGN.md](https://www.typeui.sh/design-md) format.\n\n\u003cimg width=\"1200\" height=\"630\" alt=\"designmdchrome\" src=\"https://github.com/user-attachments/assets/64efbebb-1c68-4ca1-8792-ca167d5e12d6\" /\u003e\n\n## Getting started\n\nLoad the extension in Chrome:\n\n1. Open `chrome://extensions`\n2. Enable **Developer mode**\n3. Click **Load unpacked**\n4. Select this project folder\n\n## Curated design skills\n\nCheck out curated design systems at [typeui.sh/design-skills](https://www.typeui.sh/design-skills).\n\n## Available actions\n\n| Action | Description |\n| --- | --- |\n| Auto-extract | Reads styles from the active tab (typography, colors, spacing, radius, shadows, motion). |\n| Generate `DESIGN.md` | Produces design-system documentation markdown from extracted signals. |\n| Generate `SKILL.md` | Produces agent-ready skill markdown from extracted signals. |\n| Refresh | Re-runs extraction for the current page state. |\n| Download | Saves generated output as `DESIGN.md` or `SKILL.md`. |\n| Explain (`?`) | Shows how the file was generated, with TypeUI reference. |\n\n## Generated file structure\n\nThe generated markdown follows this structure:\n\n| Section | What it does |\n| --- | --- |\n| `Mission` | Defines the design-system objective for the extracted site. |\n| `Brand` | Captures product/brand context, URL, audience, and product surface. |\n| `Style Foundations` | Lists inferred visual tokens and foundations. |\n| `Accessibility` | Applies WCAG 2.2 AA requirements and interaction constraints. |\n| `Writing Tone` | Sets guidance tone for implementation-ready output. |\n| `Rules: Do` | Lists required implementation practices. |\n| `Rules: Don't` | Lists anti-patterns and prohibited behavior. |\n| `Guideline Authoring Workflow` | Defines ordered guideline authoring steps. |\n| `Required Output Structure` | Enforces consistent output sections. |\n| `Component Rule Expectations` | Defines required interaction/state details. |\n| `Quality Gates` | Adds testable quality and consistency checks. |\n\n## Local development\n\nRun tests locally:\n\n```bash\nnode tests/run-tests.mjs\n```\n\n## License\n\nThis project is open-source under the MIT License.\n\n## Sponsors\n\nA huge thank you to the companies supporting our open-source work.\n\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://www.skybridge.tech/?ref=typeui.sh\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        \u003cimg src=\"https://github.com/user-attachments/assets/88c401ee-b19b-4b78-9a7e-325337dba529\" alt=\"Skybridge\" width=\"300\" /\u003e\n        \u003cbr /\u003e\u003cb\u003eSkybridge\u003c/b\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nWant to see your logo here? [Become a sponsor](https://www.typeui.sh/sponsor).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbergside%2Fdesign-md-chrome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbergside%2Fdesign-md-chrome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbergside%2Fdesign-md-chrome/lists"}