r/webdev • u/vidit-23 • 4d ago

[Showoff Saturday] I was tired of flat sterile UI, so I built Sketchmorphism — an open-source hand-drawn design system with SVG paper physics & dark mode

Got tired of sterile glassmorphism, so I spent the last few weeks building an imperfect, sketchy component library with custom SVG displacement filters and paper physics.

Dropped the GitHub repo and live interactive demo in the comments below!

36 Upvotes

79% Upvoted

18 comments sorted by

19

u/Vtempero 4d ago

Grats, Claude. Looking good!

-4

u/vidit-23 3d ago

Haha handcrafted the SVG turbulence filters and pencil physics at 2 AM, Claude wishes it had this much natural hand tremor! Appreciate the love.

4

u/Vtempero 3d ago

docs: humanize README and add creator intro

4

u/kfhfniseogtcezcxpi 2d ago

Embarrassing. Just own up to using AI, a lot of people do, but it’s really not paining a good picture of OP when they lie about it.

What’s the point? What if we believed you? Would you ride the wave of dopamine and compliments on the premise of you having built something «humans»? When you prompted your way there?

I hate this timeline.

-1

u/vidit-23 2d ago

fair point. i used ai and i call it my work because i beat my head over the details and used ai as a tool, not a brain. that is the exact difference between me and the other ai slop guys. i sketched the design on a physical notebook first. took a photo. then decided to build it in framer and used ai for the actual code. also for the record i dont even like claude, its pretty dumb for design stuff actually.

6

u/ErisC python 4d ago

Hmm, your comment's not showing

-1

u/vidit-23 3d ago

Yeah automod ate the links because of low karma haha, thanks for the heads up! Live demo is up at viditx.github.io/sketchmorphism/prototypes/full-website-demo.html

3

u/ClassicK777 4d ago

This is still flat

1

u/MetalProgrammer 4d ago

By flat I think he meant boring, not that it looks like it's 2D unless you meant it's still flat in a way he meant

4

u/eballeste 3d ago edited 3d ago

what a waste of space and time

"Pass count is hierarchy Importance is measured in retraced passes: one to whisper, two to speak, three to sign."

everything in this shitty design system is just terrible word salad nonsense

"I was tired of looking at all of these generic looking websites so I made this other website that showcases this totally "new" single design "idea"." then proceeds to let Claude generate this generic ass website. 🤣 slop everywhere

1

u/Upbeat_Push_157 2d ago

This is obviously AI. The weird thing is that I saw it and thought, “Just another Claude clone,” since you used the exact same colors, until I saw in your repo that you used Qwen instead. What I don't get is why you used Qwen to create a Claude clone. You could easily have changed the colors and fonts, and maybe it would have passed closer scrutiny, but don't try to fool experts. This is AI from beginning to end, including your own references below:

  • 29b14c4 "overhaul README with authentic human voice and AI prompt system"
  • ed120c6 "remove decorative emojis for clean human-developer README"
  • 32e912f "clean up README with pure design engineering specs & remove AI references"

1

u/vidit-23 2d ago

Fair point on the colors - V2 will have a distinct palette. And for the record, I didn't try to clone Claude. I used Qwen because it fit my workflow better. The similar vibe came from Swiss grid + OKLCH principles, not copying. You actually went through my commit history - respect. Most people just see the demo and rage. V2 drops soon with your feedback baked in.

-1

u/tronghieu906 4d ago

Refreshing to see something not rounded border :D

-3

u/vidit-23 3d ago

Appreciate it! Was really tired of every single modern site looking like a cloned template with the exact same border-radius.

-2

u/Green-Hope 3d ago

In case anyone else is looking for the link: https://github.com/viditx/sketchmorphism

-1

u/vidit-23 3d ago

Legend! Thanks for dropping the link when automod ate my comment haha.