記事のタイトルのデザインを変えた

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つにまとめ、次の修正を吸収した