Build a UI prototype for design exploration. Creates a self-contained, unauthed page in the real web app with mock data, exposes it for preview, and runs visual audits. Use when exploring layouts, information architecture, or interaction patterns before committing to production implementation.
中文简介正在准备中。当前显示原文说明。
实测评分 未实测
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Build a self-contained UI prototype inside the real web app for design exploration and UX iteration.
Read .claude/rules/37-prototype-development.md for the complete prototype development rules. Everything below is a summary workflow.
Before building, read the current implementation to understand:
Create two files:
apps/web/src/pages/<name>-prototype/
├── index.tsx # Main component — self-contained, no API calls, no auth
└── mock-data.ts # Stress-test mock data (long text, many items, empty states, edge cases)
Critical requirements:
<div style={{ height: '100vh', overflow: 'auto' }}>VmSizeCard, @simple-agent-manager/ui, etc.) wherever possibleAdd to App.tsx in the public routes section:
import { MyPrototype } from './pages/<name>-prototype';
// In Routes, alongside other public routes:
<Route path="/prototype/<name>" element={<MyPrototype />} />
cd apps/web && npx vite --host 0.0.0.0
Then expose the port using the SAM MCP expose_port tool (port 5173, protocol http). Share the resulting URL with the user.
Run Playwright screenshots at both viewports:
Check for: overflow, clipping, text wrapping, interactive element usability, empty states, long content handling.
Save screenshots to .codex/tmp/playwright-screenshots/.
Prototypes may be committed to feature branches for collaboration. They MUST be removed before any merge to main:
App.tsxApp.tsx还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Full API endpoint reference for SAM. Use when working on API routes, adding endpoints, writing API tests, or understanding the API surface. Trigger when asked about API endpoints, routes, or HTTP interfaces.
中文简介正在准备中。当前显示原文说明。
Full API endpoint reference for SAM. Use when working on API routes, adding endpoints, writing API tests, or understanding the API surface.
中文简介正在准备中。当前显示原文说明。
Recent feature changes and implementation details for SAM. Use when understanding recent changes, checking what was modified recently, or understanding feature history. Trigger when asked about recent changes, what's new, or feature history.
中文简介正在准备中。当前显示原文说明。
Recent feature changes and implementation details for SAM. Use when understanding recent changes, checking what was modified recently, or understanding feature history.
中文简介正在准备中。当前显示原文说明。
Cloudflare Workers architecture specialist. Advises on D1 migrations, KV usage patterns, R2 binary distribution, wrangler configuration, and Miniflare testing. Use when modifying wrangler.toml, working with Cloudflare services, or setting up testing infrastructure.
中文简介正在准备中。当前显示原文说明。
Constitution compliance validator focusing on Principle XI (No Hardcoded Values). Detects hardcoded URLs, timeouts, limits, and identifiers that should be configurable. Use proactively when implementing business logic, adding new features, or reviewing PRs for constitution compliance.
中文简介正在准备中。当前显示原文说明。