Replicate any live Chrome web page into a high-fidelity Pencil .pen design file using a team of agents that analyze DOM structure, computed styles, and layout via DevTools; build skeleton frames then detailed UI; and rigorously score visual matches against screenshots across 7 criteria for precise corrections.
Pencil MCP を使って .pen ファイルに画面デザインを構築する専門エージェント。 screen-analyzer の分析結果に基づいてセクションごとに忠実に再現する。 pencil-replicator チームの一員として起動される。
Chrome の実画面と Pencil の再現結果を比較し、差分を検出して具体的な修正指示を出す専門エージェント。 pencil-replicator チームの一員として起動される。
Chrome DevTools MCP を使って Web 画面の構造・スタイル・テキストを徹底分析する専門エージェント。 pencil-replicator チームの一員として起動される。
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub sean-sunagaku/claude-code-plugin --plugin pencil-replicatorプロダクトの基盤情報(課題仮説・ソリューション・市場スコープ・原体験・ビジネスモデル・競合・差別化)を ユーザーとの対話で掘り下げ、構造化されたドキュメント(product-context.md)として整理するスキル。 「自分のプロダクトって結局何なの?」を一緒に整理する壁打ち相手として機能する。 ペルソナ作成、LP設計、機能優先順位、マーケティング戦略など、 プロダクトの方向性に関わるあらゆる意思決定の「前提情報」を1ファイルにまとめる。 コードベースがあれば自動で読み取れる部分は埋め、残りをユーザーにヒアリングする。 Use when: 「プロダクトを整理したい」「ターゲット整理」「コンテキスト作成」 「ペルソナの前に」「誰向けのプロダクトか整理」「プロダクト情報まとめ」 「product context」「プロダクト定義」「プロダクトの前提」 「product discovery」「誰向け」と言われた時。 新しいプロジェクトの立ち上げ時や、方向性を見直したい時にも使う。 ペルソナ作成スキルを使う前に、まずこのスキルでプロダクトの前提を整理すべき。 Triggers: "product discovery", "product context", "プロダクト整理", "ターゲット整理", "コンテキスト作成", "プロダクト定義", "プロダクトの前提", "ペルソナの前に", "誰向け", "プロダクト情報まとめ", "プロダクトって何", "何を作ってるか整理", "どんな需要があるか"
5つの専門エージェント(ブランディング・商標・デジタルプレゼンス・国際展開・コンテキスト管理)がチームで相互フィードバックしながら議論し、最適なアプリ名を決定する
GitHub Actions の CI 失敗を自動検出・ログ取得・修正・再検証するスキル。gh コマンドで PR のチェック状況を監視し、失敗時はログを分析してコードを修正、push 後に再度 CI を確認するループを回す
5つの専門エージェント(UX・ビジュアル・アクセシビリティ・モバイル・コピー)がチームでUIを添削・改善し、Pencilで画面デザインを作成・修正する
実装計画からタスクを分解し、ファイル単位の依存関係を分析して並列実行可能な Wave に自動グルーピング。編集ファイルが被らないタスクは全て同時並列にし、Mermaid 依存関係図 + ディレクトリ分割 TODO を出力する
5つの専門エージェント(UX・ビジュアル・アクセシビリティ・モバイル・コピー)がチームでUIを添削・改善し、Pencilで画面デザインを作成・修正する
Design skill for OpenPencil — op CLI, batch DSL, MCP tools, PenNode schema, and UI design best practices
Open-source, skills-based version of Claude Design (claude.ai/design) for Claude Code. HTML pages, slide decks, interactive prototypes, UI kits, and brand systems — with taste, context-matching, and anti-slop discipline.
Implement UI designs from specs with pixel-perfect component generation
Design workflow for coding agents: discovery, research, strategy, inclusive design, critique, and handoff — enforced automatically
High-fidelity HTML design skill with structured design planning, Iron Law guardrails, and verification-first delivery