Skills

Reusable Codex skills maintained by Tobitech.

Available skills

Design

Reference-First UI Design

Design, implement, and critically review polished product interfaces across iOS, macOS, and web. The skill grounds visual decisions in project-specific language, approved internal patterns, platform conventions, and mature production references.

It includes:

• just-in-time design-system bootstrapping for fresh projects;
• multi-example production-reference research across flows, components, data shapes, categories, states, and whole-product systems;
• explicit separation of durable patterns from product signatures, temporary trends, and source flaws;
• semantic typography and color-emphasis hierarchy;
• containment restraint, icon integration, and explicit alignment grids;
• foundation, shared-component, variant, and local-composition ownership rules;
• preview-first implementation and integrated visual verification;
• failure-seeking self-critique and iterative design convergence;
• non-blocking design-gap detection and closure.

Browse the skill

Install

Ask Codex:

Install the design-reference-first-ui skill from https://github.com/tobitech/skills/tree/main/skills/design/design-reference-first-ui.

Or install it manually:

git clone https://github.com/tobitech/skills.git
mkdir -p ~/.codex/skills
cp -R skills/design/design-reference-first-ui ~/.codex/skills/

Use

Use $design-reference-first-ui to bootstrap or extend this project's visual
foundation, implement the interface, and critically review it in application
context.

Project-specific visual language, implementation foundations, references, and golden screens belong in each product repository. The reusable skill contains the cross-project workflow.