CoBlick designs for Claude Code
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 Claude Code
Give Claude Code an inspected UI direction, editable files, and concise implementation boundaries before it changes your application.
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
The visual decision is made in the browser. Claude Code receives a concrete design, its files, and the app context needed to integrate it carefully.
Where it works
Repository-level UI work where Claude Code can inspect routes, data contracts, tokens, and existing conventions before adapting the design.
Direction for your coding agent
Ask Claude Code to preserve the chosen hierarchy and interaction states, reuse project conventions, and report any missing data or server actions.