STEP 1 · START WITH WHAT YOU ALREADY HAVE

Turn a mockup, existing sections, or individual assets into fast web-ready output.

Mobile artwork is optional. Slicify never requires a mobile mockup to continue.

One mockup is enough

＋

Drop your full website mockup

PNG, JPG, WebP or other browser image. This is the only required file.

No primary mockup selected

OPTIONAL

＋

Add a dedicated mobile design

If you have one, Slicify uses it for precision mobile art direction. If not, we build responsive output from the primary design.

Not provided — responsive fallback will be generated

Waiting for a mockupDrag a file onto the Primary Mockup area or choose one from your computer.

0%

Nothing has been imported yet.

Drop all website section images hereThey stay in your chosen order. Each row can optionally receive its own mobile artwork.

Section import readyDrop or choose section images. Every file will show visible progress.

0%

No sections yet. Add your existing website slices above.

Drop individual web graphics hereSlicify creates multiple responsive sizes in AVIF + WebP and ready-to-paste picture markup.

Asset import readyDrop or choose graphics. Slicify will visibly validate each file.

0%

No assets yet.

Section previewSelect a section

Target sections Detection + Cut instantly splits the tallest current section. Drag any blue line to fine-tune it.

Full mockup

Every blue line is a real export boundary. Drag it and the structure updates. Double-click a line to remove it. Click a section in the left panel to apply the current cuts and edit that section.

Direct canvasDrag · 8-handle resize · rotate · keyboard nudge

Arrows .25% · Shift+Arrows 2% · Ctrl/Cmd+D duplicate

Section artwork

Drag real HTML layers directly over the artwork. The image preserves visual fidelity; headings, text and CTAs remain selectable, editable and interactive.

SUPERIOR ELEMENT INSPECTORExact controls + beginner guidance

V2.4

WHAT SHOULD I DO NOW?Name this section so you know what it is.

Use a descriptive human name such as “Why Realtors Prefer Remarkable Real Estate Luxury Websites.” Names go into the AI handoff package and make complex landing pages much easier to understand.

Section identity & handoff

Section nameRename freely. Double-click a section name or press F2 also works.Section roleAccessible descriptionAI handoff notePrivate project instruction included in the AI handoff files; not displayed to website visitors.

Mark or rebuild real web elements. Drag a tool onto the exact location in the mockup. For buttons/links, the recommended default is a transparent clickable hotspot so the original artwork stays visually perfect. Choose “Replica” only when you want Slicify to visibly rebuild the element.

Select an element to open Content · Typography & Color · Layout · Effects. The coach above explains the recommended next action.

LIVE RESPONSIVE PREVIEWWhat your visitor will see

EXPORT SETTINGSProduction package

Website title

Mobile breakpointPage background

Adaptive AVIF + WebPBoth formats are measured. Slicify prefers the smaller aggregate format for each image set while keeping the other as fallback.

No forced lazy loadingFast-scroll safe eager downloading + async decoding + content-visibility

Intrinsic dimensionsPrevents layout shift while images decode

HTML + React + Vue + WordPressCanonical website plus framework integration outputs

Optional mobile art directionDedicated mobile files are used only where supplied

Semantic overlay contentReal text, links and CTAs remain real HTML

Ready to buildReal upload + server encoder/compiler progress will appear here.

0%

Waiting for Build & Download.

Ready to build.

HB SLICIFY BEGINNER GUIDEFrom mockup to an AI-ready, working website handoff

1 · Import

Drop a full mockup or existing section images. Wait for the visible 0–100% receipt before continuing.

2 · Structure

Use automatic cuts as a starting point. Add, drag, or remove cuts until each meaningful sales-page section is separated. Then give every section a descriptive name.

3 · Mark interactive/rebuildable things

Drag Heading, Text, Button, Link, List, or Badge onto the exact target. The target box should line up with the real thing in the mockup—not float randomly somewhere else.

Buttons: what should I actually do?

Hotspot (recommended when the button already exists in the mockup): put the box exactly around the visible button. Enter the true button text and destination. The editor label can float outside the box; that label is only a guide and never exports. The exported hotspot is transparent/clickable, so it does not duplicate or cover the original button artwork.

Replica: use this only when you want Slicify to visibly recreate the button in HTML/CSS. Then match font, size, text color, fill, border, padding, radius, and position as closely as possible.

AI Guide Only: use this when you only want to tell the next AI what exists and where it belongs. It is included in the handoff metadata but not rendered on the visitor website.

4 · Preview

Check Desktop, Tablet, and Phone. Hotspots should click in the correct location; Replica elements should visually match the mockup.

5 · Export / AI handoff

Slicify includes the website plus AI_HANDOFF_INSTRUCTIONS.md and ai-handoff.json. Section names, roles, notes, element names, exact coordinates, text, destinations, styling, and render mode travel with the package.