AI Skills.

AI Skills › Design设计設計デザイン › hallmark

hallmark

by Nutlope · Design skill作者:Nutlope · 设计技能作者:Nutlope · 設計技能作者:Nutlope · デザインスキル

A design skill that refuses to look AI-generated. It deals three themes from a catalog of fifty materials, builds the page around what the visitor came to do, and lints the result in a real browser against the tells that read as machine-made — the eyebrow above every heading, tracked-capital labels, and other stock AI patterns. A fresh-context reviewer gets the last word.一款拒绝“AI 味”的设计技能。它从 50 套素材中抽出 3 套主题,围绕访客的真实目标构建页面,并在真实浏览器里对照机器生成的典型痕迹做检查:每段标题上的小眉题、字母间距过大的标签等陈词滥调。最后由一个全新上下文的评审者把关。一款拒絕「AI 味」的設計技能。它從 50 套素材中抽出 3 套主題,圍繞訪客的真實目標建構頁面,並在真實瀏覽器裡對照機器生成的典型痕跡做檢查:每段標題上的小眉題、字母間距過大的標籤等陳腔濫調。最後由一個全新上下文的審查者把關。AI 生成に見えないことにこだわるデザインスキル。50 種類の素材カタログから 3 つのテーマを選び、訪問者の目的に沿ってページを構築し、実際のブラウザで機械生成に見える特徴(見出し上のアイブロウ、字間を広げたラベルなど定番の AI パターン)をチェックする。最後は新しいコンテキストのレビュアーが判断を下す。

Quick start快速上手快速上手クイックスタート

What it does

Hallmark is a design skill for Claude Code, Codex, Cursor, and OpenCode that refuses to look AI-generated. It deals three themes from fifty materials, builds the page around the visitor's job, and lints the result in a real browser against machine-made tells.

How it works

A build starts with a pre-flight read and one question about real material, since nothing is invented. The theme script deals three fitting themes, the page anatomy comes from its job, the hero is built and reviewed cold first, and the page is checked at eight widths before a fresh-context subagent reviews it. Gates come in three tiers: the Floor never ships, Reflex defaults may be overruled on the record with reason, and Finish checks never block a ship.

How to use it

  • Install with
    npx skills add nutlope/hallmark -g
    the -g flag installs for every project, and leaving it off installs into the current one.
  • Start a build with
    /hallmark <prompt>
    or by describing a new build; if it does not fire on its own, say you want to use Hallmark to build it.
  • Redesign an existing page with
    /hallmark redesign ./src/app
    while keeping its content and wiring, or report only with
    /hallmark audit ./index.html

Key points

  • Each theme is a material, not a plan, so two prompts in one theme make two different pages.
  • It needs Node 18 or later. The browser checks also need
    npm i -g puppeteer-core
    and Chrome; without them the static checks still run.
  • Its photo library holds 755 openly licensed photos, picked per subject and credited on the page.

它是做什么的

Hallmark 是一款面向 Claude Code、Codex、Cursor 和 OpenCode 的设计技能,目标是拒绝 AI 生成感。它从 50 种材质主题目录中发三张主题牌,围绕访客的真实目的搭建页面,并在真实浏览器中对照机器感特征做检查。

它怎么工作

构建先做预检:读取项目并一次性索要真实素材,如照片、截图或真实数字,绝不编造。主题脚本会发三张契合的主题,页面结构由其任务决定,首屏会先单独构建并冷评审,之后再做其余部分,最后在八种宽度下检查,并由全新上下文的子智能体复审。检查分三档:Floor 绝不放行,Reflex 是模型默认倾向、有理由时可记录在案地推翻,Finish 只关乎工艺细节、永不阻塞发布。

怎么用

  • 安装命令:
    npx skills add nutlope/hallmark -g
    带 -g 为所有项目安装,不带则只装当前项目。
  • 用
    /hallmark <prompt>
    开始构建,或直接描述新页面;如果没有自动触发,就明确说要用 Hallmark 构建。
  • 用
    /hallmark redesign ./src/app
    重做已有页面并保留内容和连线,只想出报告则用
    /hallmark audit ./index.html

关键要点

  • 每个主题只是一种材质,不是方案:它不规定页面包含什么、按什么顺序,因此同一主题下的两个提示会生成两个不同的页面。
  • 需要 Node 18 或更高版本。浏览器检查还需要
    npm i -g puppeteer-core
    和 Chrome;没有它们时静态检查仍可运行。
  • 照片库包含 755 张公开许可照片,按主题挑选并在页面上署名。

它是做什麼的

Hallmark 是一款面向 Claude Code、Codex、Cursor 與 OpenCode 的設計技能,目標是拒絕 AI 生成感。它從 50 種材質主題目錄中發三張主題牌,圍繞訪客的真實目的搭建頁面,並在真實瀏覽器中對照機器感特徵做檢查。

它怎麼運作

建構先做預檢:讀取專案並一次性索取真實素材,例如照片、截圖或真實數字,絕不編造。主題指令碼會發三張契合的主題,頁面結構由其任務決定,首屏會先單獨建構並冷評審,之後再做其餘部分,最後在八種寬度下檢查,並由全新脈絡的子智慧體複審。檢查分三檔:Floor 絕不放行,Reflex 是模型預設傾向、有理由時可記錄在案地推翻,Finish 只關乎工藝細節、永不阻擋發布。

怎麼用

  • 安裝指令:
    npx skills add nutlope/hallmark -g
    帶 -g 為所有專案安裝,不帶則只裝目前專案。
  • 用
    /hallmark <prompt>
    開始建構,或直接描述新頁面;如果沒有自動觸發,就明確說要用 Hallmark 建構。
  • 用
    /hallmark redesign ./src/app
    重做已有頁面並保留內容與連線,只想取得報告則用
    /hallmark audit ./index.html

關鍵要點

  • 每個主題只是一種材質,不是方案:它不規定頁面包含什麼、按什麼順序,因此同一主題下的兩個提示會產生兩個不同的頁面。
  • 需要 Node 18 或更新版本。瀏覽器檢查還需要
    npm i -g puppeteer-core
    與 Chrome;沒有它們時靜態檢查仍可執行。
  • 照片庫包含 755 張公開授權照片,按主題挑選並在頁面上署名。

何をするのか

Hallmark は、Claude Code、Codex、Cursor、OpenCode 向けのデザインスキルで、AI 生成らしく見えることを拒む。50 種類の素材テーマのカタログから 3 枚を配り、訪問者の目的を中心にページを組み立て、機械製に見える兆候に対して実際のブラウザで検査する。

仕組み

ビルドはプロジェクトの事前確認から始まる。写真、スクリーンショット、実数といった本物の素材を一度だけ尋ね、決してでっち上げない。テーマスクリプトが合うテーマを 3 枚配り、ページの構成はその役割から決まる。ヒーローは残りより先に単独で作られ、冷静にレビューされる。その後 8 つの幅で検査し、新しい文脈のサブエージェントが最終確認する。ゲートは 3 段階だ。Floor は決して出荷しない。Reflex はモデルの既定の癖で、理由があれば記録のうえ覆せる。Finish は出荷を止めない職人技の確認だ。

使い方

  • npx skills add nutlope/hallmark -g
    でインストールする。-g は全プロジェクト対象で、付けなければ現在のプロジェクトのみだ。
  • /hallmark <prompt>
    でビルドを始めるか、新しいビルドを説明する。自動で起動しない場合は Hallmark を使って作りたいと明言する。
  • 既存ページは
    /hallmark redesign ./src/app
    で内容と配線を保ったまま作り直し、報告だけなら
    /hallmark audit ./index.html
    を使う。

押さえておきたい点

  • 各テーマは素材であって計画ではない。ページの内容や順序を決めないため、同じテーマでもプロンプトが違えば別のページになる。
  • Node 18 以降が必要だ。ブラウザ検査には
    npm i -g puppeteer-core
    と Chrome も必要で、無ければ静的検査だけが動く。
  • 写真ライブラリは 755 枚のオープンライセンス写真を含み、主題ごとに選んでページ上でクレジット表示する。

Supported platforms支持的平台支援的平台対応プラットフォーム

Claude CodeCodexCursorOpenCode

Notes备注備註備考

50 themes in v2, slop-test gates, /hallmark redesign and /hallmark audit commands; needs Node 18+.v2 含 50 套主题、slop-test 检查关卡、/hallmark redesign 与 /hallmark audit 命令;需要 Node 18+。v2 含 50 套主題、slop-test 檢查關卡、/hallmark redesign 與 /hallmark audit 指令;需要 Node 18+。v2 はテーマ 50 種、slop-test ゲート、/hallmark redesign と /hallmark audit コマンドを含む。Node 18+ が必要。

More Design skills更多设计技能更多設計技能その他のデザインスキル

View all →查看全部 →查看全部 →すべて見る →

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. Its v2.0 Design System Generator draws on 79 searchable UI styles, 192 palettes, 74 font pairings, and 192 industry reasoning rules to produce polished interfaces instead of generic layouts. It works with Claude Code and other major coding agents.为多平台构建专业 UI/UX 提供设计智能的 AI 技能。其 v2.0 设计系统生成器基于 79 种可检索 UI 风格、192 套配色、74 组字体搭配和 192 条行业推理规则,产出精致的界面而不是通用布局。支持 Claude Code 及其他主流编码智能体。為多平台建構專業 UI/UX 提供設計智慧的 AI 技能。其 v2.0 設計系統產生器基於 79 種可檢索 UI 風格、192 套配色、74 組字體搭配和 192 條產業推理規則,產出精緻的介面而不是通用版面。支援 Claude Code 及其他主流編碼智慧體。複数プラットフォームでプロ仕様の UI/UX を構築するためのデザインインテリジェンスを提供する AI スキル。v2.0 Design System Generator は、検索可能な UI スタイル 79 種、パレット 192 種、フォントの組み合わせ 74 組、業界推論ルール 192 件を活用し、汎用的なレイアウトではなく磨き上げたインターフェースを生み出す。Claude Code やその他の主要なコーディングエージェントで使える。

Design设计設計デザインClaude CodeCursorWindsurfAntigravity+19 more+19 个更多+19 個更多+19 件
npm install -g ui-ux-pro-max-cli && uipro init --ai <agent>

A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集,已收录 70 多个真实品牌系统,包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目,编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch,合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集,已收錄 70 多個真實品牌系統,包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案,編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch,合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。

Design设计設計デザインGeneric
Copy a DESIGN.md file into your project root (no installer; file-drop usage)

Agent skills that give coding agents taste: art direction, reference images, and a browser check instead of generic AI pages. Rather than accepting the first generic layout, the skill pushes the agent to pick a direction, ground it in references, and verify the result in a real browser. Version 2 holds a single skill, design-taste-frontend; older skills moved to taste-skill-classics and imagegen-skills.给编码智能体品味的智能体技能:艺术指导、参考图和浏览器检查,而不是千篇一律的 AI 页面。它不让智能体接受第一个通用布局,而是推动智能体选定方向、用参考图 grounding,并在真实浏览器里验证结果。v2 只有一个技能 design-taste-frontend,旧技能已移到 taste-skill-classics 和 imagegen-skills。給編碼智慧體品味的智慧體技能:藝術指導、參考圖和瀏覽器檢查,而不是千篇一律的 AI 頁面。它不讓智慧體接受第一個通用版面,而是推動智慧體選定方向、用參考圖 grounding,並在真實瀏覽器裡驗證結果。v2 只有一個技能 design-taste-frontend,舊技能已移到 taste-skill-classics 和 imagegen-skills。コーディングエージェントにセンスを与えるスキル。アートディレクション、リファレンス画像、ブラウザチェックによって、汎用的な AI ページを避ける。最初に出た汎用レイアウトを受け入れるのではなく、方向を選び、リファレンスに根付かせ、実際のブラウザで結果を検証するようエージェントを促す。バージョン 2 は design-taste-frontend の 1 件のみで、旧スキルは taste-skill-classics と imagegen-skills に移った。

Design设计設計デザインClaude CodeCodexGeneric
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"