Pencil.devは現代のイラレ UIから製本、バナー制作まで

Pencil.devは現代のイラレ UIから製本、バナー制作まで Cursor Meetup Kanagawa

雑に画像作るのに使える 自作ウェブサイトの画像とか、コラ画像とか ...

Pencil.dev とは

実は可能性を秘めた ツールなんです...

自己紹介 - Kuu ● ● Software Engineer at Mercari AIAU Codex ambassador Cognition ambassador(Windsurf, Devin) ○ ○ ● 趣味 ○ (海外)旅行

実例その1、本の表紙を描く

実例その1、本の表紙を描く

実例その1、本の表紙を描く デザインセンス0な人が、それっぽいの作れたのすごくない？ 表紙が無いよりはマシ

実例その1、本の表紙を描く

なぜ、Cursor からPencil.dev を使うのか ● ● Cursor はデザインが綺麗だからテンション上がる💅 Composer-2が強い ○ ○ ○ ● 早いのでデザイン改善のスプリントが早い (相対的に) 安く使えるので、気兼ねなく指示できる 性能的にもぼちぼち良い、 Claude 高い💰 リポジトリや本の内容を参照させながら画像作成させれる ○ 必要十分なコンテキストを準備するの大事

Pencil.dev でスマホアプリのUI作る知見 ● ● Webとかの場合はピクセルパーフェクトなUI作れる(らしい) スマホはそうは行かない ○ ○ ○ iOS, Android 両方サポート SwiftUI, Material Design に準拠したデザインにしたい ウェブっぽいデザインになりがち

Pencil.dev でスマホアプリのUI実装するフロー ● ● Pencil.dev でいつも通りUI作る デザインを参照させたまま実装させる ○ ● ● モバイルエンジニア的にひどい実装、改善点しかない 既存実装をプラットフォームのUIに名指しで置き換えさせる 何とかなる

Pencil.dev 使って(AIが)リリースしたアプリ

Pencil.dev で作ったデザインの画像化秘蔵プロンプト

Pencil.dev で作ったデザインの画像化秘蔵プロンプト @design.pencil を画像化して

Pencil.dev で作った画像のサイズ変更方法

Pencil.dev で作ったデザインの画像化秘蔵プロンプト @design.pencil を画像化して、縦が2500, 横が1500でヨロ！

まとめ ● ● ● Pencil.dev は便利 現代のイラレ ご清聴ありがとうございました！

Pencil.devの不満点 Intellij ideaがサポートされてない

まとめ ● ● ● Pencil.dev は便利 現代のイラレ ご清聴ありがとうございました！ このスライドはGoogle slideを利用して 作りました