Design System Audit
D 52 completed
Other
web_app / json · small
98
Files
16,469
LOC
4
Frameworks
5
Languages
Pipeline State
completedRun ID
#392328Phase
doneProgress
1%Started
Finished
2026-04-13 01:31:02LLM tokens
0Pipeline Metadata
Stage
CatalogedDecision
proceedNovelty
58.00Framework unique
—Isolation
—Last stage change
2026-05-10 03:35:28Deduplication group #49634
Member of a group with 8 similar repo(s) — canonical #116015 view group →
Top concepts (2)
Project DescriptionWeb Frontend
Repobility · severity-and-effort ranking · https://repobility.com
AI Prompt
Create a local-first web application using Next.js and TypeScript that functions as a Design System Audit Tool. I need it to crawl multiple live product URLs using Playwright to extract design tokens (like colors, typography, spacing), UI components, and design patterns from the DOM. The core functionality must compare these extracted tokens across products and an optional parent design system, classifying differences as Inherit, Adapt, or Extend. Finally, it should generate a phased migration roadmap and allow exporting the results as JSON, CSV, PDF, or Jira/Linear ticket stubs. Please use Tailwind CSS for styling and SQLite via Drizzle ORM for data persistence.
next.js typescript tailwind-css design-system web-app playwright drizzle sqlite audit frontend
Generated by gemma4:latest
Catalog Information
A local-first web application that crawls live product URLs, extracts design tokens from the DOM, compares them across products and an optional parent design system, classifies differences as Inherit / Adapt / Extend, and generates a phased migration roadmap with exportable deliverables.
Description
A local-first web application that crawls live product URLs, extracts design tokens from the DOM, compares them across products and an optional parent design system, classifies differences as Inherit / Adapt / Extend, and generates a phased migration roadmap with exportable deliverables.
Novelty
3/10Tags
next.js typescript tailwind-css design-system web-app playwright drizzle sqlite audit frontend
Technologies
drizzle nextjs react supabase tailwind
Claude Models
claude-opus-4-6
Quality Score
D
52.1/100
Structure
52
Code Quality
75
Documentation
35
Testing
0
Practices
68
Security
75
Dependencies
60
Strengths
- Code linting configured (eslint)
- Consistent naming conventions (snake_case)
Weaknesses
- No LICENSE file \u2014 legal ambiguity for contributors
- No tests found \u2014 high risk of regressions
- No CI/CD configuration \u2014 manual testing and deployment
- 836 duplicate lines detected \u2014 consider DRY refactoring
Recommendations
- Add a test suite \u2014 start with critical path integration tests
- Set up CI/CD (GitHub Actions recommended) to automate testing and deployment
- Add a LICENSE file (MIT recommended for open source)
Security & Health
17.3h
Tech Debt (C)
A
OWASP (100%)
PASS
Quality Gate
A
Risk (2)
Repobility — the code-quality scanner for AI-generated software · https://repobility.com
Unknown
License
25.6%
Duplication
Languages
Frameworks
React Next.js Tailwind CSS Drizzle
Concepts (2)
| Category | Name | Description | Confidence | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Repobility's GitHub App fixes findings like these · https://github.com/apps/repobility-bot | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| auto_description | Project Description | A local-first web application that crawls live product URLs, extracts design tokens from the DOM, compares them across products and an optional parent design system, classifies differences as Inherit / Adapt / Extend, and generates a phased migration roadmap with exportable deliverables. | 80% | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| auto_category | Web Frontend | web-frontend | 70% | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Embed Badge
Add to your README:
