Hallmark Web Design

Nutlope/hallmark

Build, redesign or audit websites with a clear visual direction, 48 themes or custom styling, and local UI checks for Claude Code, Codex, Cursor and OpenCode.

Contenido actualizado:

Ver en GitHub
npx skills add nutlope/hallmark
53.682Estrellas2860ForksÚltimo push del repositorio

Acerca de este Skill

Hallmark is a web and UI design skill made by Together AI. It guides a coding agent through project inspection, the visitor’s main task, a choice from 48 visual themes or a custom direction, a hero-first build, and source and browser checks. The same skill supports new pages, explicit redesigns and audit reports; themes and references are supporting material rather than separate installable Skills.

Por qué lo elegimos

Useful when a coding agent needs a concrete design process alongside implementation. Hallmark combines a visual theme catalog with source and rendered checks, and separates new builds, named redesigns and audit reports. The original repository supplies the runtime and installation instructions.

Para qué sirve

  • Create a new landing page or interface with an intentional visual direction and a clear primary action.
  • Redesign a named existing page while checking that content, links, fields and handlers are retained.
  • Audit frontend files or a running route for design defaults, accessibility issues and responsive layout problems.

From a brief to a checked page

Hallmark reads the existing project and asks for materials, audience, the intended action and tone. It proposes a page structure, deals three relevant themes or follows an explicitly requested custom direction, and builds the hero before the rest of the page. Brand claims, numbers and testimonials must come from supplied facts.

Its local lint tools separate non-waivable Floor failures from Reflex defaults that can be justified and Finish details for craft review. Rendered checks inspect multiple viewport widths. These checks guide implementation; they do not guarantee a particular aesthetic or production readiness.

Upstream READMEUpstream task entrypoint

Build, redesign or audit

These are modes of one installed Skill. The upstream instructions activate redesign and audit only when Hallmark is named, so ordinary edits can keep the project’s existing design system.

ComandoPara qué sirve
/hallmark <prompt>Create a new page from a brief; Codex users can invoke $hallmark.
/hallmark redesign <path>Explicitly request a redesign that retains existing content and behavior.
/hallmark audit <path>Produce an audit report for the selected target.

Upstream READMEUpstream task entrypoint

Installation and local checks

Use the installation command to choose a compatible agent and install into the current project. Add -g for a user-level installation. The README also documents a Claude Code plugin and a clone-based installer. Keep the whole Skill directory, not only SKILL.md.

ComandoPara qué sirve
node <skill-dir>/scripts/sloplint.mjs <file-or-dir> --renderRun the upstream source and rendered checks after installing their documented browser dependencies.

Upstream READMEUpstream task entrypoint

Source and preview

Hallmark is made by Together AI and maintained in Nutlope’s repository. This listing links to the original MIT-licensed project. The supplied preview is the official OG-hallmark.png promotional cover, compressed to WebP; it is not an interactive website demonstration or a new design produced during this listing update.

Upstream READMEMIT licenseOfficial Hallmark cover; compressed for this listingAuthor on X: @nutlope

Antes de usarlo

  • The upstream README documents Claude Code, Codex CLI, Cursor and OpenCode. Install the entire hallmark folder so its themes, references and helper scripts remain available. Node.js 18+ is required for the installer and local helpers.
  • Rendered checks and screenshots require Chrome and puppeteer-core; without them static checks still run. Existing applications also need their own framework dependencies and a running preview when browser auditing a route.
  • The Skill is MIT-licensed and free to install. Coding-agent usage can have a separate cost. Optional image generation uses Together AI credentials and provider billing; source photos keep their own licenses and attribution requirements.

Agentes compatibles

Claude CodeCodex CLICursorOpenCode

Fuentes y referencias

Las fuentes originales se enlazan a continuación. Los puntos de partida prácticos son sugerencias editoriales de SkillHey.