genjutsu의 cast, paint, bunshin 스킬로 재구축한 포트폴리오 사이트

README 링크에서 발견 · today

한 디자이너가 genjutsu 스킬을 활용해 포트폴리오에 완성도 있는 룩과 모션을 부여했습니다.

What they did

그들은 대략적인 포트폴리오 레포에서 시작해서 템플릿이 아닌 실제 제품처럼 느껴지길 원했다. 먼저 pricing과 project 카드에 /genjutsu:cast를 실행하면서, 카드가 hover 시 물리적인 느낌이 들도록 요청했다. 이 스킬은 인터랙션 thesis를 제안하고, replay 버튼이 있는 렌더링된 페이지로 보여주었으며, 승인 후에는 레포에 이미 있던 스택(React와 vanilla CSS)으로 모션 코드를 작성한 뒤 변경한 내용에 대한 짧은 audit을 제공했다. 다음으로 /genjutsu:paint를 실행해 전체적인 룩을 확립했다: 브레인스토밍, 비주얼 및 인터랙션 thesis, MASTER.md 디자인 시스템, 재구축된 랜딩 페이지, 그리고 전체 audit. 프로젝트에 이미 부분적인 브랜드가 있었기 때문에 paint는 브랜드를 유지할지, 일부를 변경할지, 아니면 재디자인할지를 물었고, 그들은 팔레트는 유지하고 타이포그래피와 간격은 변경하기로 선택했다. 마지막으로 브리프가 사이트 전체로 커졌기 때문에 /genjutsu:bunshin을 실행했다. 이 스킬은 비용을 미리 명시하고, 두 번 질문한 뒤(tier, 그다음 direction), art director 에이전트가 리서치를 실행하고, 페이지당 한 명의 빌더, 리뷰어와 수정 라운드를 거쳐 stop rule이 루프를 끝낼 때까지 진행했다. 결과물은 사이트와 DESIGN.md, AGENTS.md, 그리고 무엇이 검증되었고 무엇이 검증되지 않았는지에 대한 리포트였다.

How it went

포트폴리오는 일관된 디자인 시스템, 카드와 섹션 전반에 걸친 일관된 모션, 그리고 문서화된 핸드오프(MASTER.md, DESIGN.md, AGENTS.md)와 함께 나왔습니다. bunshin 실행은 검증 보고서와 함께 한 번에 여러 페이지를 생성했지만, 일부 페이지는 카피와 몇몇 반응형 브레이크포인트에 수동 작업이 필요했습니다. 전반적으로 재작성보다는 가벼운 다듬기가 필요한 강력한 초안처럼 느껴졌습니다.

Worth knowing

bunshin은 웹 전용이며 다른 두 스킬보다 비용이 더 들기 때문에, 전체 사이트 브리프에 사용하도록 아껴두는 것이 좋습니다. 설치 시에는 저장소 이름이 아니라 -g와 함께 URL을 사용해야 하며, 그렇지 않으면 스킬이 모듈 없이 도착합니다. README의 예시는 기록된 실행이 아니라 설명을 위한 요청 예시이므로, 결과는 스택과 저장소 상태에 따라 달라집니다. 모션과 디자인 결정에는 여전히 사람의 검토가 필요하며, 특히 접근성과 reduced-motion 처리가 그렇습니다.

Wiring

npx skills add https://genjutsu.athevon.dev -g로 스킬을 전역 설치하거나, Claude Code 세션 안에서 /plugin marketplace add AThevon/genjutsu 후 /plugin install genjutsu를 실행해 /genjutsu:cast, /genjutsu:paint, /genjutsu:bunshin을 받으세요. 단일 인터랙션에는 cast를 먼저 실행하고 thesis를 승인한 뒤, 디자인 시스템과 페이지에는 paint를, 멀티 페이지 사이트에는 bunshin을 실행하세요. bunshin은 지원 모듈이 필요하고 웹 전용이며, art director, builders, reviewers를 스폰하기 전에 비용을 명시하고 tier와 direction을 물어보기 때문에 마지막에 두세요.

Try it yourself

I can't look at the repo — I don't have access to your files, and I don't have any tools here to browse a repository or run `/genjutsu:*` commands. So I can't tell you which genjutsu skill fits, and I can't execute `cast`, `paint`, or `bunshin`.

What I can do is lay out the plan you described so you can run it yourself, and flag the one thing that needs a decision from you.

**Sequence as you specified it:**

1. **`/genjutsu:cast` on the project cards** — target the cards first, not the whole page. The goal is a physical, intentional feel: weight, resistance, follow-through. Ask for the interaction thesis as a rendered page with a replay button, and stop there. No production code until you've seen the thesis.

2. **Review the thesis** — this is the real decision point. If the card interaction reads as specific and earned, the landing page probably doesn't need a full redesign; it needs the cards to carry the page. If the thesis comes back generic (hover lift + shadow, scale on press), that's your signal the current look is too generic and a redesign is warranted.

3. **`/genjutsu:paint` → `MASTER.md`** — set the design system against the stack already in the repo, not an imagined one. This should happen after the thesis is settled, so the system encodes the interaction decisions rather than contradicting them.

4. **`/genjutsu:bunshin`** — only if step 2 concludes the brief is a whole-site redesign. Propose it once, with its cost stated up front, and wait for your go-ahead before running.

**The decision I'd want before you start:** is the redesign a fallback or a live possibility? If it's a fallback, run `cast` on the cards and let the thesis decide. If you already suspect the look is too generic, say so now — because `paint` writing `MASTER.md` against a design you're about to replace is wasted work, and `bunshin`'s cost is better known before `paint` than after.

If you paste the repo structure, the current card markup/CSS, and the stack (framework, styling approach), I can give you a concrete read on whether the current look is generic enough to justify the redesign path — and a sharper brief for `cast` than "more physical and intentional."

Source

English