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

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 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. 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 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.
3. The model returns structured design instructions that Hallmark transforms into static assets (HTML/CSS) in 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

The default implementation in 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. 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 (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 to replace the OpenAI fetch block with Claude's API endpoint and payload schema.
4. Verify the skill definitions in 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:

// 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 to route all verb requests through Claude:

// 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:

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: 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: 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: 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 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 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.
• 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 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}