[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81102":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":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":38,"readmeContent":39,"aiSummary":40,"trendingCount":15,"starSnapshotCount":15,"syncStatus":41,"lastSyncTime":42,"discoverSource":43},81102,"designpull","hasi98\u002Fdesignpull","hasi98","Generate Google Stitch compatible DESIGN.md files from any website using AI vision. Bring your own Gemini, OpenAI, Claude, or Ollama key. No backend, no cost.","",null,"JavaScript",41,12,40,0,1,3.34,"MIT License",false,"main",true,[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"ai-design","bring-your-own-key","chrome-extension","claude","css-extraction","design-md","design-system","design-tokens","developer-tools","frontend","gemini","google-stitch","ollama","open-source","openai","2026-06-12 02:04:10","# Designpull\n\n> Generate Google Stitch compatible `DESIGN.md` files from any website - bring your own Gemini, OpenAI, Claude, or Ollama key.\n\n![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg)\n![Platform](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fplatform-Chrome-yellow.svg)\n![Status](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fstatus-active-brightgreen.svg)\n\n---\n\n## What is this?\n\n**designpull** is an open source Chrome extension that visits any website, extracts its full design system, and generates a `DESIGN.md` file using AI vision — not just CSS token dumps.\n\nMost existing tools do rule-based CSS extraction. designpull sends a full-page screenshot + extracted tokens to your AI of choice, so the output includes real design intent: layout patterns, photography style, brand voice, platform detection, and Do's & Don'ts specific to that site.\n\nThe output format follows the **Google Stitch DESIGN.md open specification** (Apache 2.0), making it compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, Google Stitch, and any other AI coding agent that reads markdown.\n\n\u003Cimg width=\"420\" height=\"111\" alt=\"ffdr7n5wuD\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fa185d333-0641-4a83-a210-295dfd66bf3e\" \u002F>\u003Cimg width=\"420\" height=\"404\" alt=\"mj2A5Hr60S\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fb1e0097a-6b25-4eb2-b83c-5251bc331671\" \u002F>\u003Cimg width=\"420\" height=\"522\" alt=\"c6k9jeY6p3\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fd9ffc18a-fb91-4571-b4e2-6bc3bf918886\" \u002F>\n\n\n\n\n---\n\n## Features\n\n- **Full page scroll capture** — scrolls the entire page, stitches screenshots, sends it all to the AI\n- **Current View mode** — skip the scroll loop and capture only what's visible in the viewport\n- **AI vision + CSS tokens** — combines computed styles with visual analysis for accurate results\n- **Multi-provider support** — Gemini, OpenAI, Claude, or Ollama (local, free)\n- **Bring your own API key** — keys stay in your browser, never leave your machine\n- **Model picker** — lists available models from your provider after entering your key\n- **Platform detection** — detects Squarespace, Webflow, Shopify etc and flags internal CSS variables\n- **Generation history** — saves the last 20 generated `design.md` files with page title, URL, and date; click any entry to restore it\n- **Google Stitch spec compatible** — output follows the official open DESIGN.md specification\n- **Copy & download** — one click to copy or save the generated file\n- **Zero backend** — no server, no cost to run, no account needed\n\n---\n\n## What it generates\n\nA `DESIGN.md` with these sections:\n\n1. **Overview** — aesthetic, platform, visual style, target audience\n2. **Colors** — semantic roles based on actual visual usage, not token frequency\n3. **Typography** — font families, size scale, weights, casing\n4. **Spacing & Layout** — dominant layout pattern, grid, spacing scale\n5. **Photography & Visual Style** — imagery usage, photographic style, emotional role\n6. **Elevation & Shadows** — only what's visually present\n7. **Border & Shape** — radius values, dominant shape language\n8. **Components** — only components visible in the page\n9. **Content Structure Pattern** — prose-driven vs card-driven, section flow\n10. **Brand Voice** — specific to the site, with evidence from real copy\n11. **Brand Assets & Key Concepts** — coined phrases, named products, content philosophy\n12. **Do's and Don'ts** — specific to this brand, not generic advice\n\n---\n\n## Supported AI Providers\n\n| Provider | Free Tier | Model Examples |\n|---|---|---|\n| Gemini | ✅ Yes (15 req\u002Fmin) | gemini-2.0-flash, gemini-1.5-pro |\n| OpenAI | ❌ Paid | gpt-4o, gpt-4-turbo |\n| Claude | ❌ Paid | claude-sonnet-4-6, claude-haiku-4-5 |\n| Ollama | ✅ Free (local) | llama3, mistral, any pulled model |\n\n> **Recommended for free usage:** Gemini 2.5 Flash — fast, supports vision, generous free tier.\n\n---\n\n## Installation\n\nThis is an open source project. Load it as an unpacked extension:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fhasi98\u002Fdesignpull\ncd designpull\n```\n\nThen in Chrome:\n\n1. Go to `chrome:\u002F\u002Fextensions`\n2. Enable **Developer mode** (top right toggle)\n3. Click **Load unpacked**\n4. Select the `designpull` folder\n\n---\n\n## Usage\n\n1. Visit any website\n2. Click the **designpull** icon in your toolbar\n3. On first use, go to ⚙️ Settings:\n   - Select your AI provider\n   - Enter your API key\n   - Click **Load Models** to populate the model dropdown\n   - Select your preferred model\n   - Choose **Capture Mode**: *Full Page* (default) or *Current View*\n   - Save\n4. Click **Extract & Generate**\n5. Wait 10–30 seconds while it captures and generates\n6. Copy or download your `DESIGN.md`\n7. Access previous results anytime via the 🕐 **History** button\n\n---\n\n## Getting API Keys\n\n**Gemini (free tier available)**\n→ https:\u002F\u002Faistudio.google.com\u002Fapp\u002Fapikey\n\n**OpenAI**\n→ https:\u002F\u002Fplatform.openai.com\u002Fapi-keys\n\n**Claude (Anthropic)**\n→ https:\u002F\u002Fconsole.anthropic.com\u002Fsettings\u002Fkeys\n\n**Ollama (free, runs locally)**\n→ https:\u002F\u002Follama.com\u002Fdownload\nAfter installing, run: `ollama pull llama3`\nThe extension will connect to `http:\u002F\u002Flocalhost:11434` automatically.\n\n---\n\n## File Structure\n\n```\ndesignpull\u002F\n├── manifest.json           # Chrome MV3 config\n├── popup.html              # Extension popup UI\n├── popup.css               # Popup styles\n├── popup.js                # Popup logic\n├── content.js              # Injected into page — extracts CSS tokens\n├── background.js           # Service worker — scroll capture + API calls\n└── lib\u002F\n    ├── adapter.js          # Multi-provider AI adapter layer\n    └── extractor.js        # DOM\u002FCSS extraction logic\n```\n\n---\n\n## How it works\n\n```\n1. User clicks Extract & Generate\n2. Capture Mode is read from storage\n3. extractor.js injected into the active tab\n   - In Full Page mode: samples all DOM elements (up to 150)\n   - In Current View mode: filters to elements visible in the viewport only\n4. Screenshot captured:\n   - Full Page: background.js scrolls and stitches up to 10 viewport-height strips\n   - Current View: single captureVisibleTab() call, no scrolling\n5. Full-page image resized to max 2000px longest dimension\n6. Tokens + screenshot sent to selected AI provider\n7. AI generates DESIGN.md using the refined prompt\n8. Output streams back into the popup\n9. Completed result is auto-saved to History (last 20 entries)\n10. User copies, downloads, or revisits via History\n```\n\n---\n\n## Why AI instead of just CSS parsing?\n\nPure CSS extraction misses:\n- Full-bleed image layout patterns\n- Brand accent color (frequency ≠ visual importance)\n- Navigation casing and style\n- Photography style and emotional role\n- Platform internals (Squarespace, Webflow variables)\n- Brand voice, coined concepts, content philosophy\n- Do's and Don'ts specific to this brand\n\ndesignpull combines both — exact token values from CSS, real design intent from AI vision.\n\n---\n\n## DESIGN.md Specification\n\nThis project outputs files compatible with the **Google Stitch DESIGN.md open specification**, released under Apache 2.0 in April 2026.\n\nLearn more: https:\u002F\u002Fstitch.withgoogle.com\u002Fdocs\u002Fdesign-md\u002Foverview\n\n---\n\n## Contributing\n\nContributions welcome. Please open an issue first to discuss before submitting a PR.\n\nThings that would be great contributions:\n- Support for additional AI providers\n- Firefox extension port\n- Improved scroll capture for infinite scroll pages\n- Better token extraction for CSS-in-JS sites (styled-components, emotion)\n- Output format options (JSON tokens, Tailwind config, CSS variables)\n\n---\n\n## License\n\nMIT — see [LICENSE](.\u002FLICENSE)\n\n---\n\n## Acknowledgements\n\n- Google Stitch for open-sourcing the DESIGN.md specification\n- The open source tools that came before: Dembrandt, design-extract, design-md-chrome\n","Designpull 是一个开源的 Chrome 扩展程序，能够从任何网站自动生成符合 Google Stitch 规范的 `DESIGN.md` 文件。它利用 AI 视觉技术，结合全页面滚动截图和 CSS 令牌提取，生成包含布局模式、摄影风格、品牌声音等真实设计意图的内容，而不仅仅是简单的 CSS 令牌导出。支持 Gemini、OpenAI、Claude 或 Ollama 等多种 AI 提供商，并允许用户自带 API 密钥，密钥仅保存在本地浏览器中，确保数据安全。此外，该工具还具备平台检测、生成历史记录保存等功能，且完全无需后端支持，运行成本为零。适用于需要快速提取和理解网站设计系统的前端开发者或设计团队。",2,"2026-06-11 04:03:30","CREATED_QUERY"]