Hallmark

https://usehallmark.com
Admin
Hallmark is a design skill for Claude Code, Cursor, and Codex that encodes anti-AI-slop design...
Tokens:1,428
Snippets:28
Trust Score:3.5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Repeatable UI Component Example

Source: https://usehallmark.com

Illustrates a common UI component structure that can be repeated or varied, as shown by the repeated installation command.

```html
{{eyebrow}}
# {{title}}
{{lede}}
```

--------------------------------

### Build a Developer Infrastructure Landing Page

Source: https://usehallmark.com

Example of using the 'build' command to generate a landing page for developer infrastructure. Hallmark focuses on a cohesive ruleset.

```bash
$ /hallmark build a developer infrastructure landing page
```

--------------------------------

### Install Hallmark CLI

Source: https://usehallmark.com

Use this command to add the Hallmark CLI to your project. It's a prerequisite for generating UI components.

```bash
$ npx skills add nutlope/hallmark Copy Copied
```

--------------------------------

### Build a SaaS Product Page

Source: https://usehallmark.com

Example of using the 'build' command to generate a modern-minimal SaaS product page. Hallmark will select a macrostructure, theme, and enrichments.

```bash
$ /hallmark build a SaaS product page, modern-minimal
```

--------------------------------

### Build a Small Ceramics Studio Site

Source: https://usehallmark.com

Example of using the 'build' command to generate a website for a small ceramics studio. Hallmark's output is designed to avoid AI-generated aesthetics.

```bash
$ /hallmark build a small ceramics studio site
```

--------------------------------

### Build a Software Architect Personal Site

Source: https://usehallmark.com

Example of using the 'build' command to generate a personal website for a software architect. Hallmark aims for unique structural fingerprints.

```bash
$ /hallmark build a software architect personal site
```

--------------------------------

### Build a Travel Booking Site

Source: https://usehallmark.com

Example of using the 'build' command to generate an atmospheric travel booking site. Hallmark avoids repeating previously used macrostructures.

```bash
$ /hallmark build a travel booking site, atmospheric
```

--------------------------------

### UI Component with Stats

Source: https://usehallmark.com

An example of a UI component that includes statistical data alongside descriptive text.

```html
{{eyebrow}}
# {{title}}
{{lede}}
{{eyebrow}}
{{stat}}
{{qualifier}}
{{lede}}
{{cta}} →
```

--------------------------------

### Install Hallmark Skill

Source: https://usehallmark.com

Use this command to add the Hallmark skill to your AI assistant. This is the first step before using any Hallmark features.

```bash
$npx skills add nutlope/hallmarkCopyCopied
```

--------------------------------

### Build a Small-Batch Coffee Subscription Page

Source: https://usehallmark.com

Example of using the 'build' command to generate a page for a small-batch coffee subscription service. Hallmark ensures the output is 'slop-tested'.

```bash
$ /hallmark build a small-batch coffee subscription page
```

--------------------------------

### Build a Moroccan Fashion Brand Landing Page

Source: https://usehallmark.com

Example of using the 'build' command to generate a landing page for a Moroccan fashion brand. Hallmark applies design opinions holistically.

```bash
$ /hallmark build a Moroccan fashion brand landing page
```

--------------------------------

### Build a Creative Studio Page with Playful Motion

Source: https://usehallmark.com

Example of using the 'build' command to generate a creative studio page incorporating playful motion. Hallmark adapts its output based on the brief.

```bash
$ /hallmark build a creative studio with playful motion
```

--------------------------------

### Audit Design for Anti-Patterns

Source: https://usehallmark.com

Use the 'audit' command to get a ranked list of design flaws against Hallmark's anti-pattern catalogue. This command provides diagnosis only, no edits.

```bash
hallmark audit
```

--------------------------------

### Study Design from URL or Screenshot

Source: https://usehallmark.com

Use the 'study' command with a URL or screenshot to analyze a design's structure. Hallmark returns a DNA card or a portable 'design.md'.

```bash
hallmark study <screenshot | URL>
```

--------------------------------

### Basic UI Component Structure

Source: https://usehallmark.com

A fundamental UI structure generated by Hallmark, typically used for landing pages or introductory sections.

```html
{{eyebrow}}
# {{title}}
{{lede}}
{{ctaLabel}}
```

--------------------------------

### Redesign with New Structural Fingerprint

Source: https://usehallmark.com

Use the 'redesign' command to rebuild a page with the same content and brand but a different structural fingerprint. This involves new section rhythms and component voices.

```bash
hallmark redesign
```

--------------------------------

### UI Component with Quote

Source: https://usehallmark.com

Demonstrates a UI component designed to display a quote, often used for testimonials or impactful statements.

```html
{{eyebrow}}
> “{{quote}}”
{{lede}}
{{cta}} →
```

--------------------------------

### UI Component for Email/Letter

Source: https://usehallmark.com

A structured UI component suitable for generating email or letter content, including salutations and body text.

```html
{{eyebrow}}
# {{title}}
{{lede}}
{{salutation}}
{{letterBody}}
{{signoff}}  
— Hallmark
```
Tokens:
Raw