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 中使用
這個 Skill 的原始碼在哪？
https://github.com/phrazzld/claude-config
詳情
- 分類
- </>開發工具
- 來源
- skills.sh
- 收錄時間
- 2026-02-01