u/hiehie
▲ 2 r/ClaudeAI
Using DESIGN.md files as frontend context for Claude Code workflows
Been experimenting heavily with Claude Code workflows recently and realized something:
The biggest issue usually isn’t model capability.
It’s frontend context.
AI tools are good at generating components, but they rarely understand:
- typography systems
- spacing rhythm
- interaction behavior
- responsive structure
- production design consistency
So I built DesignMD.
It analyzes live websites and generates structured DESIGN.md specs that can be fed into Claude Code as persistent frontend context.
Recently shipped a CLI too:
npx u/designmdcc/cli stripe.com > DESIGN.md
Current workflow is usually:
- Generate DESIGN.md from a real production site
- Feed it into Claude Code
- Use it as design-system context for implementation
Works surprisingly well for:
- frontend consistency
- landing pages
- UI recreation
- design-system exploration
Still very early, but curious whether others here are experimenting with similar context-driven workflows.
u/hiehie — 1 day ago
▲ 1 r/AIToolsAndTips
This tool breaks down how websites are designed internally
Built a small tool that analyzes websites/screenshots and turns them into structured design-system style docs.
It tries to extract things like:
- spacing patterns
- typography systems
- layout structure
- component reuse
- responsive behavior
- UI hierarchy
Started as an experiment while working on browser-agent workflows and ended up becoming surprisingly interesting for studying how products structure their frontend systems internally.
Still improving it every day, but already fun to test on different websites.
u/hiehie — 4 days ago
This tool analyzes websites and extracts their UI systems
Built a small tool that analyzes websites/screenshots and turns them into structured design system style docs.
It tries to extract things like:
- layout structure
- spacing patterns
- typography hierarchy
- component reuse
- interaction behavior
- responsive patterns
Started as an experiment while working on browser-agent style workflows where screenshots alone weren’t enough.
Still improving it every day, but it’s already pretty interesting seeing how different websites are structured internally.
Would love feedback from people here.
(Will share the link in comments if allowed.)
u/hiehie — 6 days ago
▲ 0 r/reactjs
Built a React-focused UI analysis tool that extracts design systems from websites
Been building a small experiment around turning websites/screenshots into structured design system documentation.
The main idea was:
screenshots alone don’t carry enough information for deeper UI understanding.
So the tool tries to combine:
- visual hierarchy
- DOM structure
- CSS behavior
- spacing systems
- typography scales
- reusable component patterns
A lot of the inspiration came from working around React/frontend workflows where understanding component relationships matters more than just pixels.
Still very early and continuously improving, but I’d genuinely love feedback from React/frontend folks here:
What would actually make this useful in real-world workflows?
u/hiehie — 6 days ago
▲ 9 r/Frontend
Exploring DOM + visual analysis for frontend audits
I’ve been building a small experiment around analyzing websites/screenshots and converting them into structured design system style docs.
Instead of only looking at pixels, it tries to combine:
- visual hierarchy
- DOM inspection
- CSS behavior
- spacing systems
- typography patterns
- component structure
Originally started this while experimenting with browser agents and frontend audits because screenshots alone felt too limiting.
Still improving it daily, but I’d really value feedback from frontend engineers/design engineers here:
What parts would actually be useful?
What feels unnecessary?
here you go - https://designmd.adityaraj.info
u/hiehie — 6 days ago
▲ 0 r/DesignDesign
I built a tool for extracting UI structure/design systems from websites
Been experimenting with a tool that converts websites into structured design documentation.
The interesting part ended up being less about the screenshots themselves and more about extracting the underlying system:
- layout structure
- spacing patterns
- typography scales
- component reuse
- interaction behavior
- DOM/CSS relationships
Started building it while working on browser-agent style workflows where screenshots alone weren’t reliable enough.
Still very early, but I’d genuinely love feedback from frontend developers here:
What would make something like this actually useful in real workflows?
Check out - https://www.producthunt.com/products/designmd-2
u/hiehie — 6 days ago
▲ 6 r/FlutterDev
I built a tool for extracting UI structure/design systems from websites
Been experimenting with a tool that converts websites into structured design documentation.
The interesting part ended up being less about the screenshots themselves and more about extracting the underlying system:
- layout structure
- spacing patterns
- typography scales
- component reuse
- interaction behavior
- DOM/CSS relationships
Started building it while working on browser-agent style workflows where screenshots alone weren’t reliable enough.
Still very early, but I’d genuinely love feedback from frontend developers here:
What would make something like this actually useful in real workflows?
here you go - https://designmd.adityaraj.info
u/hiehie — 6 days ago
▲ 3 r/DesignSystems
Need feedback on an experiment around frontend/design-system analysis
Been experimenting with a system that analyzes live websites and extracts frontend/design-system patterns directly from production implementations.
Currently exploring things like:
- typography systems
- spacing scales
- CSS variables
- responsive breakpoints
- interaction states
- motion behavior
Tested against products like Stripe, Apple, GitHub, Linear, Airbnb, and Vercel.
Still refining the extraction quality and figuring out what’s genuinely useful vs noisy, so I’d really value feedback from frontend engineers, UX designers, or anyone working with design systems.
Recently launched it here:
https://www.producthunt.com/products/designmd-2?launch=designmd-2
u/hiehie — 7 days ago
▲ 12 r/UI_Design
I got tired of manually inspecting websites, so I began automating design system extraction
Whenever I found a beautifully designed product, I kept opening DevTools to understand things like:
- typography choices
- spacing systems
- breakpoints
- motion behavior
- CSS structure
- interaction patterns
After doing this repeatedly, I began experimenting with ways to automate parts of the process.
The idea is to analyze live frontend implementations and extract structured design-system patterns directly from production websites instead of relying only on screenshots.
Been testing against products like Stripe, Linear, Apple, GitHub, Airbnb, and Vercel.
Still refining the extraction quality and trying to separate useful signals from noisy ones, but the experiment has been surprisingly interesting so far.
Curious how other frontend engineers or UX designers study production interfaces during research or system design work.
Check out - https://designmd.adityaraj.info/
u/hiehie — 7 days ago
▲ 3 r/UXDesign
I’ve been experimenting with extracting design systems directly from live websites
Most inspiration tools focus on screenshots, but I got curious about the actual implementation layer behind modern product interfaces.
So I started experimenting with a system that analyzes live websites and extracts things like:
• typography systems
• spacing scales
• color tokens
• responsive breakpoints
• interaction states
• motion behavior
directly from production frontend implementations.
Been benchmarking against products like Stripe, Airbnb, Apple, Linear, GitHub, and Vercel.
One interesting thing I noticed is how differently teams structure their frontend systems internally — even when the visual polish feels similar.
Still refining the extraction quality and trying to understand what would actually be useful for designers/design-system teams.
Curious what UX/UI designers here would want surfaced or documented from production interfaces.
u/hiehie — 8 days ago
Built a system that extracts production frontend patterns from live websites
Been working on a project called DesignMD over the past few months.
The original idea came from noticing that most design inspiration tools only capture screenshots, while the actual frontend intelligence lives inside the implementation layer itself.
So I started building a system that analyzes live DOM/CSSOM structures and extracts:
• typography systems
• spacing scales
• CSS variables
• responsive breakpoints
• interaction states
• motion behavior
directly from production websites.
Been benchmarking it against products like:
- Stripe
- Airbnb
- Apple
- Linear
- GitHub
- Vercel
One of the most interesting things so far has been seeing how differently large-scale products structure their frontend systems in production.
Still improving extraction quality, token normalization, and behavioral analysis — but the early results are pretty exciting.
Curious where this direction could go next, especially for:
- frontend engineering
- design systems
- AI-assisted product workflows
- reverse engineering production UI patterns
Finally launched it publicly today:
u/hiehie — 8 days ago