20250301-複雑GUI生成チャレンジ

概要

2025-03-01 20:00〜 Twitter spaceにて

作業通話 + 雑談みたいな感じ

複雑GUIに相当するものをLLMで作り、完成させることを目指します

「複雑GUI生成チャレンジ」タグで呟いてください

お題例

SVGエディタ

ドット絵エディタ

32px * 32px のドット絵エディタを作ってください。モードはペン、太いペン、消しゴム、塗りつぶし、Altキーでの色取得など。グリッド描画もしてください。

https://gyazo.com/dfa53d4b85d158c104ba76eeba92b2a0

ガントチャート

ガントチャートエディタを作ってください。横方向に無限スクロール可能。ホイールでマウス位置を中心にズームできます。空き場所をドラッグで左右にパン。アイテムをドラッグで開始位置を変更できます。ダブルクリックでクリック位置にアイテムを追加。長さは3日をデフォルトにする。アイテムをダブルクリックするとインラインテキストでアイテムないのテキストを編集可能

https://gyazo.com/a2eaeac2c70a9c80eeeea54f76a9c6e8

リッチテキストエディタ

リッチテキストエディタコンポーネントを作ってください。範囲選択でコンテキストメニューを表示し、Bold, fontsize, color, linkを変更できるようにしてください。タグが交差するような選択・スタイル変更をしてもタグ構造が壊れないように分割してください。

https://gyazo.com/656d31678659c410038af989dc45a47a

タイムラインUI

動画エディタ

オーディオエディタ

ペイントツール

ツリーエディタ

ノードエディタ

手法例

Cursor

Cline

planモードで計画したほうが堂々巡りしにくい

.clinerulesでプロジェクトの方針をちゃんと書いておく

Bolt

Copilot agent mode

ストレッチゴール

「一発で」複雑GUIを作り切れるプロンプトを見つけ出し、どこかに共有する

「複数ステップで」複雑GUIを作り切れるプロンプト手法を共有する

初手はどうすればいいのか

ある程度テンプレートは欲しい？