by Sota-Mikami · Claude Skill · ★ 27
Design with Claude Code Claude Code を使った UI プロトタイピングのテンプレートとスキル集。 Blog: 開発スピードを上げたくてClaude Code中心のデザイン環境を組んでみた — このテンプレートが生まれた背景と実際のワークフローを紹介しています。 誰のためのテンプレート？ Claude Code でプロトタイプを作りたいデザイナー・PdM 向けです。 コードが書けなくても OK — Claude Code が全部書いてくれます 「ボタンを赤くして」「余白を広げて」のような自然言語でデザインを進められます Figma → 実装の間の「翻訳コスト」をなくし、実コードでプロトタイプを作れます こんな人におすすめ デザイン案を素早くURLで共有して、チームからフィードバックをもらいたい 複数パターンを作って横並び比較したい プロトタイプから実装仕様書・QAチェックリストまでワンストップで仕上げたい 前提条件 Tip: と で確認できます。 Quick Start できること
| Stars | 27 |
| Forks | 3 |
| Language | TypeScript |
| Category | Claude Skill |
| Quality Score | 60.9802114985576/100 |
| Last Updated | 2026-03-19 |
| Created | 2026-03-06 |
| Platforms | claude-code, node |
| Est. Tokens | ~244k |
Explore other popular claude skill tools:
design-with-claude-code is UI prototyping template & skills for Claude Code. It is categorized as a Claude Skill with 27 GitHub stars.
design-with-claude-code is primarily written in TypeScript.
You can find installation instructions and usage details in the design-with-claude-code GitHub repository at github.com/Sota-Mikami/design-with-claude-code. The project has 27 stars and 3 forks, indicating an active community.