3 Steps to an OpenCode Pencil MCP Next.js Workflow

Three button variants, a configured theme with JetBrains Mono and Geist, and a components page appeared without anyone writing the code by hand. That was the OpenCode Pencil MCP Next.js workflow recorded in a 2026 video by Rocketseat, and the mechanics behind it are simple enough to reproduce.

What the OpenCode Pencil MCP Next.js workflow looks like

The OpenCode Pencil MCP Next.js workflow is a terminal-first process where the OpenCode coding agent builds a Next.js app while reading visual context from the Pencil design tool through an MCP server. Rocketseat demonstrated it in a 21-minute video published on April 8, 2026, building a project called Dev Roast.

The workflow has four repeating stages:

1. Scaffold the project with explicit instructions: blank page, src directory, Biome for linting and formatting, Tailwind for styling.
2. Use plan mode first, answer the agent's clarifying questions, then switch to build mode.
3. Select a component in Pencil, ask the agent which frame is selected, and have it generate the component with the Pencil MCP.
4. Document the resulting conventions in an AGENTS.md file so future components follow the same rules.

The presenter, a developer with roughly 15 years of programming experience, runs OpenCode inside the Zed editor's terminal and keeps the project open beside it. He writes prompts in Portuguese, which the agent handles without issue, and uses Anthropic Opus model, though he notes that recent models from OpenAI or other providers should produce similar results.

How to scaffold the project with Biome, Tailwind and pnpm

Scaffolding starts with a single structured prompt rather than an interactive installer. The presenter asks OpenCode to create a blank Next.js project using the src directory, Biome for linting and formatting, and Tailwind CSS for styling, with no content on the initial page.

The agent then asks clarifying questions before acting. It asks which Next.js version to use; the presenter confirms the latest stable release, 16.1.6 at the time of the recording in April 2026. It asks about Biome rules, indentation and the package manager, where he chooses pnpm.

One instruction came from experience: he asks the agent to integrate Biome with Tailwind so the linter understands Tailwind v4 directives such as @theme. Without that integration, Biome flags valid Tailwind CSS as nonexistent rules, a problem he has hit in previous projects.

After the plan runs, verification takes seconds: pnpm run format executes cleanly, the lint pass reports no issues, and the agent itself notices that the React Compiler Babel plugin is enabled in the Next.js config and should stay.

Why plan mode and clarifying questions matter

Plan mode, toggled with Shift+Tab in OpenCode, makes the agent produce an execution plan before touching files. The presenter treats it as the default posture: read the plan, correct what is wrong, then switch to build mode with a short command like "do it".

The clarifying questions are the valuable part. Newer models ask about versions, formatting, and configuration instead of guessing. Guessing is where AI-generated projects drift, because a wrong Next.js version or an unconfigured linter surfaces hours later as a migration problem.

The workflow is not hands-off. During the session, OpenCode briefly loses its Anthropic authentication token; a /connect command and a device code restore it. That friction is normal and worth knowing before starting.

How the Pencil MCP turns a selected design into a Button component

The Pencil MCP is what separates this from generic code generation. With Pencil open, the presenter selects a button while holding Ctrl (Cmd on Mac), then asks in the terminal: "Which component am I selecting in Pencil? Use the Pencil MCP." The agent answers that the selected frame is a submit button and offers to inspect it in detail.

He then gives a specification-heavy prompt: create a components folder for reusable visual components, use the selected design as the base of a Button, use Tailwind with tailwind-merge and Tailwind Variants for variant handling, extend the native button props in TypeScript, and use named exports only.

The agent pulls design tokens, guidelines and a screenshot through the MCP, then works out the rest on its own: it identifies three button variants, configures the CSS variables for the theme, installs the fonts it finds in the design (JetBrains Mono for code, Geist for text), and wires the button into components/ui.

The presenter's corrections show where human judgment still applies. He tells the agent not to use tailwind-merge alongside Tailwind Variants, because the variants library already merges a className passed directly on a variant. He also asks for an example page under the app directory listing every button variant, a temporary page for visual review.

Documenting conventions in AGENTS.md

Once the button is correct, the key instruction follows: document the component creation patterns in an AGENTS.md file inside the ui folder. AGENTS.md is a convention file that OpenCode and most other agents read before creating or editing files in that directory, so conventions survive after the chat context is gone. Per the video, Claude Code is the exception that uses its own file instead.

Two documentation rules from the presenter are worth copying:

• Document patterns, not structure. He avoids references to specific files, because the folder grows and every new file would force a documentation update.
• Reference standards such as "use Tailwind Variants with direct className" rather than describing existing code.

Small corrections feed back into the file too. When the agent wrote agents.md in lowercase instead of uppercase, he asked it to fix the filename and document the naming rule as well.

What Context7 and documentation MCPs add

Alongside the Pencil MCP, the setup includes Context7, a documentation MCP. When the agent needs current documentation for Next.js, React or Tailwind Variants, it queries Context7 instead of a slow web search.

That mattered during the build: the agent automatically looked up the Tailwind Variants docs to confirm that className can be passed directly, then wrote the component accordingly. The presenter notes that models often lack up-to-date context on recent Tailwind v4 changes, and a documentation MCP closes that gap. Tools like Convex were mentioned in the setup but not used in this session.

How much technical knowledge does this workflow require?

The workflow rewards technical judgment at every step. Knowing that Biome needs Tailwind directive integration, that Tailwind Variants already merges classes, and that AGENTS.md should describe patterns rather than file lists is what turned generation into a maintainable codebase. The presenter's explicit conclusion: the more technical domain you have, the better you guide the AI.

He frames terminal-based AI agents as a default for non-beginners, whatever model or plan tier you use. The interesting risk he surfaces is context loss: once a chat closes, the agent forgets everything unless the conventions live in files like AGENTS.md or a memory plugin.

The same lesson applies to written knowledge. If you have explanations like this one sitting inside YouTube videos, such as content from educators around the Bootcamp do Dev Doido ecosystem by Gustavo Dev Doido or the Crazystack Typescript material, that knowledge stays locked in a timeline. Skala Blog turns those videos into structured articles: visit Skala Blog, paste a YouTube URL, and the video is transcribed and shaped into a publishable article.

FAQ

• Do I need the Opus model to follow this OpenCode Pencil MCP Next.js workflow? No. The presenter used Anthropic Opus through his subscription, but states that recent models from OpenAI and other providers should reach similar results. The workflow depends more on prompt structure and MCP integration than on one specific model.

• What does the Pencil MCP actually pass to the agent? It passes the selected frame's identity, design tokens, guidelines and a screenshot, plus an export design-to-code flow available from Pencil's file menu. The agent uses this to read variants, colors and fonts without you describing them.

• Why put AGENTS.md inside the ui folder instead of the project root? A subdirectory file is read only when the agent creates or edits files in that folder, so component rules live next to the components. Root-level files would mix component conventions with unrelated project instructions.

• Is the workflow compatible with any editor? Yes. The presenter ran OpenCode in Zed's integrated terminal and reviewed code in the same editor, but he explicitly says any editor works. OpenCode itself runs in a plain terminal.

• What versions were used in the recorded workflow? The video, published April 8, 2026, used Next.js 16.1.6, Tailwind CSS v4, Biome and pnpm. Verify current stable versions yourself before starting, since these were correct only at recording time.

Source video