Rmalnoult

Craft Skill — Design skill for Claude Code

Design community

Frontend design skill for Claude Code & OpenCode: interfaces that look designed, not generated.

How to install Craft Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Rmalnoult/craft-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Craft Skill does

Frontend design skill for Claude Code & OpenCode: interfaces that look designed, not generated. Anti-cliché catalog, font tiers, seeded variation, pass/fail self-review.

Alternatives in Design

Algorithmic Art — Create generative art using p5.js with seeded randomness, flow fields, and particle systems 94.1k ★
Canvas — Open, create, or update a visual canvas — add images, text, PDFs, wiki pages, and banana-generated assets to O 3.3k ★
Deepen — Spare-budget design pass 1.1k ★

README

Craft

**A frontend design skill for Claude Code and OpenCode that generates interfaces that look designed, not generated.**

You can spot an AI-built frontend in seconds: Inter on a cream background, a warm-orange accent, three feature cards with soft shadows, a centered hero with a gradient blob. Ban those and the model converges on the next tier: Syne, Space Grotesk, bento grids, dark-mode-plus-neon, glassmorphism everywhere.

Craft attacks the convergence itself, not just the current batch of clichés.

What it does

Give your agent a brief ("build a landing page for a vinyl record shop in Nantes") and Craft walks it through a disciplined workflow:

Content first. The copy gets written before any CSS. If you could swap the business name and the copy still works, it gets rewritten.
A seeded design direction. Surface family, hue region, layout archetype, and font-pairing category are derived from the product name itself. Two different products provably diverge; the model's "mood" never gets a vote.
Anti-pattern checking. A catalog of first- and second-generation AI clichés (visual, structural, and copy), maintained as the model's habits shift.
A pass/fail self-review. Not "is this good?" but concrete checks: no Tier-1 fonts, no reflex cream, no section that could be pasted into another product's page, WCAG 2.2 AA contrast, 320px reflow.
Screenshot review. When a browser is available, the agent renders the page, interacts with it, and iterates. Runtime bugs (paint order, masks, stuck scroll animations) don't show up in code review.

What makes it different

**Font tiers instead of bans.** Permanent bans just breed the next generation of defaults. Tier 1 (Inter, Roboto, Georgia, system-ui) is never allowed as a primary font: those mean nobody chose. Tier 2 (Syne, Satoshi, Fraunces, Space Grotesk, Geist...) is a rotating watch list: fine fonts, usable only with a written justification tied to the brief.

**A deterministic see