Refinery
Refinery is where every project begins. It helps you both formalize requirements and visualize your product early. By combining the PRD Editor and UI Mocker, Refinery bridges the gap between words and visuals so your team can align before writing code.
Write and refine requirements in the PRD Editor
Create HTML-based UI mocks in the UI Mocker
Attach supporting artifacts (docs, images, audio → transcribed)
Transition seamlessly into Feature Node extraction for Foundry
Learn how to use Refinery step by step in this short video:
Upload project artifacts via the Upload button in PRD Editor or through Project Console → Artifacts. Supported types:
Text and documentation
Images
Audio (transcribed into text)
PRD Editor – Draft and refine a versioned PRD with AI assistance. Attach artifacts directly into the conversation. Only document “owners” can edit, ensuring no conflicts.
UI Mocker – Instantly generate a starting /index page as a prototype for your app’s look and feel. From there you can:
Generate new pages with consistent style/layout
Ask the agent to adjust UI elements or redesign layouts
Randomize content with Refresh to test variations
Undo/redo edits instantly
A PRD paired with UI prototypes, both ready for Feature Node generation.
Upload your design sketches into Refinery
Use the AI agent to expand them into a narrative PRD
Switch to UI Mocker to instantly generate an /index prototype page
Ask the agent to create a new “Dashboard” page with the same style
Extract Feature Nodes from the PRD and move into Foundry
PRD Editor – AI-powered requirements writing + artifact attachment
UI Mocker – Generate, refine, and randomize HTML-based UI pages
Version Control – Every PRD is versioned; old ones become read-only
Undo/Redo – Roll back or reapply UI changes instantly
Feature Generation – Extract Feature Nodes directly from PRDs
Problem: Can’t edit a PRD Fix: Become the PRD “owner” first.
Problem: UI mock looks broken or repetitive Fix: Use Refresh to randomize content while preserving layout.
Use narrative paragraphs in PRDs for clarity
Keep implementation details out of PRDs; those belong in Foundry
Leverage the Refinery Agent’s suggestions to improve clarity and completeness — you can accept or reject them as needed
Leverage UI Mocker early to visualize flows and gather feedback before development
If you run into bugs or see something off, report it using the In-Product Feedback button so the team can investigate and fix it
PRD (Product Requirements Document): A high-level document capturing system requirements
Artifact: Any uploaded file (text, images, audio, mocks)
Feature Node: Structured feature extracted from the PRD (e.g., Authentication, Dashboard)
PRD Editor: Tool for drafting and refining PRDs
UI Mocker: Tool for generating and editing HTML-based UI prototypes
Ready to translate requirements into specs? Learn about Foundry →
