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.
Key Highlights
- Pencil uses six AI agents in swarm mode to design app screens in parallel and generate outputs in real time.
- Its JSON-based pen file format enables downstream conversion into web and mobile development stacks.
- Pencil appears in end-to-end workflows that connect requirements, UI generation, and implementation with tools like Claude Code and Expo.
- The tool is notable for compressing design cycles from hours or days into minutes for early-stage product prototyping.
- For AI PMs, Pencil is a strong example of how agentic systems can reshape design handoff and MVP creation.
Pencil
Overview
Pencil is an AI design and app-building tool positioned within the emerging agentic design workflow. Across the newsletter mentions, it is described as using six AI agents working in parallel to craft app interfaces in real time, generate multi-screen designs from a single prompt, and export those designs as a structured JSON-based `.pen` file. It has been shown in workflows spanning mobile app mockup generation, design-to-website conversion, and handoff into coding environments.For AI Product Managers, Pencil matters because it represents a shift from linear design workflows toward multi-agent, design-to-build systems. Instead of treating design as a separate, manual step before engineering, Pencil appears in examples where requirements are drafted with frontier models, UI is generated in minutes, and the resulting design artifacts are passed directly into implementation stacks like React Native, Next.js, and Expo. That makes it relevant not just as a design tool, but as part of a faster product prototyping and validation loop.
Key Developments
- 2026-03-02: Pencil is highlighted via Tom Krcha as a tool that uses six AI agents to craft apps in real time, framing it as part of a broader shift in AI-driven design workflows.
- 2026-03-08: Pencil’s new swarm mode is described as using six AI agents powered by Cloud Opus 4.6 to collaboratively design three screens of a mobile travel log app. The output is exported as a JSON-based “pen file,” then converted into a React + Tailwind + Next.js website. The same mention notes that the pen file can be converted to Swift iOS, Kotlin, or React Native, with community plugins for Figma and Lovable.
- 2026-03-09: Peter Yang spotlights Pencil’s AI design tool for its 6-agent swarm mode, full design canvas inside Cursor and Claude Code, and one-prompt design-to-website workflow. Two weeks after launch, it is reported to have surpassed 100K users.
- 2026-04-02: In Peter Yang’s React Native fitness app workflow, Pencil is used for AI-driven design after requirements are co-created with Claude. This positions Pencil as the design layer between product specification and implementation/testing with Expo Go and Claude Code.
- 2026-04-02: The same workflow notes that Pencil’s AI, using the Claude Opus model and six design agents, generated all UI mockups in under five minutes and produced a `fitness.pen` JSON file for downstream implementation.
Relevance to AI PMs
- Accelerates prototyping from spec to UI: AI PMs can use Pencil to turn a written product spec into clickable or build-ready multi-screen mockups in minutes, reducing time spent coordinating across product, design, and engineering during early validation.
- Improves design-to-engineering handoff: Because Pencil outputs structured pen files that can flow into web and mobile stacks, PMs can use it to tighten the loop between requirements, visual design, and implementation rather than relying only on static mockups.
- Supports agentic workflow experimentation: Pencil is useful for PMs evaluating how multiple specialized agents can collaborate in parallel on product tasks, which can inform future operating models for product discovery, UX iteration, and rapid MVP creation.
Related
- Claude Opus model / Cloud Opus 4.6: Pencil is described as being powered by Claude-family models in key demos, including six-agent swarm workflows.
- Claude Code: Pencil appears alongside Claude Code in end-to-end app creation workflows, especially for moving from design into implementation.
- Peter Yang: Several of the notable mentions come through Peter Yang’s coverage and hands-on walkthroughs.
- fitness.pen: An example pen-file output generated by Pencil for a fitness tracking app workflow.
- Expo: Featured in the downstream implementation and testing workflow after Pencil-generated designs were handed off for React Native app development.
- Cursor: Pencil’s design canvas is described as available within Cursor, linking it to AI-native development environments.
- Lovable: Mentioned as part of the ecosystem through community plugins/export paths from Pencil’s pen-file format.
- Tom Krcha: Associated with Pencil in early coverage describing its six-agent real-time app creation approach.
- AI agents: Pencil is a concrete example of multi-agent product creation, making it part of the broader agentic tooling landscape.
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. It is relevant to AI PMs as a coding workflow product competing in enterprise and community adoption.
An AI coding tool that introduced Projects, a persistent coordinator-agent workflow. The feature moves teams away from task-by-task chats toward a single long-running thread with subagents.
Person mentioned sharing a tutorial and a set of product principles in the newsletter. He is presented as a creator/commentator in AI product content.
Autonomous or semi-autonomous AI systems that can plan and take actions across tools and workflows. This is a core AI PM concept central to product design and evaluation.
A no-code AI app builder referenced here as the platform used to build a production-grade SaaS product. For PMs, it illustrates how agentic coding is changing build-vs-buy and software creation economics.
Stay updated on Pencil
Get curated AI PM insights delivered daily — covering this and 1,000+ other sources.
Subscribe Free