{"id":50887921,"url":"https://github.com/sidhant947/designermd","last_synced_at":"2026-06-15T18:32:49.890Z","repository":{"id":350984161,"uuid":"1209043949","full_name":"sidhant947/designermd","owner":"sidhant947","description":"Designer-md is a powerful tool to enhance AI Skills by generating a DESIGN.md for any website","archived":false,"fork":false,"pushed_at":"2026-04-13T04:57:13.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-13T05:21:51.625Z","etag":null,"topics":["ai-agents","ai-tools","claude-code","codex","design","qwen","skills"],"latest_commit_sha":null,"homepage":"https://design.siak.in","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/sidhant947.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-13T03:23:06.000Z","updated_at":"2026-04-13T04:57:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/sidhant947/designermd","commit_stats":null,"previous_names":["sidhant947/designermd"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/sidhant947/designermd","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidhant947%2Fdesignermd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidhant947%2Fdesignermd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidhant947%2Fdesignermd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidhant947%2Fdesignermd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sidhant947","download_url":"https://codeload.github.com/sidhant947/designermd/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidhant947%2Fdesignermd/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34376122,"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-15T02:00:07.085Z","response_time":63,"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-agents","ai-tools","claude-code","codex","design","qwen","skills"],"created_at":"2026-06-15T18:32:49.113Z","updated_at":"2026-06-15T18:32:49.883Z","avatar_url":"https://github.com/sidhant947.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# designermd\n\nAI-powered CLI tool that analyzes any website URL and generates a comprehensive **DESIGN.md** file with 11 standard design system sections.\n\n## Features\n\n- **Interactive terminal UI** with ASCII art banner\n- **Automatic CSS \u0026 HTML analysis** — fetches all stylesheets, inline styles, and font resources\n- **CSS framework detection** — identifies Tailwind, Bootstrap, Bulma, Chakra, Material UI, Ant Design\n- **Smart color extraction** — semantic role mapping with gradient detection, harmony analysis, and WCAG contrast scoring\n- **Typography hierarchy** — font families, weight usage, text transforms, letter-spacing, line-height scale\n- **Component style analysis** — buttons, inputs, cards, navigation, badges, modals, tooltips, dropdowns, tables, avatars, toggles\n- **Layout intelligence** — spacing scale via GCD analysis, border-radius scale, grid system detection (Flexbox vs CSS Grid)\n- **Elevation/shadow system** — shadow hierarchy, border-depth detection, glass/blur effect identification\n- **Motion analysis** — transitions, keyframe animations, duration scale, easing functions, reduced-motion support\n- **Accessibility audit** — focus indicators, skip links, ARIA landmarks, screen reader utilities, outline reset detection\n- **Design pattern detection** — layout pattern, navigation pattern, hero style, card style, component density, visual style\n- **Responsive breakpoint detection** — media queries, fluid typography (clamp), container queries, mobile-first detection\n- **Auto-generated do's and don'ts** — context-aware rules based on actual design characteristics\n- **Agent prompt guide** — ready-to-use component prompts, page templates, and design system commands for AI agents\n\n## Installation\n\n```bash\nnpm install -g designermd\n```\n\nOr install locally and link:\n\n```bash\ncd designermd\nnpm install\nnpm link\n```\n\n## Usage\n\n```bash\ndesignermd\n```\n\nYou'll be prompted to enter a website URL. The tool will:\n\n1. Fetch the website, its stylesheets, and font resources\n2. Analyze the complete design system (colors, typography, components, motion, accessibility)\n3. Generate a `DESIGN.md` file in your current working directory\n\n### Example\n\n```\n$ designermd\n\n       _           _                                     _ \n   __| | ___  ___(_) __ _ _ __   ___ _ __ _ __ ___   __| |\n  / _` |/ _ \\/ __| |/ _` | '_ \\ / _ \\ '__| '_ ` _ \\ / _` |\n | (_| |  __/\\__ \\ | (_| | | | |  __/ |  | | | | | | (_| |\n  \\__,_|\\___||___/_|\\__, |_| |_|\\___|_|  |_| |_| |_|\\__,_|\n                    |___/                                 \n  AI-powered design analyzer \u0026 DESIGN.md generator\n  Analyzes CSS, HTML, fonts, and structure\n\n? Enter website URL to analyze: https://linear.app\n\n→ Fetching https://linear.app...\n✓ Website fetched successfully\n  Found 16 stylesheet(s), 1 inline style block(s), 0 font resource(s)\n  CSS framework: Custom\n  Site title: Linear – The system for product development\n\n→ Analyzing design system...\n✓ Design analysis complete\n\n  Design Summary:\n  ─────────────────────────────────────\n  Colors:    9 semantic roles | 5 accent(s) | 0 neutral(s)\n  Typography: 7 levels | 33 font(s) | 7 weight(s)\n  Components: 3 detected\n  Layout:     CSS Grid | base unit: 4px | max-width: 640px\n  Motion:     playful | 5 transition(s) | 5 animation(s)\n  A11y:       3/4 checks passed | contrast: AAA (excellent)\n  Patterns:   layout: grid | nav: sidebar | cards: shadowed\n  Responsive: 4 breakpoints | fluid type: yes | container queries: yes\n  ─────────────────────────────────────\n\n→ Generating DESIGN.md...\n\n✓ DESIGN.md generated successfully!\n  Saved to: /your/project/DESIGN.md\n  Size: 9.3 KB | 290 lines\n```\n\n## Output: DESIGN.md Structure\n\nThe generated file contains 11 comprehensive sections:\n\n1. **Visual theme and atmosphere** — Brand philosophy, design patterns, detected components\n2. **Color palette and roles** — Semantic colors with tokens, gradients, accent colors, harmony analysis, contrast scoring\n3. **Typography rules** — Font families, code fonts, weight usage, text transforms, type scale, letter-spacing, line-heights\n4. **Component styles** — All detected components with properties and hover/focus/disabled states\n5. **Layout principles** — Spacing scale, border-radius scale, grid system, container padding, max content width\n6. **Depth and elevation** — 5-level shadow hierarchy, border-depth, glass/blur effects\n7. **Motion and animation** — Transitions, keyframe animations, durations, easing, reduced-motion support\n8. **Do's and don'ts** — Context-aware design boundaries and anti-patterns\n9. **Responsive behavior** — Breakpoints, touch targets, fluid typography, container queries, mobile-first detection\n10. **Accessibility** — Focus indicators, skip links, ARIA landmarks, screen reader utilities audit table\n11. **Agent prompt guide** — Quick palette reference, component prompts, page templates, design system commands\n\n## How It Works\n\n1. **Fetcher** — Downloads HTML, extracts all `\u003clink rel=\"stylesheet\"\u003e` URLs, inline `\u003cstyle\u003e` tags, font resources, meta tags, and detects CSS frameworks from class patterns\n2. **Analyzer** — Parses all CSS to extract colors (with semantic mapping), typography, components, layout, shadows, motion, accessibility features, and design patterns\n3. **Generator** — Formats everything into a comprehensive DESIGN.md with tables, code blocks, and actionable insights\n\n## Programmatic Usage\n\n```javascript\nconst { fetchWebsite } = require('./src/fetcher');\nconst { analyzeDesign } = require('./src/analyzer');\nconst { generateDesignMD } = require('./src/generator');\n\nconst { html, cssUrls, inlineStyles, fontUrls, meta, cssFramework, structureHints } =\n  await fetchWebsite('https://example.com');\n\nconst designData = await analyzeDesign(\n  html, cssUrls, 'https://example.com',\n  inlineStyles, meta, cssFramework, structureHints, fontUrls\n);\n\nconst markdown = generateDesignMD(designData);\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidhant947%2Fdesignermd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsidhant947%2Fdesignermd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidhant947%2Fdesignermd/lists"}