Ripen docs

Install and activate#

Ripen is a Mac app. Download it, drag it to Applications and open it.

1. Open Ripen. The first screen is Activate your license.
2. Paste the license key from your purchase email into the field and click Activate. Activation runs once on this Mac and works offline afterwards.
3. If you're in the beta and don't have a key yet, use Get a beta license →. Need help? opens the Ripen Discord.

Install Ollama#

Ripen runs open-source models on your Mac through Ollama. If Ollama isn't installed, Ripen shows Ollama is required for local models.

1. Click Download Ollama, install it and open it once.
2. Come back to Ripen and click I've installed it.
3. Ripen starts Ollama in the background (Starting Ollama...). If you already run Ollama yourself, Ripen uses that server.

Pick your first models#

When Ollama has no text model yet, Ripen shows Choose models for this Mac.

1. Stay on Recommended. The model tagged Required is locked on; models tagged Agentic (best for multi-frame plans) are pre-ticked.
2. Click a row to tick or untick it. Bigger models write better apps but need more memory; each row shows its download size, and the bar at the bottom totals what you've ticked. Install on a row downloads just that one.
3. Optionally tick an image model under Image models · optional to generate images locally.
4. Click Install selected (N) and wait for the downloads. Models are downloaded once and cached.
5. Click Continue.

The All local models tab lists more Ollama models (Gemma 3, Llama, Phi, Qwen, Mistral, DeepSeek R1 and more). To get any other model, type its name under Pull any model from ollama.com and click Add.

Using cloud or network models instead? Click Skip installing models (on Macs with 16 GB or less, the card at the top offers the same). Ripen opens Settings → Providers so you can connect one, and won't show this screen again. Install local models later from Settings → Local models.

A tour of the window#

• Title bar: your open canvases as tabs.
• Left sidebar: Home, New Canvas, the CURRENT CANVAS name and menu, then two tabs: File (the canvas's pages and the open page's layers) and Library (its blocks, web apps and components). At the bottom are Settings, Debug and the theme picker.
• Canvas: the infinite space where everything lives, with the tool bar on its left edge.
• Right sidebar: the property panel for what you've selected, and below it the prompt box where you talk to models. Drag the line between them to give either more room; double-click it to split them evenly again.
• Queue pill: appears at the top right of the canvas while anything is generating.

Hide or show both sidebars with ⌘B or ⌘\. The right sidebar also has its own chevron to collapse it.

Canvases and tabs#

Each canvas is a separate board, saved automatically. Home (My Canvases) shows all of them.

1. Click New Canvas in the sidebar or on Home. It starts as Untitled Canvas.
2. Rename it by double-clicking its name under CURRENT CANVAS, or with the caret menu → Rename.
3. Open more canvases from Home (double-click a tile). Each open canvas gets a tab in the title bar.

• Click a tab to switch, drag tabs to reorder, and close one with its × or a middle-click. Going Home doesn't close anything.
• A dot on a tab means that canvas still has generations queued or running.
• On Home, click a tile to select it, Shift/⌘-click to select several, and right-click (or the … button) for Open, Export as .ripen…, Upload thumbnail…, Clear thumbnail and Delete….
• Ripen saves 2 seconds after every change. ⌘S saves right away.

Pages#

A canvas can have several pages, like a Figma file. Only the open page is drawn, so a big file split into pages stays quick. The pages are listed in the left sidebar's File tab, above the layers.

1. Click + next to PAGES to add a page after the open one, and type its name.
2. Click a page to open it. Each page remembers where you were looking, and has its own undo history.
3. Double-click a page to rename it, and drag pages up or down to reorder them.
4. Right-click a page for Rename, Duplicate (copies every frame on it) or Delete (Ripen asks first when the page has frames).

Moving frames to another page: drag their rows from the layers list onto a page, or right-click the frames → Move to “Page name”.

• Blocks work across pages: a block's instances can sit on any page, and the Library lists the blocks from every page.
• @-mentions reach frames on every page; frames on other pages show their page's name in the list.
• A generation keeps going when you switch pages, and lands in its frame on the other page.
• Importing a Figma file puts each Figma page on its own page. The Director can put a build plan's frames on a page you name.
• Home shows each canvas's minimap from the page it was left on.

Moving around#

• Pan: two-finger swipe or mouse wheel, middle-mouse drag, hold Space and drag, or use the Hand tool (H).
• Zoom: pinch, or hold ⌘ and scroll. It zooms around the pointer, from 5% to 400%. ⌘= and ⌘- zoom in steps, and ⌘0 goes to 100%.
• Zoom tool (Z): click to zoom in, ⌥-click to zoom out.
• Shift 1 fits everything on the canvas in view. Shift 2 fits the selection.
• In the layers panel, right-click a frame → Go to frame to jump to it.

Adding things to the canvas#

The + menu

1. Click + at the top of the left tool bar (Add frame).
2. Pick a type: App, Component, Document, Text, Image, Image Gen, Vector Gen, Design, Palette, Asset bundle, Moodboard or Project.
3. The new frame appears in the middle of the view. Image asks for a file first, and Project asks for a folder.

The object picker (double-click)

Double-click empty canvas to open a radial menu of up to six tools. The new frame lands where you clicked. By default it offers App, Component, Document, Image, Image gen and Design; change the set in Settings → Object picker.

Drag and drop

• Images become image frames, named after the file.
• SVG files become vector shapes you can recolour or explode into layers.
• Font files (.ttf, .otf, .woff, .woff2) become font chips.
• Several files at once are laid out in a grid and selected together.
• Dropping onto a design frame adds the images as layers; dropping onto an asset bundle adds them to the bundle; dropping onto the prompt box attaches them.

Paste

⌘V pastes frames you copied in Ripen, on the same canvas or another one, or an SVG or image from the system clipboard. When something you paste into another canvas uses a block or shows a web app that isn't there, Ripen brings a copy of that along too. From Figma, use right-click → Copy/Paste as → Copy as SVG first; Figma's plain copy has no SVG in it.

Selecting, moving and resizing#

• Click a frame to select it; Shift-click to add or remove it. ⌘A selects every frame. Esc deselects.
• With the Select tool (V), drag on empty canvas to draw a selection box; it selects every frame it touches.
• Drag a frame by its name label (images, shapes and multi-selections can be dragged from anywhere). Dragging one of several selected frames moves them all.
• ⌥-drag a frame to duplicate it. Most frames also have a Duplicate button in their toolbar.
• Resize from the corner handles. Shift keeps the proportions; ⌥ resizes from the centre.
• Double-click a frame's name label to rename it.
• Delete removes the selection. App and component frames ask first; everything else can be brought back with ⌘Z.

Doing something with several frames

When two or more frames are selected, a bar shows the count, + Add to new chat and ✕ Deselect.

1. Select the frames you want to use as context.
2. Click the caret next to + Add to new chat and choose App frame, Component frame, Design frame, Image gen frame or Document frame. Ripen creates that frame beside the selection with the frames attached as context.
3. Or choose Agentic canvas chat to hand them to the Director, which can plan several frames from them. (You can also just deselect and mention them with @: the Director sees the whole canvas.)
4. Type your prompt and send.

The tool bar and drawing shapes#

The vertical bar on the left of the canvas holds +, Select (V), Hand / Pan (H), Zoom (Z), Frame (F), the shape tools and the canvas background colour.

1. Click a shape: Rectangle (R), Ellipse (O), Triangle, Line (L) or Text (T). Click it (or press its key) again to put it away.
2. Drag on empty canvas to draw it. Shift makes a square or circle; ⌥ draws from the centre. A plain click drops a default-sized shape.
3. The tool returns to Select. The shape is a free-standing object you can style in the right panel.

To round a rectangle's corners, set Corner radius in the right panel; the button beside it splits it into one field per corner.

Draw inside a design frame and the shape becomes one of its layers instead. Shapes you draw can be @-mentioned and are used as real SVG artwork in apps, designs and projects.

The swatch at the bottom of the bar sets this canvas's background colour in Ripen's colour picker; the × next to it goes back to the theme's colour.

The layers panel#

• Lists every frame on the open page, top of the stack first. Design frames expand to show their layers.
• Click to select. Shift-click selects every row from the last one you clicked to this one; ⌘-click adds or removes a single row. Double-click to rename, drag to reorder.
• App and component rows can be muted (paused) from here. Layer rows have Hide/Show and Lock/Unlock.
• Right-click a row for Rename, Go to frame or Go to layer, plus block, mask and Move to page commands when they apply.
• Drag frame rows onto a page in the PAGES list to move them there.

The Library#

The left sidebar's Library tab lists everything reusable on the canvas, from every page, with a small preview of each:

• Blocks (see Blocks). A variant set shows as one item with its number of variants.
• Web apps, Projects and Components.

1. Drag an item onto the canvas. A block comes in as an instance; dropped inside a design frame, it becomes a block layer there. Web apps and components come in as copies. A project comes in as a variation: its own folder, branch, dev server and history.
2. Double-click an item to go to it (Ripen opens its page).
3. Type in Search library to find an item by name.

Folders. Blocks are filed by their names: name a block Button/Primary/Large and it sits in the folder Button, then Primary. Double-click a folder to open it; the path above the list (Blocks / Button) takes you back up a level or to the top.

Undo and right-click menus#

⌘Z undoes the last change and ⌘⇧Z redoes it, for frame moves, resizes, deletions and design edits alike. Apps and documents also keep a version history of every AI change.

Right-clicking a frame shows the commands that apply to it, such as Explode into views, Create block or Use as mask. Right-clicking empty canvas does nothing; double-click it for the object picker instead.

Keyboard shortcuts#

Shortcuts don't fire while you're typing in a field.

The prompt box#

It sits at the bottom of the right sidebar. Its header shows what you're talking to: the selected frame's name, or Canvas when nothing is selected.

• Enter sends, Shift Enter adds a line.
• The image button attaches pictures; you can also paste or drag them in.
• The @ button (or typing @) mentions another frame.
• Every message has a Copy button.

Choosing a model#

1. Click the model name under the prompt box.
2. Pick a model. They're grouped by where they run: this Mac, Macs on your network, Ollama Cloud, then cloud providers.
3. Recommended local models that aren't installed show a download button right in the list.

• New marks cloud models that appeared in the last two weeks; Vision marks models that can read attached images.
• Manage models and Manage servers at the bottom open Settings.
• Image Gen frames show image models here, and Vector Gen frames show QuiverAI models.

Which model the prompt box starts on. Select a frame and the prompt box switches to the model that frame was last generated with. With nothing selected it switches to your default model, if you've set one; otherwise it keeps the model you last picked, also after a restart.

The Director and direct builds#

With nothing selected, every prompt goes to the Director. There's no mode to switch: a pill above the prompt says Director.

• Bigger requests (“a landing page, a pricing component and three posts”) come back as a build plan for you to check, then Build it.
• A request for one thing (“a pomodoro timer”) builds straight away. No plan to confirm.
• ⌥ Enter skips the Director and builds one web app from your prompt, in the middle of the view.

The Director needs a capable model. With the smallest local models the pill says Direct build and prompts build one app directly.

Build plans with the Director#

1. Deselect everything (Esc). The pill above the prompt says Director.
2. Describe what you want, e.g. “a landing page, a pricing component and three Instagram posts for a coffee brand”. Mention reference frames with @ or attach images.
3. The Director replies with a build plan: a summary, a numbered list of frames with their types and sizes, what depends on what, and a token estimate.
4. Click Build it to create the frames, or Cancel. A plan with just one frame builds without asking.
5. The frames are laid out left to right in plan order, below anything already on the canvas, and the view zooms to show them all. Apps that combine other pieces wait (Waiting for components…) until those are done.

If you've exposed any tools to the model, the Director can call them before planning (for example to look up your brand guidelines).

Agent teams#

Each frame in a build plan is built by its own agent, and agents work side by side wherever they can. You see them on the canvas as named cursors (see the generation queue).

• Steps that build on each other. The Director can plan an edit step: a change to a frame that waits until the frames it needs are done. For example, one agent makes a moodboard, another scaffolds a checkout screen, then a third restyles the checkout with the moodboard. Ask for it in plain words (“then apply the moodboard to the checkout”). An edit step can also change a frame that's already on the canvas.
• Where each agent runs. Ripen picks a model and a machine for every agent when it starts, from how demanding its part is (the Director rates each one light, standard or hard), whether it needs to see images, and what's free right now: this Mac, your other Macs, or a cloud provider. Harder parts go to stronger models; while one machine is busy, the next agent starts on another.
• You set the bounds once in Settings → General → Agents can use: Free only (this Mac, your Macs and servers on your network; nothing leaves your network), Free + plans (adds subscriptions like Ollama Cloud; the default), Best results (adds pay-per-use models for the hardest parts) or Your model (every agent uses the prompt box's model, as before). The model you picked in the prompt box is always allowed.
• See why, and change it. Each agent's cursor shows its model and machine. Click it for why it's there (“Qwen 2.5 Coder 32B on Studio Mac (free): a strong model for a hard task, This Mac was busy”) and, while it waits, a Run on… list to move it.
• Name a model for a part in your prompt (“use Claude for the checkout”) and that agent runs on it.
• Spending. Pay-per-use providers count toward your spending limit. Past it, nothing new starts on them until you allow more, and agents move to free models where they can.

Pages and blocks in plans#

The Director knows the canvas's pages and blocks. Ask it to put the work on a page (“on a new page called Campaign”) and it opens or makes that page before building. Designs it plans can use your blocks, pick their variants and set their properties (“use the Button block, Hover variant, label Shop now”) instead of redrawing them.

Using what's on the canvas#

The Director sees every frame on the open page: its name, type and what's in it (a document's text, a palette's colours, an image's description). So you can refer to things by name, with or without @.

• Act on a document. Write a spec or PRD in a document frame, name it (say Recipe PRD), then ask “build the app in the Recipe PRD”. The Director plans from it, and each agent gets the document's text. It only acts on a document when you ask it to.
• Reuse what's there. “A settings screen in the style of Checkout, using Brand colours”: the agent building it gets Checkout's code and the palette.
• Sample code. Point at an app, component or project (“a date picker like the one in Booking”) and the agent gets that code to work from.

Bundles, palettes, type and images#

Ask the Director for brand and reference work in plain words. A few examples:

• Asset bundles. “Bundle the product shots for the moodboard”: it picks the right images on the canvas and copies them into a new asset bundle, which moodboards and palettes can then use.
• Palettes from images. “A palette from the Refs bundle” reads the colours straight from those images.
• Type testers. “A type tester pairing Playfair Display with Inter” makes a design frame that sets each pairing in headings and body text. Fonts on this Mac and any Google font work. Name a font you have installed and it’s used as named: Ripen checks your fonts before anything searches the web. In a plan with a moodboard, the type tester (and any other design) follows that moodboard’s fonts and colours.
• Images and vectors. It writes the prompts for Image Gen and Vector Gen frames and starts them, using images on the canvas as references when you name them. Designs it plans can place your SVGs and drawn shapes.

Apps built screen by screen#

Ask for an app with three or more screens (“a plant shop with home, cart and checkout”) and the Director builds it as one real project, with up to three agents working on its screens at once.

1. Ripen makes a new project in Documents/Ripen Projects: Vite, React and TypeScript, with one page file per screen and links between them.
2. The project opens on the canvas already exploded: one frame per screen, linked together, all running from the same dev server.
3. Up to three agents share the screens, each taking a few neighbouring ones; its cursor moves to whichever screen it's writing. They write only their own pages, so they don't get in each other's way, and you watch every screen take shape. Until its agent gets to it, a screen says Building ….

It's a single app: links between screens work, and you can open, deploy or export it like any other project.

• One or two screens become a single app frame instead: it's ready in seconds and needs nothing on disk. The app switches between its screens, and you can explode it into views or turn it into a project later.
• Want a project anyway? Say so (“as a real project”), or ask to deploy it or to use an npm package, and you get a project however many screens it has.
• Want an app frame anyway? Say “just an app frame” and the Director won't make a project.

@-mentions and attachments#

1. Type @ and a few letters of a frame's name, or click @.
2. Use ↑/↓ and Enter (or click) to insert it. It shows as a pill in your prompt.

What the model gets depends on the frame:

• Images, generated images, SVGs, vectors and drawn shapes: the picture itself. In apps it's also given a link to the real file, so it places your logo or photo instead of redrawing it.
• Apps and components: their code.
• Designs: their layout (or a picture, as context).
• Documents: their text.
• Palettes, font chips and moodboards: exact colours, fonts and rules.

Frames on other pages can be mentioned too; the list shows their page's name.

Attached images (button, paste or drag) work as references or as assets to place. Say which you mean: “match the style of this” versus “use this as the hero photo”.

Slash commands#

Type / at the start of the prompt to open the command menu.

The command bar#

Press ⌘K on a canvas for a quick bar of commands that act on the whole canvas. Type to filter, use ↑/↓ and Enter to run one, and Esc to close.

• Chill: stop all dev servers: stops every project's dev server at once (handy after opening several projects).
• Fix all errors: fixes every frame with an error, with your default model.
• Stop all generations, New page and Go to page for each of the canvas's pages.
• Open Settings and Set the default model.
• Run tool for each of your tools; the result goes with your next prompt.

Applying a moodboard#

When the canvas has a moodboard, a Moodboard pill appears left of the model picker.

1. Select the frame you're working on.
2. Click Moodboard and pick one (or None).
3. Send your prompt. The pick sticks to that frame, so later edits keep the same colours, fonts and rules without mentioning it again.

Change the moodboard (or edit its palette) and send any prompt: the frame is restyled to match.

Chat history#

Each frame keeps its own conversation, and the bar above it shows the message count and size. The eraser button offers:

• Compact: summarise the history and keep the intent, to save tokens on long chats.
• Clear: drop the history but keep the code or design.

The generation queue#

Every generation goes through a queue, so you can keep prompting while others run. A pill at the top right of the canvas shows what's happening, e.g. “2 generating, 3 queued”.

• Click the pill to expand it: you'll see each job, a System RAM meter, and can drag queued jobs to reorder them or remove them with ×.
• The red Stop button (or ⌘⇧K) cancels everything. To stop one frame, use Stop generation at the top of its toolbar.
• Agent cursors. Each job shows on its frame as a named cursor, like a collaborator: its role (Builder, Designer, Engineer, Writer, Image…) and model. An agent making something new sketches it as it goes: rough blocks for a header, title, text, a picture, cards and a button (rows, for an image) appear one by one, each drawn under its cursor. The sketch is a gesture, not the real layout, and goes once the work lands. An agent changing something that's already there moves around the frame instead (a project edit also shows the file it's writing). A waiting agent sits dimmed in the frame's corner and says what it's waiting for. A Director plan shows as a team of agents working side by side. Don't want them? Turn off Show agent cursors in Settings → General → Display; working frames still glow.
• How many run at once is set in Settings → General → Concurrent generations. Frames on a canvas you've closed wait until you open it again.

Build your first app#

1. Press Esc so nothing is selected, and set the pill above the prompt to Direct.
2. Describe the app: “A habit tracker with a weekly grid, streak counter and a dark theme.”
3. Press Enter. A new app frame appears and glows while it works (Queued…, Generating code…).
4. When it's done the app runs in the frame. Click into it to use it like any web page.

You can also add an empty App from the + menu, select it, and prompt it.

Edit an app by prompting#

1. Select the app frame.
2. Type the change in the prompt box (Describe a change…), e.g. “Add a settings screen with a theme toggle.”
3. Send. The app updates in place, and the previous version is saved to its version history.

@-mention other frames to bring in their code, designs, images or colours: “Use the header from @Landing and the colours from @Brand palette.”

The app toolbar#

Select an app frame and a toolbar appears on its right. Top to bottom:

• Stop generation (only while generating) and a grip to drag the frame.
• Breakpoint: change the frame's size (see below).
• Reload app: restart the app from scratch.
• Device motion: tilt and shake the app like a phone (see below).
• Mute: pause the app to save memory. A muted frame shows Muted.
• Keep live: keep it running when not selected (otherwise it shows a still picture).
• Explode into views: one frame per screen (see below).
• Duplicate, Export…, Copy raw code to clipboard, Version history and Delete.

Tilt and shake an app#

Macs have no tilt sensors, so apps that react to how a phone is held (a spirit level, a parallax card, a marble maze) sit still. The motion pad stands in for the phone.

1. Select an app or project frame whose app listens for tilt (deviceorientation, devicemotion or the sensor APIs) and the pad opens by itself. For any other frame, click Device motion in its toolbar. Closing the pad keeps it closed for that frame until you reopen it.
2. Drag the dot to tilt: left and right tilts the sides, up and down tilts the top edge. Double-click the pad, or click Level, to lay it flat.
3. Turn Heading to point it another way, and click Shake to shake it.

• The app gets the same events a phone sends (deviceorientation and devicemotion), so it needs no changes.
• While the pad is open, the angles are sent again every half second, so a page that reloads picks them up.

Breakpoints and custom sizes#

1. Click the breakpoint button in the toolbar (its tooltip shows the current size).
2. Pick Mobile (390×844), Tablet (820×1180) or Desktop (1280×800).
3. Or under CUSTOM, type a width and height and click Set.
4. To reuse a size, click Save as breakpoint, name it (e.g. “iPhone SE”) and click Save. Saved sizes appear in this menu for every app and project frame, on every canvas.

You can also drag the frame's corner to any size.

Art Director: point at things and describe changes#

1. Select an app frame and click the Art director pill under it.
2. The bar reads Click elements to edit. Click any element in the app.
3. In What would you like to change?, describe the change (“Make this button blue and say Start”) and click Add edit.
4. Repeat for other elements. Each gets a numbered badge; click a badge to change or remove its edit.
5. Click Submit to send all the edits as one change. Exit or Esc leaves without sending.

Art Director works the same way in design frames (click layers) and project frames.

Controls: tweak without prompting#

Controls are sliders, colour pickers, toggles and text fields for an app, shown in the right panel under Controls. Changing one updates the app instantly.

1. Select an app frame that has been generated.
2. In the right panel, click Add controls. Ripen asks the model to expose the app's colours, sizes and copy as controls.
3. Ripen keeps the controls only if the app still looks the same afterwards. If it doesn't, you'll see why and nothing changes.
4. Adjust the controls. Use Reset on one, or Reset all.
5. Happy with a value? Click Make default (or Make all default). The value is written into the app's code as that control's default, so it's part of the app wherever it goes: when you @-mention it, export it or prompt changes to it. A version is saved first, so you can go back.

• Ask for them in a prompt (“…with sliders for the spacing and colours”) and they're added automatically.
• To add them to every new app, turn on Settings → General → Add controls to new apps automatically.
• Exports keep your current control values, and @-mentioning an app passes along any values you haven't made default yet.

Version history and fixing errors#

Going back to an earlier version

1. Click Version history in the frame's toolbar.
2. Hover a Version N row and click Restore.

A version is saved before every AI change (up to 20), including the chat and control values, so restoring is a true rewind.

When an app shows an error

• If a fresh app crashes before it first appears, Ripen fixes it automatically (up to twice in a row).
• Otherwise an error card appears on the frame. Pick a model in Pick a fix model (a stronger one helps) and click Try fix.
• /fix-errors in the prompt box queues fixes for every broken frame at once.

Previews, keep live and mute#

To keep big canvases fast, apps you aren't working in show a still picture of themselves. Selecting a frame runs it live again.

• Turn this off in Settings → General → Snapshot previews for app frames.
• Use Keep live (pin icon) for frames that should always run, like animations or dashboards.
• Use Mute to fully pause a frame.

Explode an app into its views#

Apps with several screens (tabs, steps, pages) can be spread out as one frame per screen. Every view runs the same app, so you can work on a single screen and see the change everywhere.

1. Select the app frame and click Explode into views in its toolbar (or right-click → Explode into views).
2. Ripen reads the app's code to find its screens and adds a frame for each one, named like “Habits · Settings”, linked to the original by lines.
3. If there isn't room beside the app, it glides to the nearest empty area and the view follows, so the whole group ends up on screen.
4. Select any view and prompt it. The change is applied to the one shared app; every view updates, and the views it affected glow.
5. To fold them back, select the original and click Collapse (or right-click → Collapse views).

Export an app#

Click Export… in the toolbar:

• Export as Vite project (.zip): a runnable React + TypeScript project. Unzip, run npm install and npm run dev.
• Open as a project folder…: saves that project to a folder and opens it as a project frame, ready for git, GitHub and deploys.
• Export as .html: one self-contained file that opens in any browser.

Images you @-mentioned are packed into the export. Copy raw code to clipboard copies just the code.

Camera, microphone and screen#

Apps can use your camera, microphone or screen, but each one asks for itself.

1. When an app asks, a card appears above the frame: “… wants to use your camera”.
2. Click Allow or Don't allow. Ripen remembers the answer for that frame.
3. While a device is in use, a red badge appears by the frame's name. Click Stop to turn it off.

Choices are stored on your Mac only, never in canvas files, so opening someone else's canvas doesn't give its apps access. Review or change them in Settings → Privacy.

Component frames#

A component is a single reusable piece of UI (a card, a navbar, a pricing table) rather than a full app. Add one with + → Component and prompt it like an app.

Components have the same toolbar as apps, plus background swatches (and Custom background color) to preview them on different surfaces. Exploding, controls and opening as a project are for app frames only.

Create a design#

1. Pick the Frame tool (F) in the tool bar and drag out the frame at the size you want (Shift for a square), or click once for a 1080×1080 frame. You can also add a Design frame from the + menu.
2. To change its size, select it and use Size or a Preset in the right panel (Instagram square, story and portrait, X banner, YouTube thumbnail), or drag any corner or edge. The opposite side stays put.
3. Click the frame's name above it to select the frame (even while one of its layers is selected), or drag the name to move it.
4. Prompt it (“A launch poster for a jazz night, bold type, warm colours”), draw into it, or drop images onto it.

To make a design a block, click the diamond in the toolbar beside the selected frame (or press ⌥⌘K). A block's toolbar then has Create instance and Add variant.

The frame's own panel has FRAME (size, corner radius to round the frame itself, and a size preset), BACKGROUND and EXPORT. Delete the background fill for a transparent frame.

Import a Figma file#

Bring frames from a Figma file in as design frames, with their layers, text, images and vectors ready to edit.

1. On Home, click Import → Figma file….
2. The first time, paste a Figma personal access token (Figma → Settings → Security → Personal access tokens, with read access to file content) and click Connect. You can also do this in Settings → Integrations.
3. Paste the file's link (in Figma, Share → Copy link) and click Open file.
4. Everything at the top level of each page is selected: frames, and also groups, vectors and shapes that sit on the page directly. Untick any you don't want, or use the filter.
5. Click Import N frames. Ripen opens a new canvas named after the file with one design frame per Figma frame, at its size and where it sits in Figma, with its corner radius. Each Figma page comes in as its own page. Big file? Click Continue in background and keep working; a small tray shows the progress and Open canvas takes you there when it's done.

Components come in as blocks. With Keep components as blocks ticked (it is by default), every Figma component the frames use becomes a block, and each instance becomes an instance of that block. Change the block and every instance follows. Components from a library come along too.

• Variant sets come in whole. A component set becomes a variant set with all of its variants, even if the frames use only one, so instances can switch to any of them. Its variants keep their layout from Figma, and the blocks the frames use sit in a row above them.
• Component properties (text, boolean and instance swap) become the blocks' properties, shared by every variant of a set. Ones no layer uses come across with their default value, and instance swap properties keep their preferred components.
• Nested instances a component exposes show their properties on its instances.

An instance stays linked when it only changes what a Figma instance can: the component's properties, and layers' fills, strokes, shadows, opacity, corner radius, text and type, or which layers show. Its property values come in as its values (a label set to Buy now, an icon turned off); the rest become its overrides, including changes inside its nested instances. A resized instance stays linked too when the block laid out at its size (by its constraints and auto layout) comes out as it does in Figma. One that changes anything else comes in as plain layers, looking exactly as it does in Figma. Untick the box to bring everything in as plain layers.

Working with layers#

• Add: draw with the shape tools inside the frame, drop image or SVG files on it, or drag images and shapes from the canvas into it.
• Select: click a layer, Shift-click for more, or drag on an empty part of the frame to box-select. In the layers panel, Shift-click selects a run of layers and ⌘-click adds or removes one.
• Several at once: with more than one layer selected, the properties panel edits them all. Settings they don't share read Mixed; set one and every selected layer takes it.
• Move: drag, or nudge with the arrow keys. ⌥-drag duplicates. Drag layers into another design frame to move them there, or well outside to lift them onto the canvas.
• Resize: eight handles; Shift keeps proportions, ⌥ from the centre. To make text, strokes and corners grow too, use the scale tool (K).
• Rotate: grab just outside a corner; Shift snaps to 45°.
• Text: double-click a text layer to edit it. Click away or press Esc to finish.
• Inside groups: click selects the whole group; double-click goes one level in (again to go deeper, and on text to edit it), and ⌘-click picks the innermost layer straight away. Once you're inside, clicks pick that group's other layers. In the layers panel, open a group with its arrow. Imported Figma frames come in as groups, so this is how you reach what's inside them.
• Arrange: ⌘G groups, Shift A wraps the selection in a flex group, ⌘]/⌘[ moves forward and back, and the layers panel lets you drag, hide and lock.

Layer properties#

Select a layer (or several, to edit them together) and the right panel shows:

• Position, Size, Rotation.
• Opacity with a blend mode menu (multiply, screen, overlay and 13 more).
• Corner radius. The button beside it splits it into top-left, top-right, bottom-left and bottom-right fields.
• CONSTRAINTS and FLEX LAYOUT (see Flex layout and Constraints).
• TYPE for text: font (installed or Google Fonts), size, weight, tracking, leading, alignment, and how the box resizes (Auto W, Auto H, Fixed).
• FILLS: several fills per layer: solid, linear or radial gradient, or an image (cover, contain, tile or crop), in the colour picker.
• STROKE, with per-side widths on rectangles, and SHADOWS.
• EXPORT (see Exporting).

The colour picker#

Every colour swatch in Ripen opens the same picker: fills, strokes, shadows, gradient stops, the canvas and frame backgrounds, app controls, block properties and the theme editor.

• Drag in the square for saturation and brightness, and along the strip for hue.
• Type a value as Hex or RGB, or click the eyedropper to pick a colour from anywhere on screen.
• MOODBOARD lists the colours of the canvas's palettes (the ones your moodboards use first). Hover one for its name.
• IN THIS FILE lists the colours the canvas uses most, on every page. Click one to use it.

The pen tool#

Draw your own paths, point by point.

1. Press P or click the pen in the left toolbar. Click inside a design frame to draw into it, or on empty canvas to draw a loose shape.
2. Click to add a corner point. Click and drag to add a smooth point and pull out its handles; hold ⌥ while dragging to move only the outgoing handle. Shift keeps the segment to 45° steps.
3. Click the last point again to make the next segment start straight. Delete removes the last point.
4. Click the first point to close the shape, or press Enter or Esc to leave it open. Choosing another tool also finishes it.

A new path is filled so you can see it: with the fill and stroke you last set on a shape, or, the first time, a colour that stands out against what you're drawing on (near-black on light, near-white on dark). An open path with only a fill also gets a stroke in that colour. Change them in the right panel like any layer.

Editing points#

Double-click any shape or path (rectangles, ellipses, triangles, lines and pen paths) to edit its points. A shape becomes a path the first time you change it. While you edit, the toolbar beside the right sidebar holds the point tools:

• Direct selection (A): click a point to select it (Shift adds more), drag on empty space to box-select, and drag points to move them. Click a segment to select both of its ends. Drag a handle to reshape a curve; smooth points keep their handles in line, and ⌥-drag breaks them apart. Arrow keys nudge the selected points, and Delete removes them.
• Convert point (Shift C): click a point to switch it between sharp and smooth, or drag from it to pull out new handles.
• Scissors (C): click a point or anywhere on a segment to cut the path there. A closed shape opens; an open path splits in two.
• Join (J): click two open ends to connect them. The two ends of one path close it; ends of different paths merge them. With two ends selected, ⌘J joins them.
• With the pen over the path you're editing: click a segment to add a point, click a point to delete it, or click an open end to keep drawing from it.

With two or more points selected, the toolbar also shows align and distribute: line the points up on their left, right, top or bottom, or on a shared vertical or horizontal line, and space three or more evenly. Each point's handles move with it. The shortcuts are the same as for layers: ⌥A ⌥H ⌥D ⌥W ⌥V ⌥S, and ⌥⇧H / ⌥⇧V to distribute.

Press Esc or Enter, or click empty space twice, to stop editing points.

SVGs and text. Double-click an SVG in a design frame to expand it into a group of its shapes; double-click again to go into the group and once more on a shape to edit its points. (Right-click → Expand to shapes does the same.) To edit text as shapes, select it and choose right-click → Create outlines (⇧⌘O); the text becomes a path of its letters, in its colour, and stops being editable as text.

Pathfinder#

Select two or more objects in the same frame or group, or two or more shapes on the canvas, and a Pathfinder button appears in the toolbar beside the right sidebar. Click it and pick an operation from the menu that opens. Curves stay curves.

Objects can be shapes, paths, SVGs, text and groups: SVGs are expanded into their shapes, text is turned into outlines (its font has to be installed or bundled), and a group counts as everything vector inside it. Images can't be combined.

• Unite: merge them into one shape.
• Minus front: cut the shapes on top out of the bottom one.
• Minus back: cut the shapes below out of the top one.
• Intersect: keep only where they all overlap.
• Exclude: keep where they don't overlap.
• Divide: split them into a separate piece for every region they make.

Unite, Intersect, Exclude and Minus back take the top object's look; Minus front keeps the bottom one's; with Divide each piece takes the look of the topmost shape it came from. ⌘Z brings the originals back.

Separating the results. Divide puts its pieces in a group named Divide: ungroup it with ⌘⇧G to get each piece as its own object. A result in several separate parts (uniting two shapes that don't touch, say) is one path; select it and press ⌘⇧G, or right-click → Split into separate shapes, to make each part its own object. Holes stay with the shape they're cut out of.

Align, distribute and tidy up#

Select two or more layers in a design frame, or two or more frames on the canvas, and a toolbar appears beside the right sidebar:

• Align left, centre or right, top, middle or bottom, to the edges of the selection (⌥A, ⌥H, ⌥D, ⌥W, ⌥V, ⌥S). With a single layer selected the shortcuts align it to its frame or group.
• Distribute horizontal or vertical spacing, so three or more items have equal gaps between them (⌥⇧H, ⌥⇧V). The outermost two stay where they are.
• Tidy up (⌃⌥T) sorts the selection into the rows and columns it roughly sits in and lines it up on an even grid, using the spacing it mostly has now. Nothing is resized.

Layers that a flex layout places can't be moved this way; change the flex settings instead.

The scale tool#

Resizing normally changes only a box: text keeps its size, strokes stay as thick. The scale tool resizes everything about a layer or design together, so it looks the same, only bigger or smaller.

1. Press K, or click the scale tool in the left toolbar.
2. Select a layer (or several), a design frame, a block instance, or a shape on the canvas, and drag any of its handles. Proportions stay locked, and the opposite side stays put. ⌥ scales from the centre.
3. Text size and tracking, stroke widths, corner radii, shadows, flex gaps and padding, and everything inside groups scale with it. Scaling a design frame scales its layers, corners and flex layout as well, and a scaled block instance keeps following its block at its new scale.
4. Press V to go back to the select tool.

While the tool is on, SCALE at the top of the right panel scales by a number: pick the point to scale from in the small grid, then type a factor (2, 0.5 or 150%) and press Enter, or type the width or height you want.

Flex layout#

A flex group lays its layers out for you in a row or a column, so buttons grow with their label, lists keep their spacing, and reordering is a drag.

1. Select the layers to lay out and press Shift A (or right-click → Add flex layout). Ripen wraps them in a group named Flex, reading the direction and spacing off how they sit, so nothing jumps.
2. With nothing selected inside a design frame, Shift A gives the frame itself flex layout instead.
3. On a group you already have, click + next to FLEX LAYOUT in the right panel.

The FLEX LAYOUT section then has:

• Direction: horizontal or vertical, and Wrap to start a new line when a row runs out of room.
• Align: the 3 × 3 grid places the items, left to right and top to bottom.
• The gap between items, or Auto (the button beside it) to spread them out with equal space between. With wrapping on, a second field sets the gap between lines.
• Padding on each side (left, top, right, bottom).
• Clip content hides anything that spills outside the group.

A flex group has its own fills, strokes, corner radius and shadows, drawn as a box behind its layers, so a button is one group: its background and its label.

Sizing: Fixed, Hug and Fill. Next to the W and H fields of any layer, a small menu sets how it's sized on that axis:

• Fixed width / Fixed height: the size you type. Typing a size switches to fixed.
• Hug contents: as big as what's inside it. For flex groups and design frames with flex layout; for text it's auto width (hug both) or auto height (fixed width, hug height).
• Fill container: inside a flex layout, takes the space that's left on the main axis (shared between everything set to fill), or the full row height or column width. Choosing it on an axis where the container hugs makes the container fixed there. Wrapping text set to fill grows taller or shorter as its width changes.
• Add min width / Add max width (and height): limits that hug and fill respect. A min and max row appears under the field; click − to remove one. With wrapping on, give fill layers a min width: that's what decides how many fit on a line, and each line then fills.

Ignore flex layout. Tick it under IN FLEX LAYOUT to place a layer freely on top, such as a badge in a corner; it then follows its constraints when the group resizes. Hidden layers take no space.

Reorder by dragging a layer past its neighbours, or by moving it in the layers panel. ⌥ Shift A (or Remove flex layout) takes flex layout off and leaves everything where it is.

Constraints#

Constraints decide what a layer does when its design frame is resized: stay put, stick to the far edge, stretch, stay centred or scale.

1. Select a layer that sits directly in a design frame (or one set to Ignore flex layout in a flex group).
2. In CONSTRAINTS, pick the horizontal and vertical behaviour from the menus: Left, Right, Left and right, Centre or Scale (and the same from top to bottom).
3. Or click the sides of the small diagram to pin them. Shift-click the opposite side to pin both, which stretches the layer; click a centre line to centre it.

Groups scale their contents when resized. To have a group behave like a frame instead, select it and set GROUP → When resized to Use constraints; its layers then show their own constraints. Frames imported from Figma are set up this way.

Resize the frame and the layers follow. Constraints apply to block instances too: resize an instance and the block lays itself out at the new size, with its flex layout as well. A block placed inside another design can do the same; set its Resize option to Resize.

Clipping masks#

1. Arrange the shape you want to clip with at the bottom, and the content above it.
2. Select them all (two or more layers in a design frame, or images and shapes on the canvas).
3. Right-click → Use as mask, or press ⌃⌘M. The bottom layer becomes the mask, and everything is grouped as Mask group.
4. To undo it, select the group and choose Release mask.

Blocks: reusable designs#

A block is a design you reuse in many places. Instances follow the main block when you change it.

1. Right-click a design frame → Create block (⌥⌘K).
2. Right-click the block → Create instance (⌥⌘K again). The instance appears beside it. Duplicating a main block (the Duplicate button, ⌥-drag, or copy and paste) also makes an instance.
3. Drag an instance into another design frame to place it there.
4. Edit the main block; every instance updates.

• Or drag a block from the Library onto the canvas or into a design frame, from any page.
• A main block has a four-diamond icon before its name on the canvas; an instance has a single diamond.
• Changing an instance: click a layer inside it to pick it; the layer panel edits its fill, stroke, shadows, opacity, corner radius, text and type, and visibility (double-click text to edit it in place). Position and size follow the main. Changed layers show Reset changes, and Reset all in the instance's panel drops every change.
• Drag an instance's corner to resize it on its own; its layers keep their places. Until then it follows the main's size.
• Right-click an instance (or a block placed in a design): Go to main block jumps to the source, opening its page if it's on another one. Detach instance turns it into ordinary layers. Remove block frees all of a block's instances.
• A block placed inside a design can Crop or Scale to fit its box.
• Name blocks with slashes (Button/Primary) to file them in folders in the Library.

Block properties and variants#

Properties are a block's variables: values each instance sets for itself, shown like an app's controls. Each is linked to layers inside the main block:

• Text: the words of text layers (a button's label).
• Boolean: whether layers show (an icon you can turn off).
• Fill: layers' fills, solid colours, gradients or images (a badge's background).
• Instance swap: which block a block placed inside it shows (the icon in a button). You can mark some blocks Preferred so they're offered first.

1. Select the main block. Under PROPERTIES, click + and pick a kind to add a property with a default value. Or start from a layer: select it and click the hexagon at the right of its heading (LAYER for visibility, TYPE for text, FILLS for its fill, BLOCK on a block placed inside). That makes a property named after the layer.
2. Link more layers to a property from the same hexagon: it offers the block's properties of that kind. A linked layer takes the property's value. Click a linked property's name on a heading to switch or unlink it.
3. On the main block, rename properties, remove them, or change their value. The main's value is every instance's starting value.
4. Select an instance. Its PROPERTIES section shows each property; change one for just that instance, and Reset goes back to the main's value.
5. Nested blocks: on a main block, tick a block placed inside it under NESTED BLOCKS, and its properties show on this block's instances too.

Variants are versions of a block: State = Default or Hover, Size = Small or Large.

1. Right-click a main block → Add variant (or click Add variant in its panel). A copy appears below it, and the two form a variant set, drawn with a dashed border in your theme's accent colour and the set's name (with the block icon) above it. Inside the set, variants have no labels of their own. Select one to see its value (Hover) above it, which you can drag to move it or double-click to rename. The Layers panel shows the set as one row with its variants under it, each by its value.
2. Selecting in a set: a click on a variant selects the variant itself, so it's easy to pick even when its content covers it. Click again to pick a layer inside it, or double-click to go straight to one (⌘-click picks the deepest layer). Click the set's name or the empty space between its variants to select the whole set and drag it.
3. Resizing a set: with the set selected, drag a corner or edge of its dashed border to give its variants more room. It always fits its variants; double-click a handle to fit it to them again.
4. Renaming a variant (on the canvas or in the Layers panel) shows its full name, like State=Hover. Change the value to change the variant (State=Pressed), or add a pair (State=Hover, Size=Large) to give the set a new variant property.
5. Edit the copy to look the way that variant should, and pick its values from the dropdowns in its panel under VARIANT (or choose New value… to type one).
6. Click the set's name on the canvas to select the whole set; drag the name to move it. The set's panel lists its variant properties, each with its values (State · Default, Hover). Click one to edit it in a flyout: rename it, rename its values (in every variant at once) or move it up or down. + adds a variant property, − removes one, and Add variant adds a variant.
7. On an instance, pick values from the variant dropdowns at the top of PROPERTIES to switch it. It keeps its property values when it switches.

The Library shows a variant set as one item; dragging it out gives an instance of its first variant. Figma component sets and component properties come in this way automatically (see Import from Figma).

The Director, the Production Designer and design edits know your blocks: ask for “the Card block with the badge hidden” or “switch these buttons to the Small variant” and they set the properties and pick variants by name instead of redrawing.

Agents make blocks too. Ask the Director for components (“a button component with default, hover and disabled states”, “a small design system: button, input and card”) and it plans each as a block. The block's design names its properties (its label, an optional icon, its fill), and each state becomes a variant in one set. A variant starts as a copy of the finished block and keeps its layers and property names, so instances keep their values when they switch. Screens in the same plan can then place those blocks. On a block that's already there, ask for “add a hover variant of @Button”.

Production Designer: one design, many formats#

1. Select a finished design and click Production Designer under it.
2. Describe the formats you need: “An Instagram story, an X banner and a YouTube thumbnail.”
3. The Director plans the set. Click Build it.
4. Each new frame starts from your design's layers and is re-laid out for its size.

Block layers in the design can switch variant or change their properties per format (“use the compact button on the story”). Ask for “on a new page called Campaign” to put the whole set on its own page.

Web apps inside designs#

Use a still of a running app in a design, for mockups and app-store shots.

1. Drag an app frame onto a design frame. A still of the app is placed as a layer; the app itself stays on the canvas.
2. Select that layer. Under Moment, scrub to the moment you want and click Use this moment.
3. Or click Play & freeze, use the app, then Freeze when it looks right.
4. Earlier stills are kept under Snapshots; click one to switch back.

When the app's code changes, its stills re-render automatically.

Exporting designs and objects#

Designs, layers, images, generated images and vectors, shapes, documents, text, palettes, font chips, moodboards and bundles all have an EXPORT section in their panel.

1. Select the object and press + in EXPORT to add a row.
2. Set the size: a scale like 2x, or a width or height like 512w / 512h.
3. Pick a format: PNG, JPEG, SVG or PDF. Use … to add a filename suffix such as @2x.
4. Add more rows for more sizes, then click Export. One file asks where to save; several ask for a folder.

Rows are saved with the object, so re-exporting is one click. Images export at their original quality.

Image frames#

Drop, paste or upload an image (+ → Image). Its toolbar has Replace image, Duplicate, Delete, and Convert to Image Gen frame to start editing it with AI.

Generate images#

1. Add an Image Gen frame and select it.
2. Pick an image model under the prompt: local models such as Z Image Turbo or FLUX.2 Klein, or cloud models from OpenAI, Google or OpenRouter once those are connected.
3. Choose a Size (512, 768 or 1024 px, square).
4. Describe the image and send.
5. To refine it, send another prompt (Describe edits to this image…). The current image is used as the starting point.

• To guide it with references, attach images to the prompt (button, paste or drag). @-mentioned frames aren't used here.
• Download image saves it; Flatten to image makes a plain image copy you can drop into designs.

Generate vectors (SVG)#

Vector Gen frames use QuiverAI's Arrow models to make clean SVG artwork: logos, icons, illustrations.

1. Add a QuiverAI key: Settings → Providers → QuiverAI → Connect, paste the key, save & test.
2. Add a Vector Gen frame and select it.
3. Describe the artwork and send. Follow-up prompts edit the same SVG.
4. @-mention images or other vectors as references, and pick a moodboard to steer the style.

• Explode into layers makes a design frame with one editable layer per shape.
• Convert to vector layer places it on the canvas as a shape you can use anywhere.
• Download SVG and Copy SVG markup take it elsewhere. The model picker shows your remaining credits.

SVGs and drawn shapes#

• Dropped or pasted SVGs become shapes on the canvas. Double-click one (or use Explode into layers) to split it into a design frame of editable layers.
• Shapes, text and groups you draw can be @-mentioned anywhere; Ripen turns them into SVG, so an app uses your actual artwork.

Documents#

1. Add a Document frame. Select it and type (Start typing…).
2. To have a model edit it, type an instruction in the prompt box (Edit document…): “Tighten this to 150 words and make it friendlier.”
3. Undo any AI edit with Version history → Restore.

A document behaves like a page: zoomed out, it shrinks like a thumbnail of the page. If you select one that's too small to read, click Zoom to edit to zoom to reading size.

The corner switchers set the font (Sans, Serif, Italic) and weight, and Fullscreen gives you room to write. @-mention a document to use its text as a brief for apps and designs.

Text labels#

+ → Text adds a borderless label for annotating the canvas. Double-click to edit; ⌘Enter finishes and Esc cancels. Style it in the right panel.

Palettes#

1. Add a Palette frame. It starts with three swatches.
2. Click a swatch to change its colour. Click the dashed + tile to add one; hover a swatch for Remove swatch.
3. In the right panel, under SWATCHES, type exact hex values and give each a role name (like “accent” or “ink”).

Hover a swatch and click its copy icon to copy the hex. @-mention a palette to give a model its exact colours.

Font chips#

1. Drag a font file (.ttf, .otf, .woff, .woff2) onto the canvas. It becomes a chip with a big “Aa” sample.
2. In the right panel, adjust Category (sans, serif, mono, display) if needed, or switch Family to an installed font.

Font chips appear first in font pickers for moodboards, tagged Canvas.

Asset bundles#

A bundle groups images you want used together, such as product shots or logo variants.

1. Add an Asset bundle frame.
2. Drop images onto it, or pick existing image frames with Add in its panel.
3. Link the bundle to a moodboard so designs can place its images.

Moodboards#

A moodboard ties a palette, fonts, imagery and written rules into one design direction.

1. Add a Moodboard frame and select it.
2. Under PALETTE, choose a palette frame as the Source. Each colour is shown as a full tonal ramp.
3. Under TYPOGRAPHY, set fonts for roles like title and body; add more roles with + Add slot….
4. Under BUNDLES, add asset bundles.
5. Under RULES, write up to 500 characters of direction: “Generous whitespace, no gradients, photos always full-bleed.”
6. Apply it with the Moodboard pill in the prompt box, or by @-mentioning it.

Refining your rules

Have a longer brand document? Click Refine rules, paste it into Draft, click Refine, and Accept the shortened version that keeps every actionable rule.

Open a project#

1. Click + → Project. A blank project frame appears.
2. Click Choose folder… and pick the project's folder, or bring one in with or import.
3. The first time, Ripen asks Run this project?: it will run the folder's own scripts, as a terminal would. Click Trust and open only for code you trust.
4. Click Start. If the project's dependencies aren't installed yet, Ripen installs them first, then starts it.
5. The dev server starts (you'll see its log) and the site appears in the frame. The dot by the name turns green.

Ripen detects the framework, package manager (npm, pnpm, yarn or bun) and dev command for you. Change the command in the panel if needed.

Turn a web app frame into a project#

1. Select the app frame and click Export… → Open as a project folder….
2. Choose where to create it and click Create here.
3. Ripen writes a Vite + React + TypeScript project, creates a git repository with a first commit, installs dependencies and starts it.
4. The new project frame appears beside the app, ready for git and deploys.

Import from MagicPath#

Bring frames from a MagicPath project onto your canvas. Each frame becomes its own project frame: a small app in its own folder that you can run, edit with prompts, commit and deploy.

1. On Home, click Import → MagicPath project… to bring a project onto a new canvas named after it. On a canvas, add a project frame (+ → Project) and click MagicPath under or import; the frames take its place.
2. The first time, click Sign in to MagicPath and approve Ripen in your browser.
3. Pick a project on the left. Every frame is selected; untick any you don't want, or use the filter.
4. Check the folder at the bottom (it defaults to Documents/MagicPath/<project>), or click Change….
5. Click Import N frames. Each frame is downloaded into its own folder and placed on the canvas at its MagicPath size, showing MagicPath's preview.
6. Ripen installs the packages for every imported frame once, in the import folder, in the background. Select a frame to start it. If you select one before that install finishes, it shows Installing packages… and starts as soon as it's done.

To bring in just a few frames, select them on your MagicPath canvas, then click Import MagicPath selection. Importing a frame again makes a new folder rather than overwriting the first.

Import into a project frame#

A blank project frame offers or import under Choose folder…. Pick where the project comes from:

• GitHub: paste a repository link or owner/repo, click Clone… and choose a folder. Private repositories use git's own sign-in.
• Vercel or Netlify: pick a project or site connected to a GitHub repository. Ripen clones the repository and links it for deploys. Connect the host in Settings → Integrations first.
• MagicPath: see Import from MagicPath.
• Figma or Paper: see Import a Figma or Paper selection. Paper also works without Paper Desktop: sign in once and paste a Paper file link.

Import a Figma or Paper selection#

Bring frames from the Figma desktop app or Paper Desktop in as runnable apps. Each selected frame becomes its own project frame with the React and Tailwind code the design tool generates for it.

1. In Figma's desktop app, open the design, switch to Dev Mode and turn on the desktop MCP server. Paper Desktop needs nothing extra; just have it open.
2. Select the frames you want in Figma or Paper.
3. In Ripen, add a project frame (+ → Project) and click Figma or Paper under or import.
4. Check the selection and the folder (it defaults to Documents/Figma or Documents/Paper), then click Import N frames.
5. Each frame is written into its own folder, with any images it uses, and placed at its size with a picture of the design. Packages install once for the whole import; select a frame to run it.

Paper without Paper Desktop

1. Click Paper under or import on a blank project frame.
2. The first time, click Sign in to Paper and sign in in the window Ripen opens. Ripen keeps the session on your Mac.
3. Paste a link to a Paper file and click Open file. Its frames are listed and selected; untick any you don't want.
4. Click Import N frames. Each frame comes in as its own project frame.

The project frame and its toolbar#

• Status dot: green running, amber starting, red error, grey stopped.
• Start dev server / Stop dev server and Reload page.
• Device motion: tilt and shake the page like a phone (see Tilt and shake an app).
• Breakpoint menu, the same as app frames.
• Show local dev server / Show deployed preview to switch between your Mac and the live site.
• Open in browser, keep live, Explode into views, Duplicate as a variation (see Variations) and Remove from canvas (your files stay on disk).

To show a different page, set Route in the panel's DEV SERVER section (e.g. /pricing) and press Enter.

Edit a project with prompts#

1. Select the project frame and describe a change in the prompt box.
2. The model reads the project's files, along with any errors the dev server or the page is showing, and writes its edits straight away. The page reloads; when the edit fixes errors or needs new packages, Ripen restarts the dev server (installing the packages first).
3. Keep going: each prompt builds on the last. The panel's LAST EDIT shows what changed, file by file; Undo puts the files back, one edit at a time.
4. When you're happy, commit (see Git and GitHub).

• @-mention images, SVGs or shapes and the ones used are copied into the project (e.g. public/ripen/) as part of the change.
• Images attached to the prompt are references only.
• Art Director works here too: click the Art director pill under the frame, click elements on the page, describe changes and Submit. The edit is written like any prompt's.
• With nothing selected, the Director can plan edits to a project on the canvas by name.

Git and GitHub#

The panel's GIT section covers the everyday steps. It uses your Mac's own git setup and credentials.

1. Not a repository yet? Click Initialize repository (it adds a .gitignore and a first commit).
2. The agent's edits are listed under the branch name. Type a Commit message and click Commit.
3. No remote yet? Click New GitHub repo…, create an empty repository (no README), paste its URL and click Connect.
4. Click Push.

To work on a branch, type a name next to New branch and click it; Ripen creates it and switches to it.

Try variations of a project#

Duplicating a project frame makes a variation: a separate copy with its own folder, dev server and history, so you can take it in a different direction and keep the original as it is. It works like duplicating a web app frame.

1. Select a project frame and click Duplicate as a variation in its toolbar. ⌥-dragging the frame, copying and pasting it, or dragging it out of the Library does the same.
2. Ripen makes a folder next to the original, named like my-app-variation-2, on a new git branch, ripen/my-app-variation-2. It starts from what the original shows now, including changes you haven't committed. Your .env files and deploy links come along; on a Mac, so do the installed packages, without using more disk.
3. If the original's dev server is running, the variation's starts too. Prompt it like any project frame.
4. Every edit in a variation is saved as a commit on its branch. The panel's HISTORY lists them; click the arrow next to one to bring that version back (as a new version, so nothing is lost).
5. Like where a variation went? Click Use in original to merge it into the original folder's branch. If the original has changes that aren't committed, Ripen offers to commit them first. If both changed the same lines, nothing is merged and Ripen tells you which files.
6. Done with one? Discard deletes its folder. Its branch stays in the repository.

• Make variations of variations: each starts from where the one you duplicated is now.
• A variation needs git. If the folder isn't a repository yet, Ripen offers to set one up with a first commit; your files stay as they are.
• Your own branches are never committed to automatically. Only variation branches (ripen/…) are.
• Push a variation from its GIT section to get its own preview deploy on Vercel or Netlify.
• Ask for variations. With nothing selected, ask the Director for options ("try three takes on the pricing page in Shop") and it makes a variation for each and edits them, leaving the original as it is. An agent editing a variation knows its edits stay in that copy. Agents connected through the Ripen MCP server can make variations too.
• Sharing. When you save a canvas as a .ripen file and tick Include project folders, variations go in with the original's repository. Whoever opens the file gets the original and each variation as before, with their branches, history and uncommitted changes, and Use in original still works.

Explode a project into its pages#

1. Select a running project frame and click Explode into views.
2. Ripen reads the project's routes (Next.js, SvelteKit, Astro, Nuxt, Remix, React Router including hash routers) and adds a frame per page, all on the same dev server.
3. Edit from any page. When an edit is written, the views it changed flash and reload. A view is touched when its page or screen's file, or anything that file imports, changes; a change to code no view owns (the app shell, global styles) touches them all.
4. Collapse on the original folds them back.

Lines between views. The lines follow how the pages link to each other: a Services page that links to each service gets a line to each of those views. Ripen reads each page's own code for links, leaving out parts every page shares (like the nav bar), so the lines show the paths through the app. A view no page links to keeps its line from the original frame.

Jump between views. In an exploded project, clicks work as in the real app: links and buttons navigate inside the view you clicked, keeping what you've typed or added along the way. ⌥-click a link to a page another view shows (the nav bar's Services, a Contact button) to glide the canvas to that view instead and select it. That view reloads as it opens, so it shows anything the app saved in the browser; data the app only keeps in memory (an unsaved cart, a half-filled form) stays with the view you clicked in. ⌥-clicking a link no other view shows navigates in place as usual.

Pages with dynamic segments (like /blog/[id]) are skipped.

Apps without URLs. Many prototypes move between screens with React state instead of routes (a step that goes from "landing" to "cart" to "checkout"). Ripen finds that state in the code and adds a view per screen: each one loads the app and switches it to its screen, shown as Screen in the right panel. Number steps (useState(0)) and in-app routers (MemoryRouter, under the screen that shows them) work too. A screen that expects data from earlier steps (an address, a signed-in user) shows what the app has without it.

Add view from this screen. However an app picks its screens, you can save one: click through a running project or view until it shows what you want, then click Add view from this screen in its toolbar (or right-click it). The new view remembers the address, any in-app route and the page's simple state (steps, toggles, typed text) and reopens on that screen, named after its heading. It works before or after exploding.

When the folder isn't found#

If a project's folder has moved, or the canvas came from another computer, the frame shows Project folder not found.

• Locate folder… points it at your copy.
• Clone… (when the project had a git remote) clones what's been pushed.

Projects can ask for the camera or microphone too; Ripen asks once per project folder. Manage them in Settings → Privacy.

Connect Vercel or Netlify#

1. Create a personal access token: on Vercel at vercel.com/account/tokens, on Netlify in User settings → Applications.
2. In Ripen, open Settings → Integrations and click Vercel or Netlify under Deploy.
3. Paste the token and click Connect. It's stored encrypted on your Mac.

Link a project or site#

1. Select the project frame. In the panel's DEPLOY section, click Deploy with Vercel or Deploy with Netlify.
2. On New project / New site, enter a name and click Create and link. Or use Existing project / Existing site to search and pick one you have.
3. On Vercel, if the folder has a GitHub remote, leave Connect the GitHub repo on so every push deploys (branches get preview URLs).

Netlify sites are built on your Mac with the project's build script, and only changed files are uploaded.

Deploy, preview and roll back#

1. Click Deploy for production, or Preview for a separate URL to share. Progress shows as it uploads and builds; uncommitted changes are included.
2. Watch it in the deployment list: Queued, Building, then Ready or Failed.
3. Click a deployment to open it: Show in frame, Open, and its build log.
4. To roll back or go live with a preview, click Promote (Vercel) or Publish (Netlify) on that deployment; nothing is rebuilt.

• Vercel also has Redeploy, and running deploys can be cancelled.
• Show deployed preview in the frame's toolbar shows the live site in the frame.
• Unlinking leaves the Vercel project or Netlify site and its deployments in place. .env files are never uploaded.

Local models#

1. Open Settings → Local models.
2. Click Install on a model to download it, or Remove to delete it from disk.
3. For any other Ollama model, go to Settings → Providers → This computer, open All local, type its name and click pull.

Ripen unloads a local model 15 seconds after its last use, or as soon as you switch models, so memory is free for other work. Watch usage in the queue's System RAM meter.

Connect a cloud provider#

Supported: OpenAI, Anthropic, Google Gemini, OpenRouter, Ollama Cloud, and QuiverAI for vectors.

1. Get an API key from the provider's site.
2. Open Settings → Providers and click the provider's tile.
3. Click Connect, paste the key, optionally click test, then connect. Keys are stored encrypted on your Mac.
4. Under Models, switch on the ones you want in the picker. Click refresh to list everything your key can use.

• Ripen re-checks every few hours. Newer versions of models you use are added automatically and marked New; retired models are hidden.
• Models are grouped into Text, Image generation and Other. Vision marks models that read images.
• Manage a key with Replace key or Remove, or add a second with Add another key.

Use another Mac with Ripen Companion#

Ripen Companion is a free menu-bar app that lets Ripen run models on another Mac on your network, such as a Mac Studio in the other room.

1. Install and open Ripen Companion on the other Mac. It starts Ollama there and waits in the menu bar.
2. Use its menu → Manage models… to install models on that Mac.
3. In Ripen, open Settings → Providers → Local network → Discover on LAN.
4. Click the Mac that's found. The Companion's menu bar shows a 6-digit code.
5. Type the code and click pair.

Its models now appear in the picker. Revoke a device any time from the Companion's Paired devices menu. Nothing found? Make sure both Macs are on the same network and allow the firewall prompt on the Companion Mac.

Custom servers#

Settings → Providers → Custom servers connects self-hosted or third-party endpoints:

• Add Ollama URL for Ollama on another box (add its MAC address to wake it with Wake-on-LAN).
• Add OpenAI-compatible for vLLM, LM Studio, llama.cpp, Together, Groq, Fireworks and similar.

Each connection has a Generations at once limit; calibrate measures its speed.

Use and write tools#

1. Open Settings → Tools.
2. Start from an example under Examples (List Frames, Find Frames, Brand Guidelines) with Add, or click + New tool.
3. Fill in a name (used as /name), a description for the model, its parameters, and a JavaScript handler that returns text. Click Test to run it against the open canvas, then Save.
4. Run it from the prompt box by typing /name. What it returns goes with your next prompt.
5. Turn on Expose to model so the Director can call it while planning (nothing selected). Only expose tools that read, never ones that change things.

Handlers can use await and fetch. They run in an isolated page with no access to Ripen's files or keys, and stop after 30 seconds. Import and Export share tools as JSON.

How it works#

Ripen runs a small MCP server on your Mac. An agent that speaks MCP connects to it and gets a set of tools for reading and changing your canvases. The agent does the thinking; Ripen does the drawing, the running and the saving.

• No API key needed. With Claude Code or the Claude desktop app, the agent runs on your Claude plan (Pro or Max); with ChatGPT or Codex, on your ChatGPT plan. Ripen's own agents and models stay as you set them up.
• Your canvas, live. Every change lands on the canvas as the agent makes it. A cursor with the agent's name shows where it's working, and ⌘Z undoes its changes like your own.
• Same building blocks. Designs use the same layers Ripen's own agents use, so flex layout, constraints, paths and blocks all work.
• Your code stays with the agent. In a project, the agent edits the files in your folder as it normally would; Ripen shows the running app beside your designs.

Connect Claude Code#

1. Open Ripen, then Settings → Integrations. Under Coding agents, check Ripen MCP server is on, then click Claude Code.
2. Click Copy Claude Code command. It looks like claude mcp add --transport http ripen http://127.0.0.1:38771/mcp --header "Authorization: Bearer …".
3. Paste it into your terminal and run it. With Use Ripen from every folder ticked (the default), the command includes --scope user and Ripen works in Claude Code wherever you start it. Untick it to add Ripen only for the folder you run the command in.
4. Start Claude Code (claude) and type /mcp. ripen should be listed as connected.
5. Ask for something, for example “In Ripen, make a 1080 × 1350 poster for a jazz night.”

Claude Code asks before it uses each Ripen tool the first time. To stop the prompts for Ripen, choose the option to always allow, or add mcp__ripen to the allowed tools in Claude Code's /permissions.

Connect ChatGPT and Codex#

The ChatGPT desktop app and Codex (the command-line tool and its editor extension) share one setup, and Ripen can add it for you.

1. In Ripen, open Settings → Integrations and click ChatGPT & Codex.
2. Click Add Ripen to ChatGPT & Codex. Ripen adds its server and a Ripen plugin to ~/.codex/config.toml, and keeps your config as it was in config.toml.before-ripen.
3. Quit and reopen the ChatGPT app (or start a new Codex session).
4. Ask for something, for example “In Ripen, make a 1080 × 1350 poster for a jazz night.” The Ripen plugin also adds four skills: ripen:design, ripen:open-project, ripen:critique and ripen:build-design, the same as the slash commands in Claude Code.

If you make a new token in Ripen, it updates this setup for you. Remove takes out everything Ripen added. Prefer to do it by hand? Copy config.toml lines instead gives you the server lines to paste.

Connect the Claude desktop app, Cursor and others#

1. Claude desktop app. In Ripen's Integrations, click Claude desktop app, then Copy Claude desktop config. In Claude, open Settings → Developer → Edit Config, paste it into claude_desktop_config.json (merge it with any mcpServers already there) and restart Claude. It needs Node installed, since it uses mcp-remote to reach Ripen.
2. Cursor and other agents. Click Cursor and others, then Copy JSON, and add it to the agent's MCP settings (for Cursor, ~/.cursor/mcp.json). Any agent that supports MCP servers over HTTP with a header works the same way.

Each agent's tile shows how its setup looks, and Check again on its page says what Ripen found:

• Connected: the app has connected to Ripen (with when). This is the real test, and it works however you added Ripen, even in a project's own config.
• Added: Ripen is in the app's config file, but the app hasn't connected yet. Restart it (in Cursor, check Ripen is switched on in its MCP settings).
• Check its setup: Ripen is in the file but not directly under mcpServers, often because it was pasted inside an existing mcpServers. Keep just the "ripen" entry there.
• Uses an old token: it was set up before a New token. Copy the setup again.

Custom connectors added on claude.ai run in the cloud and can't reach a server on your Mac, so use the desktop config above instead.

Ripen's slash commands#

Ripen adds ready-made commands to Claude Code. Type /ripen to see them; Claude Code lists them as /ripen:design and so on (the longer /mcp__ripen__design form works too). Each one starts a task, and the agent asks you for anything it needs.

You don't need the commands: asking in your own words works just as well. They're a quick start, and a way to find what Ripen can do.

Your first session#

Talk to the agent the way you'd talk to a designer sitting beside you. A few prompts to start with:

• “What's on my Ripen canvas?” The agent lists the frames and pages.
• “Make a new Ripen canvas called Launch and design three Instagram posts for the launch, then show me.”
• “Look at the Pricing design and make the cards a flex row with 24 px gaps.”
• “Turn the button in Card into a block with a Label property, then place three instances with different labels.”
• “Put the logo at ~/Brand/logo.svg and the photos in ~/Brand/photos on the canvas and make a moodboard from them.”
• “Export the poster as a 2x PNG and a PDF to ~/Desktop.”

Before it designs, the agent reads Ripen's design guide (get_design_guide) once, and it takes a picture of its work (get_frame_image) to check it. If something looks off, tell it what to change, or fix it by hand; it reads the frame again before its next edit.

Open a project from Claude Code#

Working on a web project with Claude Code? Ripen can show it running on a canvas, next to your designs, while you work.

1. In your terminal, open Claude Code in the project's folder (with Ripen connected, above).
2. Ask it to “open this project in Ripen on a new canvas”. It adds a project frame for the folder, on a new canvas if you asked, and starts the dev server.
3. The first time Ripen sees a folder, it won't run it until you trust it. The agent will ask you to click Trust and open on the frame, then starts it.
4. Keep working in Claude Code. The frame reloads as files change. The agent can read the dev server's log to fix build errors, take a picture of the frame to check a change, or make a variation to try an idea on its own branch.

The agent can pass a different dev command or route if Ripen's guess from package.json isn't right. A good loop is: design a screen in Ripen with the agent, then ask it to build that design in the project and compare the two side by side.

Tool reference#

You don't call these yourself; the agent picks them. Knowing what's there helps you ask for things it can do. Frames, layers, pages and versions are named by the ids the agent reads from list_frames and get_frame.

Canvases and pages

Frames

Designs

Images and long paths in a design reach the agent as short tokens such as <image:3f2a…>. It passes them back unchanged, so the real image or path comes back intact and conversations stay small.

Blocks

Assets

Web apps and documents

Local projects

Export and generation

Tips#

• Name things. Frames and layers with clear names (Hero, CTA button) are easier for you to ask about and for the agent to find.
• Ask it to look. “Check it with a picture and fix anything that overlaps” gets a second pass with the agent's own eyes.
• Use blocks and flex layout. Asking for “a flex row of cards” or “a button block with a Label property” gives you designs you can keep editing by hand.
• Mix agents. Ripen's own agents, the Director and Claude Code can all work on the same canvas. Each shows its own cursor.
• Undo. ⌘Z in Ripen undoes the agent's changes. Web apps and documents also keep versions you or the agent can restore.

Privacy and access#

• The server only listens on your Mac (127.0.0.1) and only answers apps that send the access token in the copied setup. Keep the token to yourself.
• New token in Settings disconnects every agent set up with the old one. Turning the switch off stops the server.
• Agents can read image, SVG and font files you point them to, and write exports to a folder you name. They don't get any other access to your files through Ripen.
• A project folder never runs until you've trusted it in Ripen. An agent can't trust a folder for you.
• What the agent sends and receives goes through its own service (Anthropic for Claude, OpenAI for ChatGPT and Codex) under that service's terms. Ripen sends nothing anywhere itself.

Use Ollama models with Ripen's MCP#

Ollama's own chat can't connect to MCP servers, but Ollama can run Claude Code or ChatGPT's Codex mode on an Ollama model, local or cloud, and those connect to Ripen as usual.

1. Install Ollama and sign in if you want cloud models.
2. In the Ollama app, open Apps and click Connect next to Claude Code or ChatGPT. (From a terminal, ollama launch claude --model gpt-oss:120b-cloud does the same for Claude Code.) Pick a model that supports tools.
3. Add Ripen to that app from Ripen's Settings → Integrations: Claude Code or ChatGPT & Codex, as above.
4. Ask it to design something in Ripen. Its tile in Ripen's Integrations shows Connected once it has reached Ripen.

General#

Web search#

Agents can look things up on the web before they work: current library versions and docs, real brands and products, recent events. It's off by default, because search queries leave your Mac even when you use a local model.

1. Turn it on in Settings → General → Web search. The first time an agent would have searched while it's off, Ripen also offers to turn it on, once.
2. Pick the service. Auto uses Claude's own search for Claude models (billed to your Anthropic key, $10 per 1,000 searches) and Ollama's web search for every other model, including local ones (it needs an Ollama Cloud key, added in Providers). Claude's search or Ollama prefers one, and falls back to the other when it can't be used.
3. Prompt as usual. When a request needs it, the Director (and Production Designer), app, project and document agents search first. A panel at the bottom of the canvas shows what's being looked up, then lists the pages used; click one to open it.

• Agents only search when it helps. Everyday design and code work runs without searching.
• Fixes, frames a Director plan builds, and small helper calls never search, so one prompt doesn't turn into many searches.
• If searching fails, the agent carries on without it and Ripen tells you why.
• Claude's search can be turned off for your whole Anthropic organization in the Claude Console. Ripen says so when it is.

Privacy#

Lists every app frame and project folder that has asked for the camera, microphone or screen. Click a chip like Camera · Allowed to flip it, Forget to make it ask again, or Forget all for every app frame.

Object picker#

Chooses the up to six tools in the double-click menu, from every frame type (including Palette, Asset bundle, Moodboard and Project) and the shapes. Use Add to picker, Move up, Move down and Remove.

Integrations#

Settings → Integrations connects coding agents, the design tools you import from and the hosts you deploy to. Each tile shows whether it's connected; click it for details.

• MagicPath: sign in with your MagicPath account.
• Figma: paste a personal access token (Figma → Settings → Security → Personal access tokens, with read access to file content) to import files, and check whether the desktop app's MCP server is answering for selections.
• Paper: sign in to import from Paper file links, and see whether Paper Desktop is open for importing its selection.
• Vercel and Netlify: see Connect Vercel or Netlify.

Tokens are stored encrypted on your Mac.

Coding agents (MCP)#

Under Integrations → Coding agents: turn Ripen's MCP server on or off, make a New token to disconnect agents, and pick an agent (Claude Code, the Claude desktop app, ChatGPT & Codex, or Cursor and others) for its setup. See Coding agents and MCP.

Providers, Local models and Tools#

See Cloud providers, Ripen Companion, Local models and Tools.

Export a canvas#

1. In the sidebar, open the CURRENT CANVAS menu → Export (.ripen), or on Home right-click a canvas → Export as .ripen….
2. If the canvas has project frames, Ripen lists what won't come along (uncommitted changes, unpushed commits) and offers Include project folders. It's off by default to keep files small.
3. Choose where to save.

The file holds every frame and image. Select several canvases on Home to export them all at once. Font files are never included (for licensing), but font chips keep a vector sample.

Import a canvas#

• On Home, click Import → Ripen canvas (.ripen)…, or drop .ripen files on the page.
• Or use the CURRENT CANVAS menu → Import (.ripen) to open one right away.
• If it includes project folders, choose where to put them (Choose Folder…). Ripen still asks before running their code.

Fonts and Google Fonts#

Every font installed on your Mac works in Ripen, and so does every Google Fonts family (about 1,900), with nothing to install.

• Font pickers list your installed fonts and the Google ones together; Google families are tagged Google. Each row shows the font in its own face.
• Name any of them in a prompt (“set the headline in Fraunces”) and the model uses it, in designs and in apps.
• Ripen loads a Google font the first time something uses it; after that it's kept, so it keeps working offline. A Google font you also have installed is used as installed.
• Apps that use a Google font get its stylesheet automatically, including when you export them as HTML or as a project.
• Google fonts never show as missing, so a canvas using them opens the same on any Mac.

Missing fonts#

When a canvas uses fonts you don't have, a panel at the top right of the canvas lists them. Type in a font's field to search your installed fonts (each shown in its own typeface, similar ones first) and pick an alternative, or keep it as is. The original font names are kept, so installing the real font later restores it automatically.

Pick or make a theme#

1. Click the theme name at the bottom of the left sidebar.
2. Pick a built-in theme: Plum (default), Blue moon, Dark galaxy, Forest, Neutral dark, Glacier, Neutral light, Retro warm or Retro neutral. Neutral light is a plain grey, high-contrast light theme, with every text colour meeting WCAG AA contrast.
3. To make your own, click New theme. It copies the current theme and opens the Theme Editor.
4. Name it, choose Dark or Light, and use Harmony (base colour, hue, saturation, lightness, contrast, noise) or set each colour individually.
5. Turn on Reveal mode (magnifier) and hover any part of the app to see which colour it uses.

Export copies the theme as JSON to share; Import loads one. ⌘Z undoes theme edits while the editor is open.

Updates#

Ripen checks for updates at launch and every hour, and downloads them in the background. When one is ready, a card appears at the bottom left: open What's new in this version to read the notes, and click Restart and install. Your canvas is saved first and reopens after. You can also use Check for updates… in the Ripen menu.

Troubleshooting#

• Generation is slow or stuck “waiting for model”. A large local model may be loading into memory. Check the System RAM meter in the queue, lower Max frames generated in parallel, or use a smaller or cloud model.
• An app shows an error. Use Try fix on its error card with a stronger model, or Version history to go back.
• A model can't see my images. Pick a model marked Vision.
• A project frame is blank. Check the dot and the log in its panel's DEV SERVER section; try Install deps, then Start.
• A key stopped working. Providers show Key needs re-entering; use Replace key.
• Look under the hood. The Debug panel (⌘⇧D) shows Ollama's status, loaded models, generation progress and frame errors.

Still stuck? Ask in the Ripen Discord.