{"_id":"@alexberriman/openai-designer-feedback","_rev":"3-73b0c75cee7e530a6b1a05da6283f284","name":"@alexberriman/openai-designer-feedback","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.2":{"name":"@alexberriman/openai-designer-feedback","version":"0.1.2","keywords":["web-design","design-feedback","ux-feedback","screenshot","cli","website","capture","viewport","playwright","openai","ai-assistant","vision-api","gpt","design-review","web-analysis","design-critique","website-feedback","ui-feedback","design-assistant","web-development","developer-tools"],"author":{"name":"Alex Berriman","email":"alexberriman@users.noreply.github.com"},"license":"MIT","_id":"@alexberriman/openai-designer-feedback@0.1.2","maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"homepage":"https://github.com/alexberriman/openai-designer-feedback#readme","bugs":{"url":"https://github.com/alexberriman/openai-designer-feedback/issues"},"bin":{"design-feedback":"bin/design-feedback"},"dist":{"shasum":"4c3a0b9b7e9e669f2e124a02d6e72a6fc00db3c0","tarball":"https://registry.npmjs.org/@alexberriman/openai-designer-feedback/-/openai-designer-feedback-0.1.2.tgz","fileCount":9,"integrity":"sha512-m103VkJywcvCbpFkn3yiiSUaT5sQMnUOpg21XdR9R2+33+hsiXGTSCPN/I5Fu9svVYo8Icj/WZ3gjN1vuN0S+A==","signatures":[{"sig":"MEUCIHUthqpfhAwB6WQ0+L8Gt2qt6bcQYkIw2OMUCOJMwZlWAiEAy75DpEd7PpVQb9xur0tV6SiOK6znIV3JSPqM3W2nHtE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":197719},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"8d26b0415ab2acf96fffc0ea40b7023f74d8f0b7","scripts":{"dev":"tsx watch src/index.ts","lint":"eslint src/","test":"vitest run","build":"tsup","check":"npm run lint && npm run typecheck && npm run test","format":"prettier --write \"src/**/*.ts\"","prepack":"npm run build","prepare":"husky","release":"npm version patch && npm publish --access public && git push --follow-tags","lint:fix":"eslint src/ --fix","typecheck":"tsc --noEmit","test:watch":"vitest --watch","build:watch":"tsup --watch","lint-staged":"lint-staged","format:check":"prettier --check src/","release:major":"npm version major && npm publish --access public && git push --follow-tags","release:minor":"npm version minor && npm publish --access public && git push --follow-tags","test:coverage":"vitest --coverage","prepublishOnly":"npm run check && npm run build"},"_npmUser":{"name":"alexberriman","email":"alexb@bezz.com.au"},"repository":{"url":"git+https://github.com/alexberriman/openai-designer-feedback.git","type":"git"},"_npmVersion":"10.9.2","description":"CLI tool that captures website screenshots using @alexberriman/screenshotter and provides professional web design/UX feedback via OpenAI's gpt-image-1 vision model. Focus on identifying critical issues and design errors.","directories":{},"sideEffects":false,"_nodeVersion":"23.11.1","dependencies":{"pino":"^9.7.0","chalk":"^5.4.1","openai":"^4.100.0","commander":"^12.0.0","playwright":"^1.52.0","ts-results":"^3.3.0","@types/pino":"^7.0.4","pino-pretty":"^13.0.0","@alexberriman/screenshotter":"^0.1.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"npm@10.0.0+","devDependencies":{"tsx":"^4.7.0","tsup":"^8.5.0","husky":"^9.1.7","tslib":"^2.8.1","eslint":"^9.26.0","vitest":"^3.1.3","prettier":"^3.5.3","@eslint/js":"^9.26.0","typescript":"^5.8.3","@types/node":"^22.15.17","lint-staged":"^16.0.0","@vitest/coverage-v8":"^3.1.3","eslint-plugin-sonarjs":"^3.0.2","eslint-plugin-unicorn":"^59.0.1","eslint-config-prettier":"^10.1.5","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/openai-designer-feedback_0.1.2_1747709606352_0.20780397475512347","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@alexberriman/openai-designer-feedback","version":"0.1.3","keywords":["web-design","design-feedback","ux-feedback","screenshot","cli","website","capture","viewport","playwright","openai","ai-assistant","vision-api","gpt","design-review","web-analysis","design-critique","website-feedback","ui-feedback","design-assistant","web-development","developer-tools"],"author":{"name":"Alex Berriman","email":"alexberriman@users.noreply.github.com"},"license":"MIT","_id":"@alexberriman/openai-designer-feedback@0.1.3","maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"homepage":"https://github.com/alexberriman/openai-designer-feedback#readme","bugs":{"url":"https://github.com/alexberriman/openai-designer-feedback/issues"},"bin":{"design-feedback":"bin/design-feedback"},"dist":{"shasum":"768e9a16387229112bf16fd7a363a9e95f51edcc","tarball":"https://registry.npmjs.org/@alexberriman/openai-designer-feedback/-/openai-designer-feedback-0.1.3.tgz","fileCount":9,"integrity":"sha512-vPBduxd3h7YWKuDomSzipKdD25nZF/XBhKU9Uk2Zsm0jcSFwN3D10rXk/JxTRCcjzMdMY+ENXWrBAqe+k8DiIA==","signatures":[{"sig":"MEUCIDAKYo6MSM6ouPw7n6ESuJnedzASo5QjzajI7uqZVI4vAiEAmkigsWb3Ni5CFGXIAAHkBK4HmNt7PaY81eYGSZl9pEE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":197645},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"d5f1fa49fc8e699188d8048815283230962e804e","scripts":{"dev":"tsx watch src/index.ts","lint":"eslint src/","test":"vitest run","build":"tsup","check":"npm run lint && npm run typecheck && npm run test","format":"prettier --write \"src/**/*.ts\"","prepack":"npm run build","prepare":"husky","release":"npm version patch && npm publish --access public && git push --follow-tags","lint:fix":"eslint src/ --fix","typecheck":"tsc --noEmit","test:watch":"vitest --watch","build:watch":"tsup --watch","lint-staged":"lint-staged","format:check":"prettier --check src/","release:major":"npm version major && npm publish --access public && git push --follow-tags","release:minor":"npm version minor && npm publish --access public && git push --follow-tags","test:coverage":"vitest --coverage","prepublishOnly":"npm run check && npm run build"},"_npmUser":{"name":"alexberriman","email":"alexb@bezz.com.au"},"repository":{"url":"git+https://github.com/alexberriman/openai-designer-feedback.git","type":"git"},"_npmVersion":"10.9.2","description":"CLI tool that captures website screenshots using @alexberriman/screenshotter and provides professional web design/UX feedback via OpenAI's gpt-image-1 vision model. Focus on identifying critical issues and design errors.","directories":{},"sideEffects":false,"_nodeVersion":"23.11.1","dependencies":{"pino":"^9.7.0","chalk":"^5.4.1","openai":"^4.100.0","commander":"^12.0.0","playwright":"^1.52.0","ts-results":"^3.3.0","@types/pino":"^7.0.4","pino-pretty":"^13.0.0","@alexberriman/screenshotter":"^0.1.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"npm@10.0.0+","devDependencies":{"tsx":"^4.7.0","tsup":"^8.5.0","husky":"^9.1.7","tslib":"^2.8.1","eslint":"^9.26.0","vitest":"^3.1.3","prettier":"^3.5.3","@eslint/js":"^9.26.0","typescript":"^5.8.3","@types/node":"^22.15.17","lint-staged":"^16.0.0","@vitest/coverage-v8":"^3.1.3","eslint-plugin-sonarjs":"^3.0.2","eslint-plugin-unicorn":"^59.0.1","eslint-config-prettier":"^10.1.5","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/openai-designer-feedback_0.1.3_1747710058079_0.8736128452592244","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@alexberriman/openai-designer-feedback","version":"0.1.4","description":"CLI tool that captures website screenshots using @alexberriman/screenshotter and provides professional web design/UX feedback via OpenAI's gpt-image-1 vision model. Focus on identifying critical issues and design errors.","type":"module","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"main":"./dist/index.js","types":"./dist/index.d.ts","bin":{"design-feedback":"bin/design-feedback"},"engines":{"node":">=18.0.0"},"packageManager":"npm@10.0.0+","scripts":{"dev":"tsx watch src/index.ts","build":"tsup","build:watch":"tsup --watch","test":"vitest run","test:watch":"vitest --watch","test:coverage":"vitest --coverage","prepare":"husky","lint":"eslint src/","lint:fix":"eslint src/ --fix","format":"prettier --write \"src/**/*.ts\"","format:check":"prettier --check src/","typecheck":"tsc --noEmit","check":"npm run lint && npm run typecheck && npm run test","lint-staged":"lint-staged","prepublishOnly":"npm run check && npm run build","prepack":"npm run build","release":"npm version patch && npm publish --access public && git push --follow-tags","release:minor":"npm version minor && npm publish --access public && git push --follow-tags","release:major":"npm version major && npm publish --access public && git push --follow-tags"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"repository":{"type":"git","url":"git+https://github.com/alexberriman/openai-designer-feedback.git"},"author":{"name":"Alex Berriman","email":"alexberriman@users.noreply.github.com"},"license":"MIT","bugs":{"url":"https://github.com/alexberriman/openai-designer-feedback/issues"},"homepage":"https://github.com/alexberriman/openai-designer-feedback#readme","dependencies":{"@alexberriman/screenshotter":"^0.1.1","@types/pino":"^7.0.4","chalk":"^5.4.1","commander":"^12.0.0","openai":"^4.100.0","pino":"^9.7.0","pino-pretty":"^13.0.0","playwright":"^1.52.0","ts-results":"^3.3.0"},"devDependencies":{"@eslint/js":"^9.26.0","@types/node":"^22.15.17","@typescript-eslint/eslint-plugin":"^8.32.1","@typescript-eslint/parser":"^8.32.1","@vitest/coverage-v8":"^3.1.3","eslint":"^9.26.0","eslint-config-prettier":"^10.1.5","eslint-plugin-sonarjs":"^3.0.2","eslint-plugin-unicorn":"^59.0.1","husky":"^9.1.7","lint-staged":"^16.0.0","prettier":"^3.5.3","tslib":"^2.8.1","tsup":"^8.5.0","tsx":"^4.7.0","typescript":"^5.8.3","vitest":"^3.1.3"},"sideEffects":false,"keywords":["web-design","design-feedback","ux-feedback","screenshot","cli","website","capture","viewport","playwright","openai","ai-assistant","vision-api","gpt","design-review","web-analysis","design-critique","website-feedback","ui-feedback","design-assistant","web-development","developer-tools"],"_id":"@alexberriman/openai-designer-feedback@0.1.4","gitHead":"6621d0abaf8329b7a2e3d2a70154949cb7950f27","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-DFO0TegT85usM0rsRFqhLW12+xLMy6xrumFPGFqZLRoimF2jSgNFWA55++KPichAbvQZVwFU1xgO0VD71KGM/w==","shasum":"4a57eea8aca2759dd666e4d720f43a283513b109","tarball":"https://registry.npmjs.org/@alexberriman/openai-designer-feedback/-/openai-designer-feedback-0.1.4.tgz","fileCount":9,"unpackedSize":197830,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDYzninyzlgNiWo2GHeWSMyuAmze9Ma8sjynqXywBPNCgIhAO5W602QYtZnQhHfy80/EpT/1eAzcBG2sCxWh/tnXhy8"}]},"_npmUser":{"name":"alexberriman","email":"alexb@bezz.com.au"},"directories":{},"maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/openai-designer-feedback_0.1.4_1747710758197_0.2833640745459769"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-20T02:53:26.235Z","modified":"2025-05-20T03:12:38.578Z","0.1.2":"2025-05-20T02:53:26.548Z","0.1.3":"2025-05-20T03:00:58.355Z","0.1.4":"2025-05-20T03:12:38.410Z"},"bugs":{"url":"https://github.com/alexberriman/openai-designer-feedback/issues"},"author":{"name":"Alex Berriman","email":"alexberriman@users.noreply.github.com"},"license":"MIT","homepage":"https://github.com/alexberriman/openai-designer-feedback#readme","keywords":["web-design","design-feedback","ux-feedback","screenshot","cli","website","capture","viewport","playwright","openai","ai-assistant","vision-api","gpt","design-review","web-analysis","design-critique","website-feedback","ui-feedback","design-assistant","web-development","developer-tools"],"repository":{"type":"git","url":"git+https://github.com/alexberriman/openai-designer-feedback.git"},"description":"CLI tool that captures website screenshots using @alexberriman/screenshotter and provides professional web design/UX feedback via OpenAI's gpt-image-1 vision model. Focus on identifying critical issues and design errors.","maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"readme":"# Design Feedback CLI\n\n[![CI](https://github.com/alexberriman/openai-designer-feedback/actions/workflows/ci.yml/badge.svg)](https://github.com/alexberriman/openai-designer-feedback/actions/workflows/ci.yml)\n\nA powerful CLI tool that captures screenshots of websites and provides professional web design/UX feedback using AI vision analysis. Perfect for quickly identifying critical design issues, errors, and UX problems in web applications.\n\n## Features\n\n- šŸ–¼ļø Automated website screenshot capture using [@alexberriman/screenshotter](https://github.com/alexberriman/screenshotter)\n- šŸ¤– AI-powered design analysis using OpenAI's GPT vision models\n- šŸ“± Support for multiple viewport sizes (mobile, tablet, desktop, custom)\n- šŸŽØ Actionable feedback focused on critical issues and errors\n- šŸ“Š Multiple output formats (text and JSON)\n- āš” Fast and efficient with TypeScript/Bun runtime\n- šŸ”‘ Secure API key management\n\n## Installation\n\n### Using npx (Recommended)\n\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com\n```\n\n### Using npm\n\n```bash\nnpm install -g @alexberriman/openai-designer-feedback\n```\n\n### Using Bun\n\n```bash\nbun install -g @alexberriman/openai-designer-feedback\n```\n\n### From Source\n\n```bash\n# Clone the repository\ngit clone https://github.com/alexberriman/openai-designer-feedback.git\ncd openai-designer-feedback\n\n# Install dependencies\nbun install\n\n# Build and link globally\nbun run build\nbun link\n```\n\n## Configuration\n\n### API Key Setup\n\nThe tool requires an OpenAI API key to analyze screenshots. Set it up in one of three ways:\n\n1. **Environment Variable** (Recommended)\n ```bash\n export OPENAI_API_KEY=\"your-api-key-here\"\n ```\n\n2. **Config File**\n Create `~/.design-feedback/config.json`:\n ```json\n {\n \"apiKey\": \"your-api-key-here\"\n }\n ```\n\n3. **Command Line Option**\n ```bash\n npx @alexberriman/openai-designer-feedback https://example.com --api-key \"your-api-key-here\"\n ```\n\nIf no API key is configured, the tool will prompt you to enter one interactively.\n\n## Usage\n\n### Basic Usage\n\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com\n```\n\n### Command Options\n\n```bash\nnpx @alexberriman/design-feedback [options] \n\nOptions:\n -v, --viewport Viewport size (mobile/tablet/desktop/WIDTHxHEIGHT) (default: \"desktop\")\n -o, --output Save screenshot to specified path\n -f, --format Output format (json/text) (default: \"text\")\n -s, --save Save analysis output to file instead of console\n -w, --wait Wait time before screenshot (seconds)\n --wait-for Wait for specific CSS selector\n --full-page Capture full page (default: true)\n --no-full-page Capture viewport only\n --quality JPEG quality (0-100) (default: 90)\n --api-key Override default OpenAI API key\n --verbose Enable debug logging\n -h, --help Display help for command\n```\n\n### Usage Examples\n\n#### Basic Website Analysis\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com\n```\n\n#### Mobile Viewport Analysis\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com --viewport mobile\n```\n\n#### Custom Viewport Size\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com --viewport 1024x768\n```\n\n#### Save Screenshot with JSON Output\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com --output screenshot.png --format json\n```\n\n#### Wait for Dynamic Content\n```bash\nnpx @alexberriman/design-feedback https://spa-app.com --wait-for \".content-loaded\" --wait 3\n```\n\n#### Save Analysis to File (Redirection)\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com --format json > analysis.json\n```\n\n#### Save Analysis to File (Direct)\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com --format json --save analysis.json\n```\n\n## Output Formats\n\n### Text Format (Default)\n\nThe text format provides a human-readable analysis with color-coded output:\n\n```\nšŸ” Design Feedback for https://example.com\n\nšŸ“± Viewport: desktop (1920x1080)\nšŸ• Analyzed at: 2024-01-15 10:30:00\n\nCritical Issues:\nā€¢ Navigation menu overlaps content on mobile devices\nā€¢ Button text is not readable due to poor contrast ratio\nā€¢ Form validation errors are not properly displayed\nā€¢ Hero image takes too long to load (5.2s)\n\nAccessibility Concerns:\nā€¢ Missing alt text on several images\nā€¢ Form inputs lack proper labels\nā€¢ Color contrast fails WCAG AA standards\n\nPerformance Issues:\nā€¢ Large unoptimized images (3.5MB total)\nā€¢ No lazy loading implemented\nā€¢ Missing viewport meta tag\n```\n\n### JSON Format\n\nThe JSON format provides structured data for programmatic use:\n\n```json\n{\n \"url\": \"https://example.com\",\n \"viewport\": \"desktop\",\n \"timestamp\": \"2024-01-15T10:30:00.000Z\",\n \"model\": \"gpt-4.1-2025-04-14\",\n \"analysisTime\": 1500,\n \"screenshotPath\": \"./screenshot.png\",\n \"pageDescription\": \"A modern e-commerce website with a clean layout featuring product categories, featured items, and a navigation menu.\",\n \"summary\": \"Several layout issues need to be addressed for optimal user experience.\",\n \"issues\": [\n {\n \"severity\": \"critical\",\n \"category\": \"Layout\",\n \"description\": \"Navigation menu overlaps content on mobile devices\"\n },\n {\n \"severity\": \"major\",\n \"category\": \"Responsiveness\",\n \"description\": \"Hero image does not resize properly on smaller screens\"\n },\n {\n \"severity\": \"minor\",\n \"category\": \"Content\",\n \"description\": \"Product card spacing is inconsistent\"\n }\n ],\n \"metadata\": {\n \"version\": \"0.1.0\",\n \"cli\": \"@alexberriman/openai-designer-feedback\"\n }\n}\n```\n\n## Examples\n\n### Analyze a Production Website\n```bash\nnpx @alexberriman/design-feedback https://mycompany.com --viewport mobile --format json > mobile-audit.json\n```\n\n### Check Responsive Design\n```bash\n# Check mobile view\nnpx @alexberriman/design-feedback https://mysite.com --viewport mobile --output mobile.png\n\n# Check tablet view\nnpx @alexberriman/design-feedback https://mysite.com --viewport tablet --output tablet.png\n\n# Check desktop view\nnpx @alexberriman/design-feedback https://mysite.com --viewport desktop --output desktop.png\n```\n\n### SPA with Dynamic Content\n```bash\nnpx @alexberriman/design-feedback https://spa-app.com \\\n --wait-for \"[data-loaded='true']\" \\\n --wait 5 \\\n --no-full-page\n```\n\n### CI/CD Integration\n```bash\n# In your CI pipeline\nnpx @alexberriman/design-feedback $PREVIEW_URL --format json --save design-review.json\n\n# Check for critical issues\nif grep -q '\"severity\": \"critical\"' design-review.json; then\n echo \"Critical design issues found!\"\n exit 1\nfi\n```\n\n## Troubleshooting\n\n### Common Issues\n\n1. **\"API key not found\" error**\n - Ensure your API key is properly configured\n - Check environment variables with `echo $OPENAI_API_KEY`\n - Verify config file exists at `~/.design-feedback/config.json`\n\n2. **\"Screenshot failed\" error**\n - Verify the URL is accessible\n - Check your internet connection\n - Try increasing wait time with `--wait` option\n\n3. **\"Analysis timeout\" error**\n - OpenAI API might be slow; try again\n - Check your API key has sufficient credits\n - Use `--verbose` for detailed error logs\n\n### Debug Mode\n\nEnable verbose logging for troubleshooting:\n\n```bash\nnpx @alexberriman/openai-designer-feedback https://example.com --verbose\n```\n\nThis will show:\n- Screenshot capture progress\n- API request details\n- Error stack traces\n- Performance timing\n\n## Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n```bash\n# Development setup\ngit clone https://github.com/alexberriman/openai-designer-feedback.git\ncd openai-designer-feedback\nbun install\nbun test\n```\n\nFor local testing during development:\n```bash\n# Run the local build directly\nnpm run build\n./bin/design-feedback https://example.com\n```\n\n## License\n\nMIT Ā© [Alex Berriman](https://github.com/alexberriman)\n\n## Support\n\n- šŸ“§ Email: alex@berriman.dev\n- šŸ› Issues: [GitHub Issues](https://github.com/alexberriman/openai-designer-feedback/issues)\n- šŸ’¬ Discussions: [GitHub Discussions](https://github.com/alexberriman/openai-designer-feedback/discussions)\n\n## Acknowledgments\n\nBuilt with:\n- [Bun](https://bun.sh/) - Fast JavaScript runtime\n- [@alexberriman/screenshotter](https://github.com/alexberriman/screenshotter) - Screenshot capture\n- [OpenAI](https://openai.com/) - AI vision analysis\n- [Commander.js](https://github.com/tj/commander.js/) - CLI framework\n- [ts-results](https://github.com/vultix/ts-results) - Functional error handling","readmeFilename":"README.md"}