NextCore Design
Interface designs before you build: every screen covers 5 states × 4 device sizes, built with the real app's CSS. You view, edit by hand and leave notes; agents draw in parallel over MCP.
Open NEXTCORE DESIGN in the left sidebar. This is where interface designs live: web pages, app screens, extensions. Designs are built with the real product's own colors and spacing, so what you see here is what will appear on screen, not an illustration.
How designs are organized
| Level | What it is | Example |
|---|---|---|
| Project | one product | Web · NextCore Browser · Extension |
| Folder | one web page or one menu item in the app; folders can be nested several levels deep | NEXTCORE CRM / |
| Screen | one specific screen, linked to the task (issue) being worked on | Hộp thư — chọn kênh Zalo (#1031) |
Each screen has 20 cells: 5 states × 4 device sizes.
- 5 states: No data yet (empty) · Loading (loading) · Hover / selected (hover) · Error (error) · Success (success).
- 4 sizes: 390 (phone) · 768 (tablet) · 1280 (desktop) · 1920 (wide screen).
The left column is the Folder tree: click the arrow to expand or collapse a branch (the app remembers this per project), and type in Search the tree to expand the branches that contain matches automatically. Create a Subfolder at any level, drag a folder or screen onto another branch to move it, or drop it on empty space to move it to the top level. F2 renames, and Delete moves the item to the trash along with everything inside it; Undo appears right afterwards, and restoring from the trash puts it back in its original branch.
If a screen is missing any cells, the list shows Not drawn; with all 20 cells it shows All 20/20 cells. The search box at the top filters by screen name, area name or issue number. The list is sorted by most recent edit.
Viewing a screen
Click a screen to open it. The tabs at the top:
| Tab | Used for |
|---|---|
| Canvas | view the cells side by side, scroll to move around, Zoom in / Zoom out buttons |
| Bảng trạng thái (Status board) | a 5 states × 4 sizes grid, to see at a glance whether the screen is complete |
| Inspect | click an element to see Width × height, Radius, text-on-background Contrast and the name of the color token in use. Hard-coded colors (not from the palette) show an Outside tokens warning |
| Notes | notes attached to an element (see below) |
| Versions | a timeline of captured versions; name and restore them |
| Compare | put two versions side by side, highlighting added / removed / edited / moved elements |
| Slideshow | step through boards by following links as a real user would click (Esc exits · ← → switch boards · H shows click areas) |
| Vector | draw shapes: Pen, edit points, rectangle, ellipse, combine / cut shapes, export SVG |
Editing by hand
Zoom into a board and click Edit manually. Click to select an element, drag to move it, drag a corner to resize, double-click text to edit it, and change colors with the Search tokens box (type primary, ink, warning…). Changes are saved when you release the mouse; ⌘Z (Windows: Ctrl+Z) undoes your own actions, not what an agent is drawing.
An element an agent is editing shows the label NODE LOCKED: wait for the agent to finish, or message the agent in the notes box below.
Importing existing designs
If you have designs elsewhere, bring them into NEXTCORE DESIGN without redrawing them:
- Drag and drop files or a whole folder onto the Import design area on the project page, or click Import… to choose them.
- Paste (
Ctrl+V) SVG or HTML code you have just copied. - The app detects the source automatically: HTML, old
.dc.htmldesigns, SVG, PNG images,.ncdpackages,.zipfiles (for example a whole zipped HTML site folder), and Penpot.penpotfiles. Folders and.zipfiles become projects, and subfolders become matching nested folders. - Paste a Penpot share link (of the form
…#/, from Share › Get link in Penpot): the app reads the design without signing in to Penpot. Each Penpot page becomes a folder and each board becomes a cell. If the link opens the workspace directly (not a share link), the app reminds you to get a share link.view?…&share-id=…
Each file is imported separately in a queue, with Import progress and pause / resume buttons. One failed file does not break the whole batch: that row shows the reason. Importing the same file again updates the existing screen instead of creating a duplicate.
.fig, .sketch, .xd and .pdf files, password-protected .zip files and Figma / claude.ai links cannot be read directly yet: the app states the reason and suggests exporting to SVG or HTML first.
Exporting and viewing on other devices
Click Export design (Ctrl+Shift+E) at the top of a screen or folder:
| Format | Notes |
|---|---|
| PNG · JPG · WebP | 1×, 2×, 3× density; light background, dark, or both |
| SVG | one file per cell |
| multiple pages, each page sized to its cell | |
| HTML + tokens.css | opens in a browser with no network needed |
.ncd package |
moves to another NextCore Browser machine; importing it keeps the screens and history |
Turn on Bundle into one .zip file if you need to send a single file. After exporting, drag a row in Exported files into Explorer, Zalo or Gmail to send it right away.
Live view opens a separate window that updates when you or an agent edit (in under half a second). View on phone shows a QR code: a phone on the same Wi-Fi network can scan it with the camera to view. Closing the QR dialog stops the machine sharing it on the local network.
Creating a view link
To send a design to someone without NextCore Browser, click Create view link at the top of a screen or folder.
- Scope: one screen, one folder or the whole project. A screen with no cells drawn cannot get a link.
- Expiry: 1 hour, 1 day, 7 days, 30 days, or a custom period up to 90 days.
- Password (optional) of at least 6 characters, whether downloads are allowed, and version locking (viewers only see the version at the time the link was created).
Since 0.3.174, links have the form homestaynextcore.org/; old homestaynextcore.org/ links still open and redirect to the new path automatically. Links without version locking update within about a minute after the screen changes. The Created links list shows views and the last view; Revoke stops the link from opening immediately.
Notes and assigning work to agents
In the Notes tab, select an element (or search for it by name in the Find element by name… box) and write. The note stays attached to the element even when the element is moved.
Write @agent in a note to assign work: the agent reads the note, edits the design, replies right in the thread and marks it Resolved. The top of the screen shows who is on this screen (you, other agents, other machines).
Versions: D1, D2
Before changing the layout, capture a version and name it, for example D1 · Hộp thư (#1031). The next capture is named D2 · …. Old versions are never overwritten: go to Compare to see what differs, or restore one; the app automatically captures a «trước khôi phục» (before restore) version so you can go back.
Multiple machines, multiple agents
- Every machine signed in to the same account sees the same designs; sync goes through the station with end-to-end encryption, so the NextCore server only holds encrypted data and cannot read the content.
- You can keep drawing offline; when the connection returns, changes merge automatically without asking.
- Several agents can draw on the same screen at the same time without overwriting each other. What an agent has just drawn reaches other machines within about 2 seconds.
- While an agent is editing an element, that element is locked on every machine (the label shows which agent and which machine). If the agent stops or loses its connection, the lock is released automatically after about a minute.
- The Collaboration panel and the top of the screen show agents from other machines that are on the screen, in the form
A1 · <tên máy>.
For agents (MCP)
Agents use the ncd_* toolset in NextCore Browser's MCP server, with no need to open the interface:
| Task | Tool |
|---|---|
| Find projects / screens, look up real token names | ncd_cay |
Create projects, nested folders (by a/ path) and screens; move, delete, restore |
ncd_du_an · ncd_man |
| Draw, read the tree with refs, edit by ref | ncd_ve · ncd_doc · ncd_sua |
| Versions, comparison | ncd_phien_ban |
| Notes | ncd_ghi_chu |
| Check a screen (missing states, horizontal overflow, contrast, touch targets) | ncd_kiem |
| Export PNG / SVG / HTML to attach to an issue | ncd_xuat |
| Take / release element locks when several agents edit together | ncd_khoa |
| Create, list and revoke view links | ncd_link_xem |
A link to a screen on an issue has the form ncd:/. Full parameter list: MCP.
Language
Since 0.3.172, the NEXTCORE DESIGN screen shows English when you choose English in Cài đặt › Giao diện (Settings › Appearance), or choose Use system setting on a machine set to English. Content you enter and data taken from Facebook stay in their original language.