Wobbly ink outlines, paper grain, masking tape and handwritten type. Sites that look sketched, cut and taped together by a real person.
Hand Drawn makes your site look sketched, cut and taped together by a real person. Wobbly ink outlines, paper grain, masking tape, torn edges, marker underlines and handwritten type. Pick from three flavors: warm Sketchbook Collage, bright Cut-Paper Pop, or minimal Ink Doodle.
Hand-drawn web design makes a site look sketched, cut and taped together by a person: wobbly ink outlines instead of perfect boxes, paper grain, masking tape and torn edges, hatched and offset shadows, marker underlines, handwritten type and slightly misregistered color blocks. It draws on zines, sketchbooks, collage posters and children's book art, and this naive style is one of the strongest trends of 2026 as a reaction to polished, generic AI output. It suits portfolios, personal brands, creative studios, indie products, journaling, education and kids' products. It includes a toned-down app mode for dashboards, but it is not right for corporate or high-tech brands.
Lines wobble, boxes tilt and shapes overshoot their corners. Reading text, alignment and usability stay solid underneath.
Every outline, icon and doodle shares the same stroke weight. That consistency is what makes the page feel drawn by one hand.
Grain, tape, torn color bands and offset shadows give every surface a physical feel. Color blocks slip slightly off their outlines, like a screen print that moved.
Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction. Then hand those references to Claude Code. It makes a big difference in the final output.
Heavy borders, bold offset shadows, flat colors — raw and intentional. The style behind Gumroad and the best indie launches.
Early 2000s computer nostalgia meets cottagecore warmth. Hand-illustrated OS elements, thick warm outlines, and a soft peach palette — for apps that feel as good as they look.
Vibe coding UI design guide: why AI-built apps look generic, how to pick a design style, and how to give Claude, Cursor or Lovable real design direction.
AI coding tools fall back on the same safe, forgettable aesthetic when they don't have design direction. Here's how to fix it with SKILL.md and DESIGN.md.
Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.