Skip to content
Conduit

skill

designed

Claude Code skill (/designed): Apple-grade web pages that fit one screen, plus an effects book you vote on before any animation is wired in. Design system, fluid sizing, fx.js effects library, verific

naulio/designedcommunitylistedunreviewed
Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/naulio/designed itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 22, 2026

designed — a Claude Code skill for Apple-grade pages with validated "dopamine"

/designed teaches Claude a complete way to design and build web app pages:

  • Apple-grade look: light theme, one accent, strong type, soft cards, pill buttons, segmented controls, minimal icons, and a list of things that make a UI look AI-generated.
  • One screen per view: no long scrolling pages. Fluid rem sizing driven by both viewport width and height, so big screens get bigger type and laptops still fit. Narrow windows stack cleanly.
  • An effects book before any animation: Claude proposes 25–45 effects tied to the app's real moments (success, mistake, streak, completion, arrival…), builds a live page where you replay each one and vote Yes / Rework / No with notes, and only then wires in what you approved — reworked per your notes, rejected ones left out.
  • Effects library (fx.js): ripple, burst, shake, glow, streak chips, rings, count-ups, confetti, fireworks, word-by-word headlines, tilt, spotlight… with intensity levels (None / Soft / Full) and reduced-motion support, plus a small settings sheet.
  • Verification: overflow checks at several screen sizes, browser-tool caveats, and a list of pitfalls that cost real time.

It comes from building Recto, a revision app, end to end — including the effects the user loved, asked to tone down, or rejected. Those votes are kept as priors in the catalog.

Install

git clone https://github.com/naulio/designed ~/.claude/skills/designed

On Windows (Git Bash or PowerShell): git clone https://github.com/naulio/designed "$HOME/.claude/skills/designed".

Start a new Claude Code session; the skill appears as /designed.

Use

/designed redesign my quiz app, it looks like AI slop and scrolls too much
/designed add dopamine to the dashboard — show me the effects first
/designed make a landing page and a library for my app

Claude also picks the skill up on its own when you ask to design, restyle or animate a page.

Contents

SKILL.md                      workflow, feedback-to-change table, pitfalls
references/design-system.md   tokens, type, components, icons, anti-slop
references/layout.md          one-screen layout, fluid sizing, view patterns
references/effects-catalog.md effects by moment, defaults, past votes, fx.js API
references/effects-book.md    building, presenting and reading the effects book
references/verification.md    testing checklist
assets/tokens.css             starter stylesheet
assets/fx.js                  effects library
assets/effects-book.html      effects book template (live demos, votes, export)
scripts/px_to_rem.js          px → rem converter
scripts/overflow-check.js     browser snippet: which panels overflow, per route

License

MIT.

↑↓ navigate openesc close