[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-689":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":40,"readmeContent":41,"aiSummary":42,"trendingCount":15,"starSnapshotCount":15,"syncStatus":43,"lastSyncTime":44,"discoverSource":45},689,"design-md-chrome","bergside\u002Fdesign-md-chrome","bergside","Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI","https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fdesignmd-style-extractor\u002Fogpdnchdjiibhobphelbbkemnnemkfma",null,"JavaScript",2190,261,11,0,25,71,277,75,29.25,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39],"ai","chrome","chrome-extension","claude","claude-design","codex","design-md","design-skills","extension","gemini","open-source","skills","skills-ai","typeui","2026-06-12 02:00:17","# 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:\u002F\u002Fwww.typeui.sh\u002Fdesign-md) format.\n\n\u003Cimg width=\"1200\" height=\"630\" alt=\"designmdchrome\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F64efbebb-1c68-4ca1-8792-ca167d5e12d6\" \u002F>\n\n## Getting started\n\nLoad the extension in Chrome:\n\n1. Open `chrome:\u002F\u002Fextensions`\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\u002Fdesign-skills](https:\u002F\u002Fwww.typeui.sh\u002Fdesign-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\u002Fbrand 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\u002Fstate details. |\n| `Quality Gates` | Adds testable quality and consistency checks. |\n\n## Local development\n\nRun tests locally:\n\n```bash\nnode tests\u002Frun-tests.mjs\n```\n\n## License\n\nThis project is open-source under the MIT License.\n","TypeUI DESIGN.md Extractor 是一款 Chrome 扩展程序，用于从任意网站提取样式和信息，并生成基于 TypeUI 格式的 `DESIGN.md` 或 `SKILL.md` 文件。该扩展的核心功能包括自动提取网页中的字体、颜色、间距等设计元素，并将这些信息转化为结构化的文档，便于与 Google Stitch、Claude Code 等工具集成使用。此外，它还支持生成面向 AI 的技能文件，以辅助自动化设计流程。适用于需要快速获取并标准化网站设计规范的场景，如前端开发、UI\u002FUX 设计及人工智能辅助设计项目。",2,"2026-06-11 02:38:39","CREATED_QUERY"]