# Does Hallmark AI Work with Codex? Setup and Usage Guide > Yes Hallmark AI works with Codex. Install it as a design skill to generate anti-slop web designs from natural language prompts in your Codex environment. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: how-to-guide - Published: 2026-07-25 --- **Hallmark AI is fully compatible with Codex and installs as a design skill at `~/.codex/skills/hallmark/` to generate anti-slop web designs directly from natural language prompts.** The Hallmark repository by Nutlope provides a specialized design skill that integrates directly with OpenAI's Codex agent. According to the `Nutlope/hallmark` source code, the skill exposes a structured manifest and CLI verbs that Codex can discover and invoke automatically. This compatibility allows developers to generate landing pages, audit existing designs, and study reference websites without leaving their Codex workflow. ## How Hallmark Integrates with Codex The integration relies on Codex's skill-loading architecture, which discovers capabilities through standardized metadata files and directory conventions. ### Skill Manifest Discovery In [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (lines 1-5), the repository defines the skill manifest that declares the name `hallmark` and supported verbs. This file enables Codex's loader to recognize Hallmark as an available capability immediately after installation. According to the manifest's "Four verbs" table (lines 19-28), Hallmark exposes **design**, **audit**, **redesign**, and **study** commands that map to distinct design workflows. ### Installation Path Structure The [`README.md`](https://github.com/Nutlope/hallmark/blob/main/README.md) (lines 100-105) documents Codex-specific installation paths that determine scope: - **Personal install**: `~/.codex/skills/hallmark/` (available across all projects for the user) - **Project install**: `.codex/skills/hallmark/` (version-controlled with the specific repository) These paths follow Codex's convention for skill discovery, allowing the agent to load Hallmark's logic regardless of the current working directory. ## Installing Hallmark for Codex You can install Hallmark using the `npx skills` CLI, which automatically places files in the correct Codex directory structure according to the repository's installation instructions (lines 94-102). ### Global (Per-User) Installation ```bash # Installs to ~/.codex/skills/hallmark/ npx skills add nutlope/hallmark ``` This makes Hallmark available in any Codex session initiated by your user account. ### Project-Scoped Installation ```bash # Inside your project root npx skills add nutlope/hallmark --project # Creates .codex/skills/hallmark/ in the repository ``` Project-scoped installation ensures the skill travels with your repository, maintaining consistent design capabilities across team members and CI environments. ## Using Hallmark with Codex Prompts Once installed, invoke Hallmark directly from Codex prompts using the skill name followed by a design brief or specific verb. The front-end UI code in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) (lines 139-144) explicitly references Codex compatibility in its descriptive strings, confirming first-class support for this workflow. ### Basic Design Invocation ```text Create a landing page for my SaaS product using Hallmark. ``` When Codex receives a prompt referencing the `hallmark` command, it reads the skill manifest and executes the default design flow. The skill returns fully-styled HTML/CSS that complies with Hallmark's anti-slop design rules, utilizing reference files stored in `skills/hallmark/references/`. ### Verb-Specific Commands Hallmark supports targeted operations through explicit verbs defined in the skill manifest: **Audit existing pages:** ```text hallmark audit ./src/pages/index.html ``` **Redesign with specific mood:** ```text hallmark redesign ./src/components/Button.tsx --mood modern-minimal ``` **Study reference designs:** ```text hallmark study https://example.com/hero ``` Each verb triggers distinct logic within the skill's runtime, accessing specialized reference documents like [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md) or genre-specific templates located in `skills/hallmark/references/genres/`. ## Key Source Files and Implementation The compatibility layer consists of specific files that Codex expects when loading external skills: - **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)**: Defines the skill name, version, and verb mapping for Codex's discovery mechanism (lines 1-5). - **[`README.md`](https://github.com/Nutlope/hallmark/blob/main/README.md)**: Contains Codex-specific installation instructions and path conventions (lines 100-105). - **[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)**: Contains UI code that explicitly references Codex in descriptive text (lines 139-144), confirming first-class support. - **`skills/hallmark/references/`**: Directory containing design system references and macrostructure definitions that the skill accesses when generating code through Codex. Together, these files provide the integration surface that enables Codex to load, validate, and execute Hallmark's design capabilities. ## Summary - **Hallmark AI is fully compatible with Codex** and installs as a structured skill in `~/.codex/skills/hallmark/` or `.codex/skills/hallmark/`. - The **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** manifest defines four verbs (design, audit, redesign, study) that Codex discovers automatically at lines 1-5 and 19-28. - Install using **`npx skills add nutlope/hallmark`** for global scope or append **`--project`** for repository-specific installation. - Codex loads the skill by reading the manifest and executing the corresponding design logic stored in the `references/` directory, as confirmed by explicit Codex mentions in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js). ## Frequently Asked Questions ### How do I verify that Hallmark is installed correctly for Codex? Check for the skill manifest at `~/.codex/skills/hallmark/SKILL.md` (personal) or [`.codex/skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/.codex/skills/hallmark/SKILL.md) (project). Codex scans these directories on startup and loads any valid skill manifests found. If the files exist in these specific paths, Codex will recognize the `hallmark` command in your prompts. ### Can I use Hallmark with other AI assistants besides Codex? Yes. While this guide focuses on Codex compatibility, the repository structure supports multiple AI-assisted coding assistants including Claude Code and Cursor. The same skill manifest in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) works across platforms because it follows standard skill-metadata conventions, though installation paths may differ per assistant. ### What design references does Hallmark use when invoked by Codex? Hallmark accesses specialized reference files stored in `skills/hallmark/references/`, including [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md) and genre-specific templates in `skills/hallmark/references/genres/`. When Codex invokes a verb like `study` or `redesign`, the skill retrieves these references to ensure generated designs follow Hallmark's anti-slop principles. ### Does the `--project` flag affect how Codex loads the skill? The `--project` flag installs Hallmark to `.codex/skills/hallmark/` within your repository rather than the global `~/.codex/skills/hallmark/` directory. Codex checks the local project directory first when loading skills, so project-scoped installations take precedence over global ones, ensuring team-specific design rules are enforced consistently.