The frontend design skill in Claude Code is good, but pencil.dev is o...

Source
claude-codepencil-devai-designfigma-alternativefrontend-designui-design

Summary

Pencil.dev is a free AI-native design tool that works with Claude or Codex subscriptions, offering real-time visual design with drag-and-drop manual editing. Unlike prompting Claude Code for frontend changes iteratively, it provides a collaborative visual workflow closer to Figma but purpose-built for AI-assisted design.

Key Insight

  • Pencil.dev positions itself as an AI-first alternative to Figma - designs websites, apps, and phone app UIs in real-time
  • Key differentiator: after AI generates the design, you can manually drag-and-drop elements to adjust layout without re-prompting - eliminates the back-and-forth “move this section” cycle with text-based AI coding
  • Works with existing Claude or Codex subscriptions (no separate AI cost)
  • Currently free to download
  • Potential Figma competitor for AI-heavy workflows where speed of iteration matters more than pixel-perfect control