bendrape1-byte

Silk Design — Design skill for Claude Code

Design community

A Claude Code skill for building web interfaces that move well.

How to install Silk Design

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

What Silk Design does

A Claude Code skill for building web interfaces that move well. Motion, smooth scroll, and design tokens by default.

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
UI Skills — A growing set of skills to polish interfaces built by agents 1k ★

README

silk-design

A Claude Code skill for building web interfaces that move well.

Most generated pages come out static. Default scrollbars, sections that just appear, hover states that do nothing. This is a catalog of motion and design-token techniques, and it tells the agent to reach for them by default rather than only when asked.

Results

Ten sites built with this skill, they are all in German tho:

[Car-Shop](https://turbo-mottorss.bendrape1.workers.dev/)

[Bakery](https://kronberger-website.bendrape1.workers.dev/)

[Car-Shop](https://a-z-autoservice.bendrape1.workers.dev/)

[Physio-Therapy](https://physio-plus.bendrape1.workers.dev/)

[Cafe](https://a-z-autoservice.bendrape1.workers.dev/)

[Physio-Therapy](https://orthotrain-frankfurt.bendrape1.workers.dev/)

[Hair-Salon](https://the-hair-house.bendrape1.workers.dev/)

[Cafe](https://mina-cafe.com/)

[Cafe](https://cafe-opitz.bendrape1.workers.dev/)

[Cafe](https://uni-cafe.bendrape1.workers.dev/)

Install

git clone https://github.com/bendrape1-byte/silk-design ~/.claude/skills/silk-design

Then ask your coding agent to build a website using the /silk-design skill and give it additional information such as:

Who you are (who this website is for)
What the use case of the website is
Add any additional information, photos or videos for it to use

What's in it

A foundation to apply on every build: Lenis smooth scroll at the root, scroll bounce killed, a nine-token color system exposed to Tailwind, and fluid `clamp()` type. Four things, about fifteen lines, and they do most of the work.

Then an effects catalog with the actual numbers in it. Spring constants, easing curves, stagger intervals, scroll offsets. Word-stagger headings, parallax, pinned and scrubbed sections, scroll-scrubbed video, cursor image-trails, magnetic buttons, curtain menus, marquees. The five larger components in `assets/` are written out in full; the rest are recipes precise enough to type from, which keeps the files sm