Design the product you are already running.

Requirements and support

Install from the root of a project with Node.js 20 or newer. Foundry’s complete beta workflow is currently designed around web projects.

Automatic web setup

Next.js App Router, Vite, and plain HTML.

Generic web projects

Foundry creates the local adapter and provides an explicit integration step when it cannot safely edit an entry point.

Coding agents

Codex, Cursor, and Claude Code.

Native experiments

SwiftUI and React Native adapters are available for debug builds, but do not yet have the complete automatic web workflow.

Start your first session

Run one command from the project. It installs or updates Foundry, repairs the user-level agent connection, validates the integration, records a reversible manifest, and opens the session.

npx foundry-design

Restart your coding agent once after the first installation. Then reopen the same project and use the agent prompt. You can queue a reviewed batch while the agent is offline and it will be claimed after the listener reconnects.

Start Foundry for this project and keep listening for Apply with agent requests.

Foundry reuses an available development server and local runtime when possible, resumes the most recent session for the current source revision, and opens a per-session authenticated preview.

Understand the workspace

Layers

Navigate the rendered hierarchy, search elements, reorder compatible siblings, and see source-mapping status.

Components

Find instrumented component families and select one or every live instance.

Inspector

Edit properties that apply to the current selection. Scope, breakpoint, theme, and state remain attached to each recorded change.

Canvas tools

Switch between Select, Interact, and Pan. Navigate fixed-size artboards with explicit zoom controls while preserving the requested viewport.

Change summary

See the latest recorded edit from the top-center summary and open Review without losing the current canvas context.

Visual Agent

Attach a live selection or region to a visual question. Requests wait safely for a listener, and preview directions report success only after the branch and rendered preview are acknowledged.

Select and edit

In Select mode, click any element to select it. Shift-click adds compatible elements. Repeat a click to cycle through overlapping targets, or use Layers for exact hierarchy navigation. In Interact mode, Option-click temporarily selects an element without leaving interaction mode.

The Inspector exposes only properties that apply to the selected element and can be represented safely. Available controls include:

• Position, fixed, hug, fill, minimum and maximum sizing, ratio, overflow, alignment, distribution, and linked spacing
• Typography presets, font properties, line height, letter spacing, alignment, and editable content
• Project colors, gradients, fills, strokes, opacity, radius, effects, and contrast guidance
• Accessible names, interaction states, responsive context, and motion values

Numeric fields support keyboard entry and label dragging. Preview undo and redo affect temporary visual changes, not project source.

Foundry dropdowns are theme-aware, keyboard accessible, and kept above panel clipping. Effects expose editable drop shadow, inner shadow, layer blur, and background blur values when the selected source can represent them safely.

Motion Studio discovers CSS animations, CSS transitions, and Web Animations on the selected element. You can play, pause, replay, loop, change playback speed, scrub the timeline, and edit rendered keyframe tracks before review.

Typography Studio compares Current and Candidate specimens side by side with identical copy, dimensions, settings, and context. It reports loaded-face status, line count, rendered size, and clipping before a mapped font choice enters Review.

Use project-native values

Foundry indexes components, variants, breakpoints, themes, motion conventions, and design tokens from the project. Controls can suggest existing spacing, radius, typography, and color values instead of introducing unnecessary literals.

When a rendered value could map to more than one source expression, Foundry asks for the intended mapping. Ambiguous changes stay unresolved and cannot be included in an apply run until that choice is made.

Re-index project rebuilds the stored design graph from source, preserves the last good graph if indexing fails, and updates the live workspace only after the replacement is acknowledged.

Test conditions and design health

The State Workbench uses only themes and states authored by the project. Each viewport, theme, interaction state, and motion combination is measured as applied, current, unsupported, or untested instead of being simulated.

Responsive Design Lab audits every live frame independently, reports partial connection failures, compares geometry across frames, and keeps breakpoint-specific or all-breakpoint edit scope attached to staged changes.

Design Health can surface contrast, overflow, clipping, touch-target, accessible-name, reduced-motion, and spacing issues.

Safe corrections are recorded as normal changes and still pass through Review. Intentional issues can be ignored with their evidence preserved locally.

Large viewports open at their real dimensions. Pan, Space-drag, middle-drag, trackpad movement, and explicit zoom navigate the canvas without changing responsive measurements. Closing Design Health or Design Memory returns to the same selection, panel state, pan, and zoom.

Review and Compare

Review groups changes by element and shows the requested value, original value, scope, source evidence, mapping confidence, and affected instance count. You can edit, include, reject, or permanently delete an unapplied change. Deleting removes it from the local batch and restores its recorded original value on the canvas.

Compare temporarily returns to the canvas for before and after toggling, continuous scrubbing, side-by-side inspection, or element isolation. Returning to Review preserves approvals and edited values.

Apply, rebuild, and verify

Apply with agent freezes one persistent run containing only approved, exactly mapped changes and every affected viewport, theme, and state. Queued for agent means the batch is stored locally. Handoff received means an agent has claimed a renewable lease. Applying source changes is the first state that confirms editing has begun.

If a listener disconnects before source editing begins, Foundry safely returns the run to the queue and blocks the stale claimant from updating it. Reconnect agent restores the listener without creating a duplicate run.

If the agent disappears during source editing, rebuilding, or verification, Foundry preserves the same run in Needs attention. Resume with agent requires your approval, then the next listener must reinspect the current source before continuing. Foundry does not assume that repeating a partial source edit is safe.

After editing, the agent runs relevant project checks and asks Foundry to reload the rendered surface. Foundry measures the rebuilt result against the requested values, even if Review was closed, reopened, or refreshed during the run.

A run passes only after source changed and every reviewed context returns acknowledged rendered evidence matching the request. If verification finds a mismatch, Foundry explains it and waits for explicit retry authorization.

Connect your coding agent

The universal setup installs the reusable skill and MCP connection once. Agent-native routes provide the same versioned Foundry bundle through each host.

npx foundry-design install

npx foundry-design install-agent codex

/plugin marketplace add seanx24x/foundry-design-control
/plugin install foundry-design-control@foundry-design-control
/reload-plugins

After the shared connection exists, every project needs only its development adapter and local metadata. Foundry creates that lightweight connection automatically.

npx foundry-design connect

Project-scoped connections remain available as an explicit compatibility option.

npx foundry-design setup --project-agent --agent codex

Claude Desktop can also use Foundry through the validated MCPB extension. Install the extension from Claude Desktop settings, then use the normal Foundry command in each project to add the development adapter.

CLI reference

npx foundry-design install

npx foundry-design

npx foundry-design reset

npx foundry-design companion

npx foundry-design setup --yes

npx foundry-design start

npx foundry-design doctor

npx foundry-design status

npx foundry-design index

npx foundry-design export <SESSION_ID>

npx foundry-design install-agent <cursor|claude|codex>

npx foundry-design disconnect

npx foundry-design uninstall

Troubleshooting

npx foundry-design status

Status reports configuration, installed MCP version, runtime health, and the live listener as separate checks. It never calls a configured server connected until the active session has received a listener heartbeat.

npx foundry-design doctor --repair

npx foundry-design reset

Privacy, security, and removal

Foundry runs on your machine, binds its runtime to the loopback interface, and protects every design session with a generated token. The installed product does not require an account, use a Foundry cloud service, include telemetry, or send analytics.

This public website uses Vercel Web Analytics to understand page visits. That website tracking is separate from the Foundry product and is not installed in your project.

Session data can include rendered measurements, local project paths, source locations, design changes, validation results, and apply history. Keep authenticated session URLs and exports private.

Preview overrides are temporary. A coding agent must produce a normal source change and validate the rebuilt result before Foundry marks an apply run as passed.

npx foundry-design uninstall

npx foundry-design uninstall --global

Project and machine removal are separate. Both remove only Foundry-managed integration, while files with user changes are preserved for manual review.