Understand an existing interface
Reveal the patterns behind colors, type, spacing, layout, components, and responsive behavior.
Independent product · AI-assisted development
Turning visual exploration into structured design-system evidence.
I designed and built a working product that analyzes live websites, identifies recurring interface patterns, and converts them into reusable foundations for designers and developers.
A working product that moves from one URL to an evidence-based design-system report.
01
Problem discovery
Useful design research was disappearing into manual notes.
Designers regularly inspect other products to understand containers, spacing, typography, colors, components, and responsive patterns. The same manual work appears when creating client systems or auditing an existing product.
The observations are valuable, but they are difficult to organize, compare, and translate into reusable foundations. Existing systems also become inconsistent and outdated, turning every audit into another manual documentation exercise.
What if an interface could be analyzed for us, turning visual exploration into structured design-system evidence?
Start a system with evidence
Give designers and developers a structured foundation they can verify and refine.
Expose inconsistency
Find recurring rules, gaps, one-off values, and areas that require human judgment.
02
Product method
A system of evidence, not a system of assumptions.
The product preserves a clear distinction between what was observed in the interface and what was inferred or normalized. That makes the output useful without pretending automated analysis can replace design judgment.
- 01
Collect
Read rendered colors, typography, spacing, layout, radii, shadows, breakpoints, components, and states.
- 02
Analyze
Compare representative pages to identify recurring patterns, relationships, and inconsistencies.
- 03
Structure
Organize observations into primitives, semantic roles, component tokens, and themes.
- 04
Curate
Separate observed values from inferred, merged, or normalized decisions.
- 05
Export
Generate usable formats for Figma and development workflows.
03
Experience and system
One simple action opens a complex but navigable report.
The product begins with one field. Complexity is introduced progressively through live analysis feedback and a report organized around the questions designers are likely to ask next.
- 1Enter a URLOne clear starting action
- 2Follow analysisLive page-by-page progress
- 3Explore evidenceMetrics, specimens and relationships
- 4Export the systemDesign and code formats
Overview and confidence
Pages crawled, analysis mode, findings, duration, and crawl-quality signals.
Colors and relationships
Semantic roles, frequency, usage, state connections, gradients, and copyable values.
Type, spacing and structure
Font families, hierarchy, sizes, line heights, grids, scales, radii, shadows, and layout patterns.
Components and exports
Detected patterns and states, Tokens Studio JSON, W3C DTCG JSON, and CSS variables.
Token architecture
Global primitivesObserved raw values→Semantic rolesPurpose and meaning→ComponentsPatterns and states→ThemesLight and dark modes
04
Product decisions
Automation with visible limits and room for judgment.
The product is designed as a starting point for a designer—not an authoritative replacement for one.
Observed values win
Fallback roles are marked so inferred completeness is never confused with evidence from the site.
Frequency is only one signal
Page coverage and component usage help distinguish systemic patterns from one-off values.
Degrade honestly
Blocked headless crawls fall back to static analysis while the report communicates reduced confidence.
Continue outside the product
Exports connect the report to Figma and development workflows instead of trapping the result in a dashboard.
05
AI collaboration and iteration
AI accelerated implementation. Product judgment stayed human.
I used AI as an implementation and exploration partner while retaining ownership of the problem, experience architecture, design-system logic, priorities, testing criteria, and final decisions. The repository credits Claude on implementation commits and records Vercel Agent contributions separately.
My ownership
- Problem and hypothesis
- Product principles and experience architecture
- Design-system logic and information hierarchy
- Prioritization, critique and acceptance criteria
- Final product and deployment decisions
AI contribution
- Implementation support
- Code generation and refinement
- Technical exploration
- Documentation support
- Deployment and analytics assistance
Created the extraction pipeline
Multi-page crawl, rendered-style collection, relevance scoring, token generation, progress streaming, report and exports.
Removed competing entry points
A live product review exposed two different landing experiences and leftover placeholder content. The product was consolidated around one clear journey.
Fixed real deployment behavior
Browser crawling, runtime limits, bot challenges, fallback behavior, semantic naming, and confidence reporting were refined through production checks.
Added tests and feedback infrastructure
Synthetic relevance tests, full-pipeline smoke tests, analytics, and a focused five-question early-tester survey created a foundation for continued learning.
06
Outcome and learning
A working product, not a speculative design exercise.
Basic Designs shipped as a functioning tool capable of converting a public website into a layered design-token package. It demonstrates product discovery, information architecture, design systems, technical implementation, AI collaboration, testing, and delivery in one connected project.
Pages per analysis
Representative same-domain crawling.
UI export formats
Tokens Studio, W3C DTCG and CSS variables.
Shipped product
Live, testable, documented and instrumented.
Honest limitations
- Frequency does not always represent design intent.
- Only styles present in crawled pages can be observed.
- Blocked websites can reduce analysis quality.
- Semantic naming still requires human verification.
- The output is a design-system foundation, not a finished system.