pencil-renderer
✓DNA 코드를 Pencil .pen 프레임으로 렌더링합니다. 한 가지 일을 잘합니다. 입력: DNA 코드 + 구성 요소 유형(영웅, 카드, 폼 등) 출력: .pen 프레임 ID + 스크린샷 사용 시기: 디자인 탐색 또는 기타 오케스트레이터가 렌더링해야 하는 경우 Pencil MCP 백엔드를 사용한 시각적 제안.
SKILL.md
Translate aesthetic DNA codes into Pencil .pen frames via MCP.
DNA axis → Pencil property mapping is deterministic. Example: centered layout → alignItems: "center", symmetric padding
| hero | Container + headline + subhead + CTA buttons | | card | Container + image area + content + actions | | form | Container + labels + inputs + submit | | nav | Container + logo + links + actions | | footer | Container + columns + links + legal | | section | Container + heading + content grid | | button | Frame + text + icon slot |
DNA 코드를 Pencil .pen 프레임으로 렌더링합니다. 한 가지 일을 잘합니다. 입력: DNA 코드 + 구성 요소 유형(영웅, 카드, 폼 등) 출력: .pen 프레임 ID + 스크린샷 사용 시기: 디자인 탐색 또는 기타 오케스트레이터가 렌더링해야 하는 경우 Pencil MCP 백엔드를 사용한 시각적 제안. 출처: phrazzld/claude-config.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
pencil-renderer이란?
DNA 코드를 Pencil .pen 프레임으로 렌더링합니다. 한 가지 일을 잘합니다. 입력: DNA 코드 + 구성 요소 유형(영웅, 카드, 폼 등) 출력: .pen 프레임 ID + 스크린샷 사용 시기: 디자인 탐색 또는 기타 오케스트레이터가 렌더링해야 하는 경우 Pencil MCP 백엔드를 사용한 시각적 제안. 출처: phrazzld/claude-config.
pencil-renderer 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/phrazzld/claude-config
상세
- 카테고리
- </>개발 도구
- 출처
- skills.sh
- 최초 등록
- 2026-02-01