diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
new file mode 100644
index 0000000..70824fe
--- /dev/null
+++ b/.devcontainer/Dockerfile
@@ -0,0 +1,4 @@
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye
+
+RUN npx playwright install --with-deps chromium
+RUN su node -c "curl -fsSL https://claude.ai/install.sh | bash"
diff --git a/.devcontainer/README.md b/.devcontainer/README.md
new file mode 100644
index 0000000..de4e9d7
--- /dev/null
+++ b/.devcontainer/README.md
@@ -0,0 +1,51 @@
+# Development Container
+
+This project includes a development container configuration for consistent development environments across different machines.
+
+## Prerequisites
+
+- Docker
+- A devcontainer-compatible tool (VS Code Dev Containers, GitHub Codespaces, crib, etc.)
+
+## What's Included
+
+- Node.js 20 with TypeScript support
+- Git
+- Playwright (chromium) with browser dependencies pre-installed
+- npm packages from `package.json` auto-installed on container creation
+
+## Getting Started
+
+### VS Code
+
+1. Install the [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension
+2. Open the project folder
+3. Click the remote indicator (bottom left corner)
+4. Select "Reopen in Container"
+
+The container will build and initialize automatically (first build takes ~2-3 minutes).
+
+### Other Tools
+
+Use your devcontainer-compatible tool to open this project. Refer to its documentation for specific instructions.
+
+## Available Commands
+
+Once the container is running:
+
+```bash
+npm run dev       # Start Vite dev server (http://localhost:3000)
+npm run build     # Build for production
+npm run lint      # Run ESLint
+npm run preview   # Preview production build
+```
+
+## Playwright MCP Integration
+
+Playwright (chromium) is pre-installed in the container image. To use it with Claude Code's Playwright MCP integration, run this **inside the container**:
+
+```bash
+claude mcp add playwright -- npx @playwright/mcp@latest --headless
+```
+
+**NOTE**: The `--headless` flag is required inside the container since there is no display server.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000..e43ed5c
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,19 @@
+{
+  "name": "design-os",
+  "build": {
+    "dockerfile": "Dockerfile"
+  },
+  "remoteUser": "node",
+  "containerEnv": {
+    "VITE_HOST": "::"
+  },
+  "postCreateCommand": "npm install",
+  "appPort": [3000],
+  "forwardPorts": [3000],
+  "portsAttributes": {
+    "3000": {
+      "label": "Vite Dev Server",
+      "onAutoForward": "notify"
+    }
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
index c16ba22..4c526f1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,5 +13,6 @@ export default defineConfig({
   },
   server: {
     port: 3000,
+    host: process.env.VITE_HOST || 'localhost',
   },
 })