# Can Hallmark AI Be Used with Claude Code? A Complete Integration Guide

> Integrate Hallmark AI with Claude Code easily. Learn how to route skill system payloads to Anthropic's API with simple dispatcher logic updates. Preserve Hallmark's JSON contract for seamless usage.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-25

---

**Yes, Hallmark AI can be used with Claude Code by routing the skill system's verb payloads to Anthropic's API endpoint instead of OpenAI's, requiring only updates to the dispatcher logic in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) while preserving Hallmark's JSON contract.**

Hallmark AI is a skill-based design generation system built on Instagit that creates layout, typography, and component assets through LLM-driven orchestration. Because the core architecture in the `Nutlope/hallmark` repository is **LLM-agnostic**, you can swap the underlying language model from OpenAI to Claude Code without modifying the skill logic itself.

## How Hallmark AI Processes Design Requests

Hallmark operates as a **Node.js package** that exports a set of *verbs*—such as `study`, `redesign`, and `audit`—defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md). These verbs represent discrete design tasks that the system can execute.

The orchestration flow works as follows:

1. The **runtime dispatcher** in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) receives a JSON payload containing a `verb` and its associated `context` (e.g., brand name, theme preferences).
2. The dispatcher forwards this payload to a language model API using the configuration declared in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json).
3. The model returns structured design instructions that Hallmark transforms into static assets (HTML/CSS) in [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) and `site/css/`.

Because the system only expects a valid JSON response matching the verb's output schema, any LLM that supports function-call-style outputs or structured JSON can serve as the backend—including Claude Code.

## Claude Code Integration Architecture

Integrating Claude Code requires modifying only the **API transport layer** while keeping Hallmark's skill validation and asset generation intact. The critical integration point is the fetch logic in the runtime dispatcher.

### Updating the API Endpoint in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)

The default implementation in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) sends requests to OpenAI's endpoint. To use Claude Code, replace the fetch configuration to point to `https://api.anthropic.com/v1/complete` and adapt the payload structure to Anthropic's schema.

**Key changes required:**
- Replace `process.env.OPENAI_API_KEY` with `process.env.ANTHROPIC_API_KEY`
- Update the request body to include Claude-specific parameters like `model: 'claude-2.1'` and `max_tokens`
- Maintain the JSON-stringified verb payload as the prompt content

### Preserving the Verb Payload Contract

Hallmark's skill system validates incoming requests against the definitions in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md). Regardless of which LLM you use, the dispatcher must send a JSON object containing:
- **`verb`**: The action to execute (e.g., `"study"`, `"redesign"`, `"audit"`)
- **`context`**: Design parameters such as `brand`, `theme`, or `component_type`

Claude Code must receive this same payload structure and return a JSON response that Hallmark's renderer can parse into the static site generator.

## Step-by-Step Implementation

Follow these steps to configure Hallmark AI for Claude Code:

1. **Clone the repository** and install dependencies listed in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) (including `node-fetch` if not present).
2. **Create environment variables** for Anthropic authentication: `export ANTHROPIC_API_KEY=your_key_here`.
3. **Modify [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)** to replace the OpenAI fetch block with Claude's API endpoint and payload schema.
4. **Verify the skill definitions** in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) to ensure your verb payloads match the expected parameter lists.
5. **Run the build** using `npm run build` to generate the static site with Claude-driven design assets.

## Code Examples

### Dispatching Hallmark Verbs to Claude Code

This Node.js script demonstrates how to send a Hallmark verb payload to Claude's API and parse the response for the Hallmark runtime:

```javascript
// hallmark-claude-bridge.js
const fetch = require('node-fetch');

async function invokeHallmarkVerb(payload) {
  const response = await fetch('https://api.anthropic.com/v1/complete', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': process.env.ANTHROPIC_API_KEY,
    },
    body: JSON.stringify({
      model: 'claude-2.1',
      max_tokens: 1024,
      prompt: JSON.stringify(payload),
    }),
  });
  
  const data = await response.json();
  return JSON.parse(data.completion); // Returns Hallmark's expected shape
}

// Example: Generate a design study for the 'Acme' brand
invokeHallmarkVerb({ verb: 'study', brand: 'Acme', theme: 'modern-minimal' })
  .then(result => console.log('Design brief generated:', result));

```

### Modified Dispatcher for Site Runtime

Update the core function in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) to route all verb requests through Claude:

```javascript
// Inside site/js/main.js
async function dispatchToLLM(verbPayload) {
  const resp = await fetch('https://api.anthropic.com/v1/complete', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': process.env.ANTHROPIC_API_KEY,
    },
    body: JSON.stringify({
      model: 'claude-2.1',
      max_tokens: 1500,
      prompt: JSON.stringify(verbPayload),
    })
  });
  
  const { completion } = await resp.json();
  return JSON.parse(completion); // Hallmark consumes this JSON
}

```

### Environment Configuration

Create a `.env` file in the project root:

```bash
ANTHROPIC_API_KEY=sk-ant-api03-your-key-here

```

## Key Source Files and Their Roles

Understanding these files is essential for maintaining the integration:

- **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)**: Defines all available verbs (`study`, `redesign`, `audit`) and their required parameters. The orchestrator uses this file to validate incoming requests before dispatching to the LLM.
- **[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)**: The runtime dispatcher that communicates with the language model API. This is the primary file to modify when switching from OpenAI to Claude Code.
- **[`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json)**: Declares Node.js runtime dependencies such as `node-fetch` and build scripts. You may add the Anthropic SDK here if you prefer using their official client over raw fetch.
- **[`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html)** and **`site/css/*.css`**: Receive the generated markup and theme tokens from the LLM response. These static assets can be served immediately after Claude Code produces the design content.

## Summary

- **Hallmark AI is LLM-agnostic**: The skill system in `Nutlope/hallmark` accepts any language model that returns structured JSON, making Claude Code compatibility a configuration change rather than a architectural overhaul.
- **Modify only the dispatcher**: Update [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) to point to `https://api.anthropic.com/v1/complete` and adapt the request payload to Anthropic's schema while preserving the verb contract defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md).
- **Preserve the JSON contract**: Claude Code must receive and return payloads containing `verb` and `context` fields that match Hallmark's expected input/output shapes.
- **No skill logic changes required**: The design generation logic, component recipes, and theme palettes in `skills/hallmark/references/` remain unchanged when switching LLM providers.

## Frequently Asked Questions

### Do I need to rewrite the skill definitions in SKILL.md to use Claude Code?

No. The skill definitions in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) describe the interface between the orchestrator and the design system, not the underlying LLM. Claude Code receives the same verb payloads as OpenAI's models, so the skill documentation and validation logic remain valid without modification.

### Which specific files must I edit to switch from OpenAI to Claude Code?

You only need to modify [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) to update the API endpoint from OpenAI's URL to `https://api.anthropic.com/v1/complete`, change the authentication header to use `x-api-key` with your `ANTHROPIC_API_KEY`, and adjust the request body to match Anthropic's expected parameters (model name, max_tokens, prompt format). Optionally, update [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) if you want to include the Anthropic SDK as a dependency.

### Will Claude Code handle the same design verbs as OpenAI models?

Yes. Claude Code can process all Hallmark verbs—including `study`, `redesign`, and `audit`—provided you format the prompt to include the JSON payload structure Hallmark expects. The quality of design output depends on Claude's ability to generate valid JSON matching the schemas defined in the skill references, which it handles effectively when given clear structural instructions in the prompt.