GenAI PMPencil
An AI design/build tool that uses six agents to craft apps in real time. It is presented as part of the emerging agentic design workflow.
Key Highlights
- Pencil uses six AI agents in a swarm workflow to design app screens in real time.
- Its JSON-based .pen file format acts as a bridge between AI-generated design and implementation.
- Newsletter examples show Pencil generating full UI mockups in under five minutes.
- The tool has been featured in workflows involving Claude Code, Cursor, Expo, and React Native.
- For AI PMs, Pencil is most relevant as a rapid prototyping and design-to-handoff acceleration tool.
At a glance
- Category
- Design
Pencil
Overview
Pencil is an AI-native design and app-building tool positioned around an agentic workflow: instead of a single assistant generating screens one at a time, Pencil uses a swarm of six AI agents to design apps in real time. In newsletter coverage, it is shown producing multi-screen mockups in minutes, storing the output in a JSON-based `.pen` file format, and feeding those designs into downstream coding workflows.For AI Product Managers, Pencil matters because it compresses the path from product spec to prototype. The tool sits at the intersection of requirements, UI generation, and design-to-code handoff, making it useful for testing product ideas quickly, aligning teams around tangible mockups, and exploring how multi-agent systems can speed up product delivery without relying on traditional linear design cycles.
Key Developments
- 2026-03-02: Pencil was highlighted by Peter Yang in a broader discussion of AI agents transforming design workflows, describing Tom Krcha’s product as using six AI agents to craft apps in real time.
- 2026-03-08: Pencil’s new swarm mode was shown using six AI agents powered by Cloud Opus 4.6 to collaboratively design three screens of a mobile travel log app. The design was exported as a JSON “pen file” and converted into a React + Tailwind + Next.js website. Coverage also noted that the `.pen` format could be converted to Swift iOS, Kotlin, or React Native, with community plugins for Figma and Lovable.
- 2026-03-09: Peter Yang featured Pencil as a rapidly growing AI design tool with 6-agent swarm mode, a full design canvas inside Cursor and Claude Code, and a one-prompt flow from design to website. Two weeks after launch, it reportedly had surpassed 100K users.
- 2026-04-02: Pencil was used in Peter Yang’s React Native fitness tracking app workflow, where Claude handled requirements, Pencil handled AI-driven design, and Cloud Code plus Expo Go handled implementation and testing.
- 2026-04-02: In the same build example, Pencil’s AI generated all UI mockups in under five minutes using the Claude Opus model and six design agents, outputting a `fitness.pen` JSON file that became the design artifact for implementation.
Relevance to AI PMs
- Rapid prototyping from specs: AI PMs can use Pencil to turn a lightweight requirements doc or prompt into concrete UI mockups quickly, which helps validate scope, flows, and edge cases before engineering begins.
- Better design-to-engineering handoff: The `.pen` file format and conversion pathways to React Native, web stacks, and other frameworks suggest a more structured bridge between design artifacts and implementation, reducing ambiguity in execution.
- Evaluating multi-agent workflows: Pencil is a practical example of how specialized AI agents can parallelize product work. PMs can study it to understand where agent swarms outperform single-model workflows in ideation, screen generation, and iteration speed.
Related
- Claude Opus model / Cloud Opus 4.6: Pencil’s swarm mode was described as being powered by Claude-family models, including Claude Opus and Cloud Opus 4.6 in newsletter coverage.
- Claude Code: Pencil was showcased alongside Claude Code, including a workflow where design work in Pencil fed into coding workflows.
- Peter Yang: A major source of coverage for Pencil, highlighting product demos, growth, and practical build workflows.
- Tom Krcha: Identified in coverage as the creator behind Pencil.
- fitnesspen: The fitness app example generated a `fitness.pen` JSON file, illustrating Pencil’s output format in a real build flow.
- Expo: Pencil appeared in a React Native workflow that used Expo Go for testing and implementation.
- Cursor: Pencil was described as offering a full design canvas within Cursor and Claude Code environments.
- Lovable: Newsletter mentions noted community plugins connecting Pencil’s `.pen` format to Lovable.
- AI agents: Pencil is a prominent example of agentic product design, specifically using six parallel design agents.
Frequently asked questions
What is Pencil?
An AI design/build tool that uses six agents to craft apps in real time. It is presented as part of the emerging agentic design workflow.
What should AI product managers know about Pencil?
Pencil uses six AI agents in a swarm workflow to design app screens in real time. Its JSON-based .pen file format acts as a bridge between AI-generated design and implementation. Newsletter examples show Pencil generating full UI mockups in under five minutes.
Explore this topic
Newsletter Mentions (5)
“Generated all UI mockups in under five minutes with Pencil's AI (using Claude Opus model and six design agents) outputting a fitness.pen JSON file”
Anthropic Demos Claude Code for Mobile Apps #1 ▶️ Full Tutorial: Build a Beautiful Mobile App with Claude Code in 16 Minutes Peter Yang Builds a React Native fitness tracking app in roughly two hours using Claude for requirements, Pencil for AI-driven design, and Cloud Code with Expo Go for implementation and testing. Co-created a spec.md with Claude defining three screens (add/edit workouts, live workout session, and calendar), progressive overload rules, pound/kg toggle, and dark-only theme Generated all UI mockups in under five minutes with Pencil's AI (using Claude Opus model and six design agents) outputting a fitness.pen JSON file Implemented the app in Cloud Code over three milestones, downgraded from Expo SDK 55 to SDK 54 for Expo Go on iPhone, and committed 6,400 lines of code across eight screens
“Peter Yang Builds a React Native fitness tracking app in roughly two hours using Claude for requirements, Pencil for AI-driven design, and Cloud Code with Expo Go for implementation and testing.”
Anthropic Demos Claude Code for Mobile Apps #1 ▶️ Full Tutorial: Build a Beautiful Mobile App with Claude Code in 16 Minutes Peter Yang Builds a React Native fitness tracking app in roughly two hours using Claude for requirements, Pencil for AI-driven design, and Cloud Code with Expo Go for implementation and testing. Co-created a spec.md with Claude defining three screens (add/edit workouts, live workout session, and calendar), progressive overload rules, pound/kg toggle, and dark-only theme Generated all UI mockups in under five minutes with Pencil's AI (using Claude Opus model and six design agents) outputting a fitness.pen JSON file Implemented the app in Cloud Code over three milestones, downgraded from Expo SDK 55 to SDK 54 for Expo Go on iPhone, and committed 6,400 lines of code across eight screens
“#9 in Peter Yang unveils Pencil’s AI design tool with 6-agent Swarm mode, a full design canvas in Cursor & Claude Code, and one-prompt design-to-website.”
#9 in Peter Yang unveils Pencil’s AI design tool with 6-agent Swarm mode, a full design canvas in Cursor & Claude Code, and one-prompt design-to-website. Two weeks post‐launch it’s surpassed 100K users, underscoring that craft and care still beat linear workflows.
“Six AI agents powered by Cloud Opus 4.6 in Pencil’s new swarm mode collaboratively design three screens of a mobile travel log app with Oceanania imagery and export the result as a JSON “pen file” that is then converted into a React + Tailwind + Next.js website running on port 8080.”
Six AI agents powered by Cloud Opus 4.6 in Pencil’s new swarm mode collaboratively design three screens of a mobile travel log app with Oceanania imagery and export the result as a JSON “pen file” that is then converted into a React + Tailwind + Next.js website running on port 8080. Pencil’s swarm mode (released Tuesday) assigns six subagents to design three app screens in parallel, each subagent indicated by its own cursor on the canvas. The design is stored in a JSON-based “pen file” format that can be converted to Swift iOS, Kotlin or React Native and has community plugins to export to Figma and Lovable.
“Tom Krcha’s Pencil uses six AI agents to craft apps in real time, Felix Lee leverages Figma MCP for seamless design-to-code loops, and Dylan Field redefines taste, craft, and point of view in an era of limitless ...”
#8 in Peter Yang spotlights how AI agents are revolutionizing design: Tom Krcha’s Pencil uses six AI agents to craft apps in real time, Felix Lee leverages Figma MCP for seamless design-to-code loops, and Dylan Field redefines taste, craft, and point of view in an era of limitless ... #9 𝕏 Santiago highlights that AI model access now costs just $200/month—a level of affordability unheard of three years ago—and warns this cheap pricing is built on borrowed time. He hopes token prices stay low before current subsidies dry up.
Related
Anthropic’s coding agent/environment used here to control physical tools in a long-running home experiment.
An AI coding tool shown here supporting follow-up questions and a /visualize command that generates a new chart in-chat.
A product-focused creator who demonstrates AI builds and critiques product UX/packaging. In this issue he showcases Tabi and discusses simplifying product surfaces.
Autonomous or semi-autonomous workflows that perform tasks, coordinate tools, and execute actions on behalf of users.
AI product company mentioned both as Elena Verna’s employer and as a product she uses in her pricing and packaging work.
Stay updated on Pencil
Get curated AI PM insights delivered daily — covering this and 1,000+ other sources.
Subscribe Free