Generate a new landing page or UI for a brief that avoids generic AI-looking design patterns.
Audit an existing page's code against anti-pattern checks without changing anything.
Redesign an existing page's visuals while keeping its copy and information structure intact.
Study the design DNA of a site you admire and reuse its structure and style choices in a new brief.
| nutlope/hallmark | codebyzach/pace | chalarangelo/30-seconds-of-css | |
|---|---|---|---|
| Stars | 15,432 | 15,616 | 16,047 |
| Language | CSS | CSS | CSS |
| Setup difficulty | easy | easy | easy |
| Complexity | 2/5 | 2/5 | 1/5 |
| Audience | vibe coder | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Installed with a single npx command or by copying skill files into Claude Code, Cursor, or Codex's skills folder.
Hallmark is a design skill for AI coding tools like Claude Code, Cursor, and Codex, built to stop generated web pages from looking like generic AI output. Instead of always reaching for the same layout patterns a model was trained on, Hallmark picks a page structure for the brief, applies one of twenty visual themes, and runs fifty seven automated checks plus a self review before handing back a result. The goal is that two pages built for two different briefs feel like genuinely different sites rather than the same template with different colors. The skill works through four commands. By default it builds new UI from a brief, choosing a structure, applying its rules, and checking the result against its anti pattern tests before returning it. An audit command scores existing code against those same anti patterns without making any edits. A redesign command keeps a page's copy, information structure, and brand but rebuilds the visual structure with a different look. A study command looks at a screenshot or website you admire and extracts its underlying structure, type pairing, and color choices, refusing to produce a pixel for pixel copy or reuse a paid template, and can optionally output a portable design notes file for use with other AI tools. When a brief has creative intent that does not fit any of the built in themes, Hallmark switches to a custom mode and designs a page from scratch with its own palette, type, and layout, while still running the same fifty seven quality checks. Installing it is done with a single command that adds the skill, and it can be re-run anytime to update. It can also be installed manually by copying its rule file and reference files into the appropriate folder for Claude Code, Cursor, or Codex. The project is licensed under the MIT License, so it can be used, forked, and shipped freely.
A design skill for AI coding tools that stops generated web pages from looking like generic AI output.
Mainly CSS. The stack also includes CSS, HTML, Claude Code Skill.
MIT License: free to use, fork, and ship without restriction.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly vibe coder.
This repo across BitVibe Labs
Don't trust strangers blindly. Verify against the repo.