Getting Started
Prototype with real production components.
What is Craft
A desktop prototyping platform built on real Quartz components from the Fireball design system.
Craft is a desktop app for building interactive prototypes with production components. Every button, input, and layout comes directly from the Fireball design system — your prototypes aren’t approximations, they’re built with the same code that ships in the final product.
The desktop app handles everything automatically — syncing your work to the cloud, keeping projects up to date across your team, and updating itself silently in the background. Edit locally with full AI tools, and your teammates see changes in real time.
There’s also a web version for reviewing and commenting on prototypes without installing anything. Sign in with Slack to view projects, leave feedback, and get @mention notifications.
Getting set up
Download the desktop app and the setup wizard walks you through everything.
On first launch, Craft runs a quick setup wizard with two steps:
That’s it. After setup, the app handles syncing, updates, and dependencies automatically. A health indicator in the toolbar shows the status of your cloud connection and AI configuration at a glance.
Web access (no install needed)
Reviewers and stakeholders can access the web version without installing the desktop app. Sign in with Slack to browse projects, leave comments, and receive @mention notifications. Editing and AI features are desktop-only.
Syncing your work
Your work syncs automatically to the cloud. No manual steps required.
Craft uses project locking to prevent conflicts. When you start editing a project, a lock is acquired automatically. Other users see a “View only” banner until you’re done. Locks auto-release when you leave the project or close the app.
How sync works
- You finish editing (AI prompt completes, you leave the project, or the app quits)
- Changed files are diffed against the cloud and uploaded atomically
- Other connected clients receive the update instantly via real-time sync
A safety net also flushes changes after 30 seconds of idle time, so manual edits outside the AI panel are covered too.
Health indicator
The toolbar shows a health indicator that reports on your cloud sync connection and AI setup. Green means everything is connected. Yellow means something needs attention — click it for details.
Blocks & templates
Don’t see what you need? Build it, share it, and everyone benefits.
Craft gets better every time someone creates a new block or template. Blocks are reusable UI sections — a settings form, a data table, a nav sidebar — composed from Quartz components. Templates are full page layouts ready to use as starting points for new projects.
When you build a pattern you think others will need — and you almost certainly will — extract it as a block in components/qualified/ or a template in projects/_templates/. Your changes sync automatically so the whole team can use them.
The goal is a growing library of production-ready building material. Every block you contribute means the next person doesn’t have to start from zero.
Your workspace
Navigate between the four main areas using the header at the top of every page.
Settings are accessible from the gear icon or avatar dropdown in the header. Admin users also see an Admin link with usage analytics and team management.
Organizing projects
The Projects page has a sidebar for organizing your work into folders. Create folders for sprints, features, or teams — and drag project cards directly into folders to organize them. Archive completed prototypes to keep your workspace clean without losing anything.
Bulk actions
Click the checkbox on any project card to enter selection mode, or Shift+click to select a range. A floating toolbar appears at the bottom with bulk actions:
- Move to — reassign selected projects to any folder
- Archive / Unarchive — bulk archive or restore
- Make public / Make private — change visibility for all selected
- Delete — permanently remove with confirmation
You can also multi-drag selected cards into a folder in the sidebar.
Project visibility
Projects can be public (visible to the whole team) or private (visible only to you). New projects default to private. A lock icon on the card indicates a private project. Toggle visibility from the card’s context menu, the project viewer toolbar menu, or via bulk actions.
Presence and locking
Project cards show real-time presence — you can see who’s currently viewing or editing each prototype. When someone is actively editing, a lock badge appears with their avatar. Other users see a “View only” banner until the editor finishes.
Filtering and sorting
The filter bar lets you search by name, toggle between public and private projects, and sort by date modified, date created, or name. Use the visibility toggle to quickly filter down to your private drafts.
Appearance
Craft supports dark, light, and system themes. Dark mode is the default. Change the theme in Settings — it applies instantly across the entire app and persists across sessions.
Creating projects
Click New project on the Projects page. Available in local mode only.
Project file structure
Using AI tools
With Claude Code or Cursor, run /quark:new-project for guided creation, or simply describe what you want in natural language.
The project viewer
A full-screen preview with a floating toolbar for viewing, editing, and collaborating.
Toolbar modes
Toolbar layout
The toolbar has two layouts: a floating bottom pill (default) and a left sidebar. Switch between them with ⇧+T or from the three-dot menu.
Project variants
Create multiple versions for A/B comparisons. Variant tabs appear in the toolbar when a project has more than one. Click the + button to add a variant — you can describe what should be different and the AI will build it. Double-click a tab to rename it, or right-click for options.
Project actions
Open the three-dot menu in the toolbar for project actions:
- Rename — inline rename in the menu
- Duplicate — create a copy of the project
- Save as Template — share this project as a reusable template for the whole team
- Make public / Make private — toggle project visibility
- Rebuild from description — regenerate the prototype from its original prompt
- Archive — move to the archive
- Delete — permanently remove with confirmation
AI-powered editing
Edit prototypes with natural language, right in the browser.
The prompt panel
Press T to open the AI prompt panel. Describe what you want in natural language — Claude edits your project files with streaming output and automatic hot-reload. You can also drag and drop images into the prompt for visual reference.
The panel auto-selects the best model for each prompt:
Override the model with the dropdown next to the input. A stats bar shows tokens, duration, and cost after each prompt. Each has a $1.00 safety cap.
Element picker
Press E to activate the element picker. Hover to highlight elements, then click to select one. Its context (component name, props, DOM structure) feeds into your next prompt automatically — useful when you want to target a specific element.
Highlights are color-coded: blue for plain DOM elements and purple for Quartz components and blocks. Hold ⌘ to drill through component boundaries and select inner elements directly.
Shift+click any element to send it straight to the AI prompt panel with its full context. Double-click a text element to edit its content inline. Use the arrow keys to navigate the element tree — up/down for parent/child, left/right for siblings.
Copy context for AI
Click the clipboard icon in the toolbar to copy your full project context — metadata, files, available components, and prompting tips. Paste into any AI tool for context-aware help.
Prompting tips
- Be specific about layout — mention flex, grid, spacing, and alignment
- Name components — say “use a TextField” instead of “add an input”
- Iterate incrementally — structure first, then styling, then interactions
- Paste Figma links — Claude extracts designs and maps to Quartz components
Dev inspect & blocks
Inspect components, edit styles visually, and customize blocks per-project.
The inspector panel
Press D to enter Dev Inspect mode. Click any element to open the inspector panel, which shows its component name, Tailwind classes, computed styles, and Quartz props. You can edit styles visually — changes queue up as pending edits that you apply all at once.
Blocks
Blocks are composed UI patterns (AppNav, DataTable, SettingsHeader, etc.) that are copied into your project at creation time. Each project owns its block copies — edit them freely without affecting other projects.
Sharing & collaboration
Collect feedback and share prototypes with your team and stakeholders.
Use @username in comments to send Slack DM notifications. Filter by mentions to find feedback directed at you.
Share links
Click the share button in the toolbar to generate a link:
- Internal link — Standard project URL. Recipients sign in with Slack to view.
- External link — Token-based URL that works for anyone without sign-in. Useful for stakeholders outside the team. The link opens a minimal viewer with no editing controls.
Keyboard shortcuts
All shortcuts work inside the project viewer. Press ⇧+? to open the shortcuts modal at any time.
Modes
Tools
Element picker
UI
Troubleshooting
Click a question to expand the answer.