Design your page like Figma

Your running app is the canvas. Select an element, restyle it visually, watch the page update live, read the generated CSS, reuse looks across elements, and either copy the CSS into your code or ask the AI to make it permanent — without leaving the browser.

The loop

1. Select. Open the Raplify side panel (floating launcher or the toolbar). Hover to highlight, click to select an element. The Design view opens on the selected node.

2. Style it visually. In Design ▸ Styles, edit with real controls — typography (family, size, weight, line-height, spacing), color (picker), spacing & size (the box model), box-shadow, and transform (translate / scale / rotate). Every change writes to the live DOM instantly, so you're designing against the real page, not a mock.

3. Read the generated CSS. Switch to Design ▸ CSS code to see exactly what your edits produce — a clean selector { … } block you can copy into your stylesheet.

   .checkout-cta {
     padding: 14px 22px;
     border-radius: 12px;
     background: #22D3EE;
     box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.55);
   }

4. Reuse a look. Use the element menu's Copy to snapshot an element's styles, then Paste styles onto another element to apply the same look — or Paste element to clone it wholesale. Copies live in the Bucket (history + clipboard).

5. Ask AI to refine or apply. Hit Ask AI on the element and describe the change (“make this match the primary button, larger tap target on mobile”). Raplify sends the screenshot + selector + React component path to the agent — which can edit the underlying source. This is also how you comment on an element to flag an issue.

6. Jump to the code. From the React view, click the node to open its source at the exact line (in the Raplify dev-editor or native VS Code) and bake the change into the codebase.

Why it feels like a design tool