CoBlick designs for Codex
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 Codex
Move from an inspected CoBlick direction to repository-native React source with the hierarchy, states, and integration intent documented.
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
Codex can work from the actual design and editable source, then reconcile both with the repository instead of inventing the interface from scratch.
Where it works
Agentic coding workflows that include repository inspection, implementation, verification, and design-aware iteration.
Direction for your coding agent
Tell Codex which design to install, the owning route, the real data source, and the required states. Require it to preserve tokens and verify responsive behavior.