記事のタイトルのデザインを変えた
AIと対話しながらサイト全体UI を置き換えるまでの記録
AIと相談しながら記事のタイトルのデザインを変えた。
現在、プライベートでは Pi をハーネスに OpenCode Go の DeepSeek v4.1 flash を使っているのだが、
ポンだしで10案、その後2-3ラリーで40案くらい作ってもらった。
そのタイトルの案ページがこちら。
まず、現在のデザインをベースに作ってもらったが、あまり良いのが出てこず、
おしゃれなデザインを事前に検索してから作ってもらった。
V12、V14、V17、V19 が好みだという答えから、それっぽいデザインを続けて作ってもらったが、結局そんなに良いものは出てこなかったのでV14のネオブルータリズムデザインというものに変更した。
futuraとも相性が良さそうだし。
その後、このデザインをベースにサイト全体のデザインも変更してもらった。
なんというか Opus 4.6くらいから、ほぼほぼコーディングを任せ出したけど、
もうそれから半年くらいしたら 安いモデルで充分デザイン含めフロントエンドのコーディングができるようになったなと感じる。
特にOpenCode Go の CheepSeek v4.1 flash は本当にコスパ最高。今日も1017に勝手にアプデされたし期待!
次は何をしようかな。
あ、非常に残念なことに Deno の置き換えをしないとだった。lume良かったんだけど。
やりとりの記録
AIにまとめてもらったやり取りの記録を書いておく。
| 指示 | 作ったもの |
|---|---|
| 「何パターンか作ってみて」 | 比較ページを作り V0〜V20 を並べた |
| 「あと10種類。シンプルだけどモダン、shadcn 的、インダストリアル」 | V21〜V30 |
| 「あんま伝わってなかったけど、左側のバーみたいなパターンが見たかった」 | V5〜V10(上下罫、背景パネル、縦書きラベル、2カラム、アクセント罫、影付きカード) |
| 「v12, v14, v17, v19 が好き」 | 好みを組み合わせた V31〜V35 |
| 「組み合わせは求めてない。似てるけど色とか位置をずらして」 | V36〜V40(色、太さ、向き、位置) |
| 「v14 にします!」 | 記事ヘッダーを V14(3px 枠 + 6px 6px 0 の影 + 等幅のメタ)に |
| 「Glassmorphism 的なところを丸っとこの感じに。なんていうんですっけ?」 | Neo-Brutalism と答え、カード・ページネーション・ツール類・記事本文を置換 |
| 「このページのデザイン変わっちまってる」 | 比較ページが本番の post.css を読んでいたため、土台を固定した |
| 「リンクできる要素にも pagination と同じアニメーションを」 | カードリンクに a:has(> .neumo) で押し込みを追加 |
| 「若干 radius があるといい」 | カード 8px、操作類 6px |
| 「ホバーは浮き上がりじゃなく押してる感じ」→「もーすこし、ソフトな押し込みで」 | 押し込みに反転し、深さを 2px と 1px に |
| 「ナビのホバーでボタンになるやつはいらない」→「文字色は変えないで、位置だけずらして」 | 位置だけ動かすアニメーション(現在ページの反転チップは残した) |
| 「ここも戻してー」(ソーシャルアイコンの枠) | 素のアイコンに戻した |
| 「ちょっとずれてるように感じる」 | 現在ページと無効項目だけ影が無かったのが原因で、全項目に影を揃えた |
| 「コミットをまとめて」 | 3コミットを 1つにまとめ、次の修正を吸収した |