pencil-to-code

SKILL.md

| frame with layout | | | frame with children | Component with children | | text | , , or | | ref (instance) | Reusable component | | rectangle | with fill | | ellipse | | | image | or fill: url() |

.pen デザインを React/Tailwind コードにエクスポートします。一つのことをうまくやります。 入力: .pen フレーム ID またはファイル パス 出力: React コンポーネント コード + Tailwind 構成 次の場合に使用します: 設計の検討またはユーザーが実装コードを必要とする場合 完成した鉛筆デザインから。 ソース: phrazzld/claude-config。

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/phrazzld/claude-config --skill pencil-to-code インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

安全認証済み、信頼性の高いコード ワンクリックインストール、簡単設定 Claude Code、Cursor などに対応

原文を見る