OriginAIProduct specs for Claude Code, Cursor, and Codex

Canvas

Inspect your product's screens and states visually before you publish.

The canvas renders your specs as actual screens, so you can see your product instead of only reading about it. Use it to confirm that your screens and their states match your intent before you publish a release. To follow along, open a project with at least one RPML screen file that renders.

Walk your screens

  1. Open the project in the workbench.
  2. Select a screen file in the file tree — the canvas renders that page.
  3. Step through its primary states and variants as your spec models them: empty, loading, error, permission-restricted, and so on.
  4. Note any gaps, then fix them by editing the file directly or asking the in-app agent.
  5. Re-check after your edits, and only then publish.

Why it's worth the time

  • Your key user journeys become visible as screens, not just prose buried in a chat log.
  • You can point a teammate — or an agent — at a specific screen file when reporting a problem.

Troubleshooting

IssueWhat's going on
The canvas is blankThe file may be a doc-mode file (like README.rpml) or contain invalid RPML. Validate it, or open an actual page file.
The spec doesn't look like a polished design mockThat's expected. OriginAI specs are implementation-depth product context, not a pure visual design tool.

On this page