hallmark

Analyze design briefs to generate ready-to-ship pages with token-based rules.

Updated Oct 2, 2024
One-click install
npx skills add https://github.com/James-Gamboa/portfolio-james --skill hallmark-james-gamboa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hallmark
Source: https://github.com/James-Gamboa/portfolio-james/tree/main/.agents/skills/hallmark
Command: npx skills add https://github.com/James-Gamboa/portfolio-james --skill hallmark-james-gamboa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires references, and includes references (resource) components.

What problem does it solve?

Hallmark provides a disciplined, rule-driven design workflow that ensures UI outputs avoid AI-generated slop by enforcing macrostructure variety, token-based color/typography, and explicit pre-emit critique.

Core Features & Use Cases

  • One default flow + three explicit verbs: design new pages (default), audit existing code, redesign, and study designs from URLs or screenshots.
  • Catalog of 22 named themes plus a custom theme option for brand-specific palettes, applied within a governed token system.
  • Pre-emit self-critique and strict token discipline to ensure accessibility, contrast, and design integrity across outputs.
  • Study and export flows including portable design.md for handoff to other AI tools.

Quick Start

Provide a brief design prompt and Hallmark will produce a complete, non-AI-slop page ready to ship.

Frequently Asked Questions about hallmark

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design UI pages that avoid looking like AI-generated slop?

To avoid AI slop in UI design, enforce macrostructure diversity, token-based color and typography rules, and pre-emit critique. This ensures outputs look handmade and ship-ready rather than algorithmically generic.

What's the best way to audit existing UI code for design token compliance?

Auditing UI code for token compliance involves analyzing existing project context against a governed token system. This process checks color and typography rules, ensures accessibility, and applies pre-emit critique to maintain design integrity.

Can I extract and study design systems from screenshots or URLs?

Yes, you can study designs from URLs or screenshots by analyzing visual context. This extracts macrostructure and token patterns into a portable design.md file, enabling handoff to other AI tools or redesign workflows.

How do I apply a custom brand theme using design tokens?

Applying a custom brand theme requires selecting the custom theme option within a governed token system. This enforces specific brand palettes while maintaining strict token discipline for color and typography across outputs.

Does this design workflow prevent unwanted edits to production code?

Yes, the design workflow explicitly prevents unwanted edits to production code. It focuses on producing ready-to-ship pages, auditing existing code, and generating a portable design.md export without directly modifying the live codebase.

Why does my generated UI lack macrostructure diversity?

Generated UI lacks macrostructure diversity when the workflow fails to enforce varied layout patterns. To fix this, the design process must explicitly apply macrostructure variety alongside strict token-based color and typography rules.