satoshi-grm

Design Proposals Skill — Design skill for Claude Code

Design community

Design proposals skill for coding agents: 3-8 visual directions on your real screens, measured, compared, one recommendation.

How to install Design Proposals Skill

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

What Design Proposals Skill does

Design proposals skill for coding agents: 3-8 visual directions on your real screens, measured, compared, one recommendation.

Alternatives in Design

Dna — Place a design in the measured design space — nearest systems, per-axis percentiles, outliers 3.6k ★
Scroll Craft — Claude Code skill for premium scroll-driven websites 1k ★
Website Builder Setup — Build professional animated websites with Claude Code — no coding needed 313 ★

README

design-proposals-skill

A decision booklet for coding agents.

Ask an agent for design proposals and you get three mockups that look the same: a purple gradient, a big number in a card, a device frame. This skill builds a decision booklet instead: 3 to 8 visual directions applied to real screens of your product, captured at real size, with a PDF, a gallery, and a `design.md` plus `tokens.css` per direction. Every direction is measured (AA contrast, no text under 12 px, nothing clipped) and the booklet closes with one recommendation.

The same dashboard and mobile screen in three directions: Marquee, Ticket Stub and Projector

What is inside

A SaaS component library in plain HTML and CSS. Every component reads tokens named like shadcn/ui, and a catalog page renders all of them in each direction's theme.
render.sh, one command: local fonts, 2x captures, a 16:9 PDF, an index.html gallery with filters, and contact sheets for review.
Per direction, a tokens.css ready for shadcn/ui and Tailwind v4, and a design.md your agent can build from.
Measured checks: WCAG AA contrast per direction in light and dark mode, minimum text size (12 px, 28 px on TV), horizontal scroll and clipped text. The build exits with 1 if anything fails.
Rules against the average AI look: no row of