Can someone explain to me the claude design change to artifact access via chat instead of a standalone page come dec? By not having the standalone page do you lose the control to specify output up front from selecting slide, etc? Just wondering if it’s now up to the user to be better at prompting. Has anyone noticed any differences or improvement with this recent update?
follow up to my last post here (the spotify pricing one). a lot of you asked if the extension could do the whole site and not just one section, so that's what i worked on.
now when you analyse a page and hit download design system, you get one html file that's an actual design system, not a dump of hex codes:
in the video i ran it on spotify again, then imported the file into figma with an html-to-figma plugin. it comes in as real layers with auto layout, not a flat screenshot, so you can actually design with it.
for claude: give it the file (or the DESIGN.md export) and say "build this using this design system". way less guessing than a screenshot, same as last time but for the whole system now.
same disclaimer as before, not saying go clone someone's brand lol. i use it to see how good sites structure their stuff and to start my own from something that isn't ai slop.
still free on the chrome web store: https://chromewebstore.google.com/detail/pikspec-%E2%80%93-css-inspector-f/cnpghkfbhdpcendcliogffmajlkepoig
every time i gave claude a screenshot and said "make it look like this" it just guessed. spacing off, wrong fonts, and it always came out looking like every other ai site
so i built a chrome extension (pikspec) that grabs the actual css instead. what i did in the video:
- opened spotify, opened pikspec in the side panel
- hovered over stuff to see the real font, size, colors, padding etc
- clicked the pricing cards to lock them and hit reconstruct
- copied the prompt from the dashboard and pasted it into claude
it spat out one html file and honestly it's pretty much the same as the original. same type, spacing, colors. side by side is at the end, i guess from html file you will have enough context to use it for your own website to make changes as per your tech stack.
not saying go ship someone else's site lol. i mostly use it to see how good sites are built and to start my own stuff from something that doesn't look like ai slop. Sometimes i like one website's navbar while others card design.
it's free on the chrome web store, link is here. anyone got a better way to give claude design context? genuinely curious
Chrome Extension Link - https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig
Just blew my mind when I tried it! I know it can get much better with better prompts, but still, it’s crazy to think that just two years ago, nobody could have imagined where AI would be today—in terms of design, coding, and even building production-ready apps. Chek it out - clipten If you’ve tried it too, show me what you’ve created!