hallmark

Name: hallmark
Availability: InStock
Author: James

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

Updated Oct 2, 2024

Search Tags:#design #tokens #study #ai-slop #hallmark #macrostructure

Ready to run

npx skills add https://github.com/James-Gamboa/portfolio-james --skill hallmark-james-gamboa

💬 Prompt for ChatGPT / Claude Chat▼

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.