CoBlick designs for Cursor
Anchor navigation shell
A full-page docs shell with a slim topbar, a column of anchored section cards, and a sticky On this page rail tracking the active section.
CoBlick designs for Cursor
Inspect the finished interface, choose the right direction, and give Cursor editable source with the design and integration context intact.
4,009available designs
See the direction before you build
Every result opens into responsive light and dark previews, editable source, implementation details, and related designs.
Bottom panel shell
IDE style shell with a slim run bar, an open canvas, a docked console panel with log tabs, and a pinned status bar.
Breadcrumb header shell
Full-page shell for deep detail views with a breadcrumb trail, page title, meta row, and action buttons above two content panels.
Card grid shell
A gallery workspace shell with an icon nav rail, a toolbar with search, sort, and view toggle, and a responsive card grid of projects.
Centered content shell
A slim top bar and a max-w-3xl reading column on a muted background for docs, articles, or single settings detail pages.
Checklist shell
An onboarding home shell with a topbar, welcome header, a setup checklist card with progress and one expanded step, plus a resources rail.
Collapsible sidebar shell
Icon-only nav rail with an expand affordance, badge count on Projects, and an inline tooltip hint on one item.
Command bar shell
Shell with a centered command bar in the top header, a keyboard shortcut hint, and a recent commands list below.
Document tabs shell
Editor workspace shell with a strip of open document tabs, close buttons, an unsaved dot, and the active document content below.
Dual sidebar shell
App shell with a primary icon nav rail and a grouped contextual sub-nav panel for deep two-level navigation.
Empty state shell
A sidebar and header frame with a first run canvas: a centered empty state with icon, heading, primary and secondary actions, and a starter template row.
Environment banner shell
App shell with a pinned staging environment banner, a switch action, a topbar, and a deployments page with an environment facts panel.
What makes it distinctive
Cursor starts from a real responsive design and its source rather than reconstructing the interface from a loose prompt or screenshot.
Where it works
Teams using Cursor to build React and Next.js apps while keeping design review and source ownership in the same workflow.
Direction for your coding agent
Select and inspect the design first. Then provide Cursor with the installed files, the page goal, real data contracts, and the states it must connect.