Loading video...

Video Failed to Load

Go Home

Paste a URL. Get a DESIGN. md

402,236 views • 6 months ago •via X (Twitter)

32 Comments

Tran Mau Tri Tam ✪'s profile picture
Tran Mau Tri Tam ✪6 months ago

Find the open-source code here:

Foolish Coalescing 🐗's profile picture
Foolish Coalescing 🐗6 months ago

Bro, the site is down

Tran Mau Tri Tam ✪'s profile picture
Tran Mau Tri Tam ✪6 months ago

@grok can you solve this

Grok's profile picture
Grok6 months ago

@localhoist Sure, the HYPERDESIGN site is down but I got you. Paste any URL and I’ll extract the full DESIGN.md — colors, typography, spacing, viewport captures, and design language — just like the demo. What site?

PP's profile picture
PP6 months ago

@tranmautritam @localhoist There goes the moat

Grok's profile picture
Grok6 months ago

@tranmautritam @localhoist Ask Grok is currently available to Premium and Premium+ subscribers only. Subscribe to unlock this feature:

Enterprise Software Architecture's profile picture
Enterprise Software Architecture6 months ago

👀 For the sake of clarity, an API key is required. The referenced repository contains only examples, not a full application. That's the website behind:

AI Eating The World's profile picture
AI Eating The World6 months ago

its not working for me (localhost:3000)

Piyush Pradhan's profile picture
Piyush Pradhan6 months ago

All the design files:

⋆˚࿔ Sofía 𝜗𝜚˚⋆ 🎨's profile picture
⋆˚࿔ Sofía 𝜗𝜚˚⋆ 🎨6 months ago

Why would anyone pay fot this, you can just give te URTL to any LLM and it ll give you the design

Bishakh Neogi's profile picture
Bishakh Neogi5 months ago

This is what I came up with using this, opus 4.7, GPT Images 2.0

Nawaz Pasha's profile picture
Nawaz Pasha6 months ago

This is Gold 🤌

madebybigb's profile picture
madebybigb6 months ago

smart

Kalindu's profile picture
Kalindu6 months ago

Extracting a clean DESIGN.md from a live URL is the kind of utility that quietly replaces an entire Figma plugin category. Bonus: it gives designers a pattern they can paste directly into a coding agent — closing the design-to-code loop without anyone having to talk about "synergy."

Haim Bender's profile picture
Haim Bender6 months ago

link?

Hakimuddin K's profile picture
Hakimuddin K6 months ago

You’re really good at building demo videos

Arslan Yousaf's profile picture
Arslan Yousaf6 months ago

URL → full design system in seconds… frontend just got a cheat code 🎯🔥

Kaustubh Joshi's profile picture
Kaustubh Joshi6 months ago

Genuinely one of the most useful design tools this year—extracting colors, typography and spacing from any URL in one file is brilliant. 🙌 Pair it with the right Claude prompts and your workflow is complete. I compiled 6 free graphic design prompts here:

Adam 🌿 Unroot.design's profile picture
Adam 🌿 Unroot.design6 months ago

huge, would have killed for this on every audit

Osita 🇳🇬's profile picture
Osita 🇳🇬6 months ago

@Manuellabubakar oh nice

Ne alakası var's profile picture
Ne alakası var6 months ago

...

Sanyam Suyal's profile picture
Sanyam Suyal6 months ago

Isn't it ILLEGAL?

Usama Arif's profile picture
Usama Arif6 months ago

After getting design, if you wanna know how much that website cost to build, enter url here:

Manik's profile picture
Manik6 months ago

URL please

Kehn Marv.rs 🦀's profile picture
Kehn Marv.rs 🦀6 months ago

This looks really great, thanks for making it open source

Luky - A$AP Luky's profile picture
Luky - A$AP Luky5 months ago

Pase a URL. Get a SKILL.md And yes, this one is free, forever, running in the browser, BYO key.

RITAV DAS's profile picture
RITAV DAS6 months ago

@sumitdotme

Wait What's profile picture
Wait What6 months ago

We just jacking sites now via ai… coo coo

_AG's profile picture
_AG6 months ago

@hyperbrowser sounds like the claude design skill :)

Armaan Sidhu's profile picture
Armaan Sidhu6 months ago

Paste a URL. Get a DESIGN.md. @hyperbrowser just shipped a tool that extracts a complete design system from any website. Colors, fonts, spacing, components. All visually parsed and structured into a markdown file you can drop into Claude Code, Cursor, or any AI coding tool. Powered by Opus 4.7. Every AI coding workflow today hits the same wall: the AI generates technically correct code that visually doesn't match the existing codebase. Two buttons, both functional, but one looks like it belongs and the other looks like it was generated by an AI. The gap is the design system context. Without explicit colors, spacing scales, typography rules, and component patterns, the AI defaults to generic Tailwind output. With those rules baked into the prompt, the AI generates code that ships without redesign. HyperDesign extracts that context automatically. This is the kind of tool that compresses a multi-day onboarding process into 30 seconds. A new developer joining a team used to spend a week reading design files. Now they paste the URL of the company's existing site, get a structured DESIGN.md, and start shipping AI-assisted code that matches the brand from day one. Code generation is solved. The frontier is now context generation. Tools that auto-extract codebase patterns, design systems, API contracts, and team conventions are about to become more valuable than the AI models themselves. If you ship AI-generated UI work in 2026 and you're not extracting the design system into your context, you're shipping output that obviously didn't come from a human teammate.

Nikhil sinha's profile picture
Nikhil sinha6 months ago

nice

Jeremiah's profile picture
Jeremiah6 months ago

sick!!

Related Videos