AIに画像からコンポーネントを作らせてみた
1. はじめに
エンジニアの仕事は、だいたい以下の3つの綱引きに集約される
- 速く出したい（納期・見積・工数）
- 品質を担保したい（品質・アクセシビリティ・保守性）
- 誰がやっても同じにしたい（再現性・属人性の排除）
ところが現実には、急ぐほど判断の精度が下がり、精度が下がるほど手戻りが増え、手戻りが増えるほどさらに急ぐ──というループに入る
この記事では、このループを断つために、画像ファイル（SVG）→ 仕様Markdown（合意可能な中間成果物）→ コンポーネント作成（HTML/SCSS/TS）という流れを、Roo codeのような生成AIツールを活用して速度を上げつつ、品質と再現性を担保する手順として整理したかった⋯
SVGとは
SVG（Scalable Vector Graphics）は、XML（テキスト）で図形や文字を線や形の指示（座標）で表す画像形式/* 例：svg */
<画像>
<四角 x="10" y="10" 幅="100" 高さ="60" 色="#ffffff" 枠="#333333" />
<文字 x="20" y="45" サイズ="16" 色="#333333">こんにちは</文字>
</画像>
（※これはSVGっぽい概念を日本語タグで表したXMLで、ブラウザに描画される本物のSVGではない）
PNG/ JPEG / JPGとの違い
- SVG：拡大しても粗くなりにくい（形の指示書）
- PNG：拡大すると粗くなりやすい（点の集まり）
| SVG | PNG / JPEG / JPG |
 |
 |
今回は画像としての特徴（拡大しても荒くならない）ではなく、構造を使っていく
Markdownとは
簡単な記号（#や*など）を使って文章の構造や装飾を直感的に記述し、HTMLへ変換できる軽量マークアップ言語
AIに仕様書として正確に情報を処理させるのに向いている文章フォーマット
# Markdownのかんたんな例
## 1. 見出し
# 大きい見出し
## 小さい見出し
## 2. 文字の強調
**これは太字です**
*これは斜体です*
## 3. 箇条書き
- りんご
- みかん
- ぶどう
## 4. リンク
[Google](https://www.google.com/)
2. 環境・バージョン（検証時点：2026-03-01）
- フレームワーク
-
Angular v17
-
- 使用ツール
-
Roo code（自律型コーディングエージェント）
-
デザイン元：Figma / Adobe Illustrator / Adobe XD
-
3. 期待値
/* html */
<article class="card" id="info-card">
<a href="#" class="card-link-mask">
// タグ
<div class="card-badge">AI</div>
// タイトル
<h2 class="card-title">
SVGファイルからコンポーネントを作成する方法
</h2>
// 説明
<p class="card-description">
Roo codeにsvgファイルを渡し、Md形式でそのデザイン仕様を出力し...
</p>
</a>
</article>
/* css */
:root {
--primary-blue: #0c44ff;
--text-dark: #424245;
--bg-white: #ffffff;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
body {
background-color: #f5f5f7;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.card {
background-color: var(--bg-white);
width: 100%;
max-width: 480px;
padding: 40px;
border-radius: 18px; /* SVGのrx="18"に準拠 */
box-shadow: var(--shadow);
box-sizing: border-box;
}
.card-badge {
display: inline-block;
border: 1px solid var(--text-dark);
color: var(--text-dark);
font-size: 12px;
font-weight: bold;
padding: 2px 16px;
border-radius: 12px;
margin-bottom: 24px;
}
.card-title {
color: var(--primary-blue);
font-size: 28px;
line-height: 1.4;
margin: 0 0 24px 0;
font-weight: 700;
letter-spacing: -0.02em;
}
.card-description {
color: var(--text-dark);
font-size: 17px;
line-height: 1.75;
margin: 0;
opacity: 0.9;
}
/* ts */
/**
* CardComponent
*/
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss'],
standalone: true,
})
export class CardComponent {
/**
* データオブジェクト
*/
@Input() public cardData: {
tag: string; // アイコン名
title: string; // タイトル
notes: string; // 注釈
};
}
4. 実践
手順
- SVG → デザイン仕様（Markdown化）
- デザイン仕様（Markdown化）→ コンポーネント
SVG → デザイン仕様（Markdown化）作成
デザイン仕様を作成するプロンプトを作っていく
次のsvgファイルからmd形式のデザイン仕様を作成して
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 541 561">
<defs>
<style>.cls-1{opacity:0.2;}.cls-2,.cls-6{fill:#fff;}.cls-3{font-size:17px;font-family:HiraKakuProN-W3-83pv-RKSJ-H, Hiragino Kaku Gothic ProN;}.cls-4{letter-spacing:0.25em;}.cls-5{letter-spacing:-0.5em;}.cls-6{stroke:#424245;stroke-miterlimit:10;}.cls-7{font-size:12px;fill:#424245;}.cls-7,.cls-8{font-family:HiraKakuProN-W6-83pv-RKSJ-H, Hiragino Kaku Gothic ProN;}.cls-8{font-size:28px;fill:#0c44ff;}.cls-9{letter-spacing:-0.03em;}.cls-10{letter-spacing:-0.04em;}.cls-11{letter-spacing:0.2em;}.cls-12{letter-spacing:-0.12em;}.cls-13{letter-spacing:-0.11em;}.cls-14{letter-spacing:-0.14em;}.cls-15{letter-spacing:-0.07em;}.cls-16{letter-spacing:-0.06em;}.cls-17{letter-spacing:-0.1em;}.cls-18{letter-spacing:-0.1em;}.cls-19{letter-spacing:-0.04em;}.cls-20{letter-spacing:-0.06em;}.cls-21{letter-spacing:-0.04em;}.cls-22{letter-spacing:-0.14em;}.cls-23{letter-spacing:-0.08em;}.cls-24{letter-spacing:-0.03em;}.cls-25{letter-spacing:-0.04em;}.cls-26{letter-spacing:-0.02em;}.cls-27{letter-spacing:-0.1em;}.cls-28{letter-spacing:-0.09em;}.cls-29{letter-spacing:-0.02em;}</style>
</defs>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<image class="cls-1" width="541" height="561" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAIxCAYAAADpDgqqAAAACXBIWXMAAAsSAAALEgHS3X78AAAgAElEQVR4Xu3d23IbR5Bo0SIlz/z/586xJZ4HqqxiKuvSIJig5LUiOvqCRhNoP9RmAZSfXl5eGgDAR3venQAAcA+iAwAo8XV3wp/g6enpaXcOADzayx/+nYen3/H9iQgA+P0i5dNHh8AAgHOfOUQ+XXTcITLe+3wA+EzeNVB/pgj5FNFxMTSunAsAf7rjgfzRAfLQ6DiIjdXju+cCwJ9sNYAvB/dHxcdDomMTG/GxK+few0dcE4D/ro8YaK8Ex/Tc6vgojY5FbOxCI3veaRycngcAn8HpwJydtwuO9NpV8VESHZPYWIXFLjp2+5mTcwDgUU4G5F1ErPZ35354fHxodBzExr22s/1o9zgAPNJuQD4Nivdsvx74oDj4kOi4MTZWx1bnxO1sHwB+R1dDY7beHYvbrwfuHAl3j45NcFwJi6fDczrhAcCf5CQ4VuuTc7rs2OuBO4bC3aLjwuzGLi5OtuOx8XjcjsQIAJ/JaiB+T2icbGfruP164A7BcJfouDi7sYqKccmOZ8/L1nF7JDoA+ExmA/FpcMTtccmOz57XZRHyeuCd0fDu/8vsYXBkERH3ryxtsd33R0IDgN9BHNRjDJzGxm6ZeWmvY+a4/tfT09PTe8Lj3dGRmIXGuL1ang+OZ9dqyboTHQD8DmbRMQuM8dj35PHV8RggWXD8Eh7v8a7oSGY5ZsER92NYPF/czpaWbI+EBwCf2So4ZtExi4tx+yk51vdHY2BMw+M9sx03R8fF4MiW58V69djuull0CA4Afgdx5qGvd8v3xTrGQ38su/bo7uFxc3QEp8ERZy5iYMRldt4uOoQHAL+b9wTH97Cd7T+Fdb9+nPEYTcPjFjdFR5jluBocWVxcXU7ioyXrSIgA8AizwfslWa9iI4bFavnW3gbHaXyk4XHLbMfl6Dj4a5VZcGTR8SXZzo6t4iMLkBa2+34kOgB4hGywHo/1sBi3Y2jMguNbsj0GR4yP9mP7ORwbPW6mYxAH9VVwZMuX9jY24v4sRnbh0ZLtTmgA8JnE2OjruL0LjjEw+vbzj+3n4fjTsB7HxFl4xOD4d/vqbMel6Nh8rDIe3wXHlwtLFicxOsbgGJeWrOM2ADzKLDj6Oi49MPp2nNWISx8rx8j49uP62VgYw2MWHOOxY5eiIxFnFWJwxPiIEfH1YHsWIbeER9wGgEdbzXSsgiPOaoyx8U/Yjp8OjPERfW/5+NlaEhxXZjuOo2Myy9G3Z0uc3ejrr8l6tp1FyGwGZfY6ullwCBEAKswG5xgeq+iIH6lky5f2Mzyef2zPxsaZMT5Gcdbj2HF0JOIL2cVGFhynSwyPbLZjFR0n4XH6OABcsRuYT4Iji44sNnpo9PEym+VobT7WjTMt4/nxPbwJjtPZjqPoOJzliPtjfMSPTXpM/JVsj8ey+NjNeMyC40p4dKfnAcBoOwD/EIOjr3fBMfs45Z8fS/Y1hNkv4639+vOeh8eyGY+bZjuOoiMxC48YG3HGIwuOv8KyC5AYHeONfRrWWXBkAQIAj/KyWMfgeGk/v78xRkcMjr/bPDpGMTRash3H0zEw3gTHyWzHNjoOZjn6dhz0s+CIH6uMsfE/Yf9KeMQbG29wFhvCA4BHms1y9HUPjjjTMX5xdBYcf7dfx8YoC5wvw/ZzexsefTs+/9g2OhJZePTlNDhiXPxP+xkdu/hYfb8jBscuPLJ9APhIcbBezXLE4BjDIwZH/1glC45ZdGTL87Cdjafx9fcg2c52XImOLDbG7TE8suCYzXT8T1j+StZXZjtieLRkHbdXxwDgvbKBeDw2C4840xFnOeISx8UYDF0WNn39JXm8X6Nvx2sdWUbH4v8kO+7PlhgfYyxkH61kyxges9mOcaZjNtvRhnXczvYB4CPEAXoWHqvoiF8g7R+rrL5AGq87Xn9cenA8t59fII3LcWREV2Y6uvjDx+PPyTKb6Yjf5eih8b8tD4/4/Y543SszHVlkCA8APtJqtmM10xG/RBqDY/WxSrcKjbiM18hmO7Lw+PfY6iOW0+hYDdJZBZ0ERwyPMTiy8Igfs/TrXZ3piKEEANVmMxx9fTLTsftYZTQLjvHf9MjCY5ztGGXX35pGx+ajlZPgiLMd8TsZsy+TZuGRzXaIDgB+V7dEx2ymY5zh6GPgaDW70a/15cd6vM5qOYqM6HSmo4uDeBYcMTxmsx0nH7H8b3gsfqF0LLsv7dfXMAuOXWzsHgeAE6vBeRcecZYjznTMvmIwjmGz2Y1sieGRzXaswmMbI1ejI7MKj/FGZMFxEh67j1huiY64HYkOAO6hIjqycW8VG3+1nzMlcWJgDI8sNEZjZLwJjtn3Ok6iIxuA4wsY32zfns10jPGRfcQyhkePjzjT8ddwnRg38bUIDgAe6Zbw2H28Mv6lShzv4vOz2Y0+DmffBxmXLDz68hJ+5lYaHYff5+jb45K94Bge8bsdWXzMIuSW6GiL9czucQA4cUtw9PX3sB6j47m9BkMWHNnsRhx3swmBOJaO4/r4EcvNTmY6ujiIx+1ZgIwff9wSH7d+vBL/Q4w3anfTdo8DwIndDMCVmY7xo48YB9nzxuj4p70dO+MYOlviWNrCsd37e+NKdGRWsRFnOsbwGN/0GByrWY9bo6Ml67gNANV2Mx0xOr63PDbG8/u5f7X5DEc207ELjiw+MssQuSU6dtUzC5BspmMMj9nsR5wF6dv9/DFqdrMcogOAz+IkOuLHJbMAGM9dfaSSBUcMj9nPmI2laWRkXybdRcduYD6JjWzWYwyPVXD8tTiWRcfTsM6iI26Pdu8VAN5jNgOQBUdf99mNLDr6OWOYfG2/Rkccb1czHNk4mo2n/dhLsp76JTqSL5G+eTjZji9gDI8YILO6ym5GdqO+Jo/Hm7a6SXF7JDoA+Ei76OjbY3T04MjGtnE25Gv7OcsxG2uzyIhj5yw4ZmNqtw2O1vYzHa3N42L2WFZLszeZhcisxk6nhMYb1pJ13AaAR5l9xNK3T4Kjz3KcxEYWHnHsnsVGC9uXnURHa/Oq6evVsguO2f7qhn1pb8//Mvys7Ebd7YYBwB3F2YE40/HUfv1z1Zf2Ou6N0dH/qmU2Ru7CY4yP1ZjejePrdoajO42OmfgCsuA4jY+TOstu2nhsdoNiaAgPAB6tR0Xcz2Y84rH+0cuVMTLGxUlwdON4elNwtHY9OrJBfDa4n8TGybIrtKdkvXpNAPAZ9DGpD9zj/jjL8dx+znY8tzw6ZuPtahyOgbFa2rC+2dXoaO3tD88G9N0L78suNuJNySLjaXIsu0mnN+v0PAA4sZsNeErO6cd6cDz/OB6PZWNhdnw3Xq6Wq7L301q7LTqi3YvNlllAxMdm+9nx3c06vXGn5wFAhR4ZfeyL4TH7hTwu2Zg7Gy9n+3F9yT2iI7MLgfGmxJsTb1i2fxIb2Y256SYBwDvsxp743Y7Z4+O4thtPd+Pjbuwcf864P64vW0XHyUXjC4g3ZTwv3pjVsoqP06Ul61F2DACqZN/l6PvjxxPj/mxsfe+SXe/ubp3p2A3sszewOt6XLDDiNbN1lN20D7mJAHCDPiZl8ZGNX9nYOD4vHluNl7Mx9hZPbf+9ldba6wB/T1fe5GyJ57bD9ew64+MA8NmcjlGzsW927MpzduuT1/eL+K+cX5npuPIDd2/y9IaM++OSPS86fRwAqmUzA0/t13+rI3ustbdj2OzYaryMY+Ds3NVY2X/G0SxHa9eiYyWGQnxstr27IbtrZuvVDernAMAj9bFoNWDvzpmNo9m4u3u8xJuPVzb/s7fW9oN6vAG77b4f16vHZ06es7sGAFSajVOrMNiNxbNzdj/rlmtecu/vdHSzFxVv4uoNzx4/vTnR1fMBoMLp+DQb9Ffj4iw+dkHyIT4qOlZ2b/SkpGKcAMCfYhUW8djql/N47rh+iPdGx5VA2IXC6kbdchN3Pw8APot7j1Mn43Pm1ucdeW90nNpFxu7x1TEAYO/h42dVdFwhLADgflZjaul4+5HRcRoPJ+cAAK9Ox9fWzs8r8ZHRAQB8Dp8iPqqjYzfFc3pTrpwLAL+jq2PdlXNbu37+ytG1qqMDALiv+IcZRwHwCJ8lOu51gz71zQaA/7LT6LjnQH71WlfPBwDWHjK2nkbHo5nBAIDf3GeODqEBAH+QzxwdAMAf5FHRYQYDAP5jHhUdAMB/jOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCghOgAAEqIDgCg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"/>
<rect class="cls-2" x="30.93" y="25.07" width="480" height="500" rx="18"/>
<text class="cls-3" transform="translate(70.93 235.53)">Roo cod<tspan class="cls-4" x="70.69" y="0">eに</tspan>
<tspan x="106.18" y="0">sv</tspan>
<tspan class="cls-4" x="124.56" y="0">g</tspan>
<tspan x="139.71" y="0">ファイルを渡し、M</tspan>
<tspan class="cls-4" x="291.77" y="0">d</tspan>
<tspan x="307" y="0">形式でその</tspan>
<tspan x="0" y="29.75">デザイン仕様を出力し、出力されたデザイン仕様を</tspan>
<tspan x="0" y="59.5">もとにコンポーネントを作成してもらう</tspan>
<tspan class="cls-5" x="306" y="59.5">。</tspan>
</text>
<rect class="cls-6" x="72.21" y="65.1" width="60" height="24" rx="12"/>
<text class="cls-7" transform="translate(95.96 81.73)">AI</text>
<text class="cls-8" transform="translate(70.95 142.62)">
<tspan class="cls-9">S</tspan>
<tspan class="cls-10" x="19.14" y="0">V</tspan>
<tspan class="cls-11" x="39.94" y="0">G</tspan>
<tspan class="cls-12" x="67.59" y="0">フ</tspan>
<tspan class="cls-13" x="92.19" y="0">ァ</tspan>
<tspan class="cls-14" x="117" y="0">イ</tspan>
<tspan class="cls-15" x="141.01" y="0">ル</tspan>
<tspan class="cls-16" x="167.03" y="0">か</tspan>
<tspan class="cls-17" x="193.47" y="0">ら</tspan>
<tspan class="cls-18" x="218.69" y="0">コ</tspan>
<tspan class="cls-19" x="243.96" y="0">ン</tspan>
<tspan class="cls-20" x="270.76" y="0">ポ</tspan>
<tspan class="cls-21" x="297.05" y="0">ー</tspan>
<tspan x="323.85" y="0">ネ</tspan>
<tspan class="cls-22" x="0" y="49">ン</tspan>
<tspan class="cls-23" x="24.13" y="49">ト</tspan>
<tspan class="cls-24" x="50" y="49">を</tspan>
<tspan class="cls-25" x="77.27" y="49">作</tspan>
<tspan class="cls-26" x="104.17" y="49">成</tspan>
<tspan class="cls-27" x="131.68" y="49">す</tspan>
<tspan class="cls-28" x="156.86" y="49">る</tspan>
<tspan class="cls-29" x="182.44" y="49">方</tspan>
<tspan x="209.77" y="49">法</tspan>
</text>
</g>
</g>
</svg>
==== 10分後 ====
# SVGファイルからのデザイン仕様
## 概要
Roo codeにsvgファイルを渡し、Md形式でそのデザイン仕様を出力し、出力されたデザイン仕様をもとにコンポーネントを作成する。
## デザイン要素
### ヘッダー
- **テキスト**: "SVGファイルからコンポーネントを作る方法"
- **フォントサイズ**: 28px
- **色**: #0c44ff (青系)
- **文字間隔**: 変化あり
### タグ
- **テキスト**: "AI"
- **背景**: 角丸矩形 (rx=12)
- **サイズ**: 60px × 24px
- **位置**: ヘッダーの下部に配置
- **フォントサイズ**: 12px
- **色**: #424245 (グレー系)
### 説明文
- **テキスト**: "Roo codeにsvgファイルを渡し、Md形式でそのデザイン仕様を出力し、出力されたデザイン仕様をもとにコンポーネントを作成してもらう。"
- **フォントサイズ**: 17px
- **フォントファミリー**: Hiragino Kaku Gothic ProN
- **色**: #000000 (黒系)
- **位置**: タグの下部に配置
### 全体構成
- **背景**: 白色 (#ffffff) の角丸矩形 (rx=18)
- **サイズ**: 480px × 500px
- **余白**: 上下左右30px
## 色情報
| 要素 | 色コード | 使用箇所 |
| ---------------- | -------- | --------------------------------------- |
| ヘッダーテキスト | #0c44ff | SVGファイルからコンポーネントを作る方法 |
| タグテキスト | #424245 | AI |
| 説明文 | #000000 | 本文 |
## フォント情報
- **ヘッダー**: Hiragino Kaku Gothic ProN, 28px
- **タグ**: Hiragino Kaku Gothic ProN, 12px
- **説明文**: Hiragino Kaku Gothic ProN, 17px
はやい、なんか良さそう！
デザイン仕様（Markdown化）→ コンポーネント作成
デザイン仕様をもとにコンポーネント作成してもらう
作成したデザイン仕様を元にコンポーネントを作成して
==== 10分後 ====
| 出力結果 | 期待値 |
 ※グレーの背景はコンポーネントをわかりやすくするため |
※高さを合わせるための隠し文字 |
スゴイ！？
⋯けど、なんか色々違うっ！？
5. デザイン仕様がまちがっていた
間違っている仕様
- タイトル文言が正しくない。 現在の文言では「作る方法」となっているが、正しい文言と一致していない。
- 要素の上下関係が正しくない。 仕様ではタグがヘッダーの下、説明文がタグの下と読める構成になっているが、実際の構成順と一致していない。
- 余白仕様が正しくない。 全体余白を「上下左右30px」としているが、実際の余白設計と一致していない。
- 説明文の色が正しくない。 黒として記述されているが、実際の本文色と一致していない。
- タグの位置説明が正しくない。 「ヘッダーの下部に配置」という説明は、構造順序と見出しとの関係を誤解させる。
- 文字間隔の扱いが不正確である。 「変化あり」という記述だけでは仕様になっておらず、実装可能な定義になっていない。
6. 仕様が足りてない
不足していた仕様
- レイアウト方式の記載がない。 コンポーネントをどのようなレイアウト方式（flex, grid etc ..）で組み立てるかが不明である。
- アスペクト比の記載がない。 固定サイズだけではなく、縮小時の比率を維持するための仕様が必要である。
- シャドウの記載がない。 背景カードの見た目に必要な影の情報が欠けている。
- バッジの枠線仕様がない。 枠線の有無、線幅、色が不足している。
- タイトルの詳細タイポグラフィが不足している。 行高、ウェイト、最大行数、最大幅が記載されていない。
- 説明文の詳細タイポグラフィが不足している。 行高、ウェイト、最大行数、最大幅、タイトルとの間隔が記載されていない。
- 要素間の余白が不足している。 バッジとタイトルの間、タイトルと説明文の間の余白が定義されていない。
- トークン設計がない。 色をコード値で書くだけで、トークン名とフォールバックの設計がない。
- 入力設計がない。 どのような
dataを受け取り、どの階層に表示テキストを持つかが定義されていない。 - コンポーネント化ルールがない。 SVG を完成形として残さないこと、HTML/CSS へ再構成することが明示されていない。
- HTML 構造の方針がない。 タイトルを見出し要素で表現すること、説明文を段落要素で表現することが書かれていない。
- アクセシビリティ方針がない。 テキストを読める構造にすることや、装飾用途時の扱いが定義されていない。
- テキスト改行方針がない。 明示指示がない限り改行しないことが記載されていない。
- スタイル適用方針がない。 クラスで付与すること、inline style を使わないことが書かれていない。
- 余白付与ルールがない。 要素固有クラスではなく、専用のマージンクラスで余白を管理する方針がない。
- 単位ルールがない。 フォントサイズを
remで扱うなど、実装時の単位方針が定義されていない。 - レスポンシブ方針がない。 最大幅・最大高さを守りつつ縮小する方針が不足している。
- 文書版とコード版の両方を持つ前提がない。 実装と同期できる仕様管理の観点が不足している。
- 実装責務分離の観点がない。 コンポーネントは表示専用、整形は外部で行うという前提が書かれていない。
7. 課題
1) SVG → 仕様化（デザイン仕様Markdown）での課題
- SVGが座標ベースなので、UIのレイアウト仕様Jに翻訳が必要
padding/gap/flex・gridなど、実装できる言葉に落とさないとズレる。 - 書き出しSVGは情報が過剰 or 欠落しがち
例：影がPNGで入っていて数値化できない／本文色が明示されない、など。 - タイポが実装仕様になりにくい
<tspan>分割や文字単位 letter-spacing があると「完全一致」を目標にすると破綻。 - 仕様の粒度が揺れる
「字間が変化」みたいな言い方は仕様にならない（実装可能な定義＝範囲/値/優先度が必要）。 - 未確定(TODO)の扱いが仕様に入ってないと生成が暴走する
不明点は「推測で埋めるな／TODOで止める」ルールが必要。
2) 仕様Markdown→コンポーネント作成での課題
- DOM構造と責務が曖昧になりやすい
見出し（h2）/本文（p）/ラベル（badge）など、セマンティクスを決めないと後でa11yで戻る。 - 入力（Props/@Input）設計がないと再利用不能 or 肥大化
title/body/badge/variant/clickable/disabled の境界を決めないと、使う側が迷う。 - テーマ/トークンに落とせないと運用で死ぬ
SVGの色直書き（例：#0c44ff）をそのまま持つとダーク/ブランド差分が崩れる。 - レスポンシブ・可変テキストで崩れる
SVGは固定サイズ前提。実装は文章増減・翻訳増減に耐える設計が必要。 - 影の再現
PNG影をCSS box-shadowに置換する際、最終的に目視調整が発生する。
3) 自動生成（Roo code）を挟むことで増える課題
- 一般解で出すのでプロジェクト規約とズレる
命名、トークン、a11y、禁止事項（inline style禁止等）を渡さないと事故る。 - 仕様の空白を勝手に埋める
タイトル文言・順序・余白などを断言してしまい、手戻りが後ろに集まる。 - 余計なDOMが増えがち
それらしく見せるためのdiv増殖→保守性低下。 - レビューコストが読みにくい
初速は上がるが、仕上げの微修正が積み上がりやすい。
4) AIの課題（コンテキスト上限がある）
4-1. 入力が長いほど守るべき制約が落ちる
- SVGコード、プロジェクト規約、過去の指摘、期待するDOM、トークン…
全部いっぺんに渡すと、AIは一部を読み落とす（特に後半の制約が抜けやすい）
4-2. 長文の仕様は効かない（読まれない）
- ルールを丁寧に文章で書くほど、AIが重要度を誤判定して守らない
- 結果：「それっぽいが規約違反」「a11y抜け」「余白違い」が頻発
4-3. 会話が進むほど「初期条件」が薄れる
- 途中で追加した禁止事項や、決めたはずの前提が後のターンで弱くなる
- 前に言ったよねが通りにくい
4-4. 仕様の空白を勝手に埋める
- コンテキストが足りない/曖昧だと、AIは断言で埋める
- その断言が「誤り」になって、後工程で手戻り
4-5. 出力が長いほど整合性が壊れる
- HTML/SCSS/TSの3点セットは、後半ほど齟齬が出やすい
- 例：propsは増えたのにテンプレが使ってない／CSSクラス名がズレる
8. まとめ
現状、コンポーネントのSVGだけで速度を上げつつ、品質と再現性を担保することはできなかったが、AIの能力に合わせた運用をすればなんとかできそう、という希望が見えた
