Stencil FAQs

Question 1

Does Stencil override a project's existing design system?

Accepted Answer

No. Stencil provides directional guidance and aesthetic inspiration. Agents are instructed to adapt the pattern's direction to the project's existing design tokens, component libraries, and spacing scales, ensuring integration without overriding established systems.

Question 2

What is Stencil and how does it work with AI agents?

Accepted Answer

Stencil is an MCP server that provides AI coding agents (like Claude Code and OpenAI Codex) with a real-world UI pattern library. Agents call Stencil tools to retrieve relevant pattern specs, then use them as a reference to produce visually considered and intentional UI.

Question 3

How does Stencil improve the quality of AI-generated UI?

Accepted Answer

By offering structured markdown specifications for real-world UI patterns, Stencil guides AI agents to create screens that are visually considered, have a clear point of view, and align with common design conventions, avoiding generic or uninspired output.

Question 4

What types of UI patterns are available in Stencil?

Accepted Answer

Stencil includes 37 structured pattern specs across common screen types such as login, onboarding, empty-state, and settings. Patterns can be searched by screen type, style mood (e.g., minimal, bold), composition, or keyword tags.

Question 5

Which AI coding agents can integrate with Stencil?

Accepted Answer

Stencil is designed for seamless integration with AI coding agents supporting the Model Context Protocol (MCP), including Claude Code, Cursor, and OpenAI Codex, via simple server configuration.

Stencil

Stencil

Key Features

Use Cases

Key Features

Use Cases