LLMを「機能」として組み込む技術：「Figma to はてなCMS」におけるプロンプトエンジニアリングからAIエージェント構築にわたる精度向上の軌跡

「はてなCMS」には、FigmaでデザインしたページをAI（LLM）を活用して直接取り込む機能が実装されています。この発表では、単なるAIチャットの延長線上ではない「実用的なアプリケーション機能」としてLLMを組み込むためのプロセスを紹介します。デザインからコードへの変換精度をどう高め、どのような検証を経てリリースに至ったのか。開発現場での試行錯誤と解決策を紐解きます。

Transcript

1. )BUFOB
   &OHJOFFS
   4FNJOBS
   
   ʮϓϩμΫτΛࢧ͑Δ"*ฤʯ LLMΛʮػೳʯͱͯ͠૊ΈࠐΉٕज़ id: nanimono_demonai ʮFigma to ͸ͯͳCMSʯʹ͓͚ΔϓϩϯϓτΤϯδχΞϦϯά͔Β AIΤʔδΣϯτߏஙʹΘͨΔਫ਼౓޲্ͷي੻
2. ࣗݾ঺հ Figma to ͸ͯͳCMSͱ͸ ඼࣭޲্ͷ֩৺: Unknown Unknowns ։ൃͷي੻ 2
3. ࣗݾ঺հ • id: nanimono_demonai • @NanimonoDaemon • ΢ΣϒΞϓϦέʔγϣϯΤϯδχΞ • ͸ͯͳCMSͷ։ൃϦʔμʔ • େֶͰ͸ػցֶशʢػց຋༁ʣΛݚڀ͍ͯͨ͠ 3
4. ΠϯτϩμΫγϣϯ 4
5. ͸ͯͳCMSͱ͸ 5 https://www.hatena.ne.jp/cms/ ௚ײతͳૢ࡞ੑ ڧݻͳηΩϡϦςΟ ॊೈͳίϯςϯπ؅ཧ ࠷৽ػೳΛ͍ͭͰ΋ • ͸ͯͳͷ๏ਓ޲͚αʔϏε
6. ʮFigma to ͸ͯͳCMSʯͱ͸ 6
7. ՝୊: FigmaͰ࡞ͬͨσʔλΛHTMLʹ͍ͨ͠ • ղܾ͍ͨ͠՝୊ • Web੍࡞ʹ͓͚ΔʮσβΠϯʢFigmaʣʯͱʮ࣮૷ʢίʔυʣʯͷ෼அ • ػೳ֓ཁ • FigmaͷσβΠϯσʔλΛAI͕ཧղ͠ɺ͸ͯͳCMSͰར༻Մೳͳࣗવͳίʔυ ΁௚઀ม׵ɾऔΓࠐΈΛߦ͏ • ಛ௃ • ϢʔβʔଆͰͷAIܖ໿΍ϝϯςφϯε͕ෆཁͳʮػೳʯͱͯ͠ͷ૊ΈࠐΈ • ͸ͯͳCMSΛར༻Ͱ͖ΔͳΒ͹ɺFigmaϓϥάΠϯܦ༝͢Δ͚ͩ 7
8. ຊ೔ͷςʔϚ 8
9. ඼࣭޲্ͷ֩৺ɿUnknown Unknownsʢະ஌ͷະ஌ʣ • ඼࣭޲্ͷͨΊʹԿ͕Ұ൪େࣄ͔ʁ • ୯ʹରࡦΛଧͭ͜ͱͰ͸ͳ͘ɺʮԿ͕͏·͍͔͘ͳ͍ͷ͔Λ஌Δʯ͜ͱ • Ξϓϩʔν • ·ͣAI͕ಈ࡞͢ΔϓϩτλΠϓΛ༻ҙ͢Δ • ݱ࣮ʹ͍ۙσʔλΛೖྗ͠ɺపఈతʹࣄྫऩूΛߦ͏ • ࣮ࡍʹFigmaͰσβΠϯ͞ΕͨWebϖʔδͳͲ 9 ʮ͏·͍͔͘ͳ͍ࣄྫʯͱ͍͏ະ஌ͷྖҬΛط஌ʹม͑Δ͜ͱ͕ ରࡦΛଧͭͨΊͷେલఏͱͳΔ
10. ຊ೔ͷςʔϚͱ͸ ͲͷΑ͏ͳʮࣦഊʯʹग़ձ͍ɺ Ͳ͏ʮ࢓૊ΈʯͰղܾ͔ͨ͠ͷه࿥ 10
11. ୈʓஈ֊ɿϧʔϧϕʔεͷஅ೦ͱAIͷ࠾༻ • ࠷ॳͷݕ౼ɿϧʔϧϕʔεม׵ • FigmaσʔλʢڊେͳJSONʣΛϓϩάϥϜͰHTML΁ม׵͢ΔطଘϥΠϒϥϦ΍ OSSΛ୳Δ • ݁Ռɿෆ࠾༻ • طଘͷ΋ͷͰ͸χʔζΛຬͨͤͣɺࣗલ࣮૷͸ෳࡶ͗ͯ͢ίετ͕ݟ߹Θͳ͔ͬͨ • ҙࢥܾఆɿLLMͷ࠾༻ • ʮద੾ͳϓϩϯϓτΛ༩͑Ε͹ظ଴͢Δग़ྗ͕ಘΒΕΔʯͱ͍͏PoCΛܦͯ࠾༻ Λܾఆ • Ϣʔβʔʹ͸AIͷෳࡶ͞ҙࣝͤ͞ͳ͍ʮػೳʯͱͯ͠ͷϓϥάΠϯԽΛ໨ࢦ͢ 11
12. ୈҰஈ֊ɿʮਆϓϩϯϓτʯͷݬ૝ͱน • ਆϓϩϯϓτ΁ͷظ଴ • ׬ᘳͳࢦࣔจʢਆϓϩϯϓτʣΛ௥ٻ͠ɺ1ճͷਪ࿦Ͱ݁ՌΛಘΑ͏ͱͨ͠ • Figmaͷੜσʔλ΍εΫϦʔϯγϣοτΛ౉͢ͳͲɺೖྗͷ޻෉ΛڽΒ͢ • ௚໘ͨ͠ʮτʔΫϯ਺ͷนʯ • ڊେͳσβΠϯΛม׵͠Α͏ͱ͢ΔͱɺLLMͷग़ྗτʔΫϯͷ্ݶʹ͋ͨΔ • ݁ՌɿʮԿ͕͏·͍͔͘ͳ͔ͬͨͷ͔ʯ • ग़ྗ్͕தͰऴΘͬͯ͠·͏ 12 ิ଍ (FNJOJ
    
    1SPͰ͸ɺೖྗτʔΫϯ͸ສ͋Δͷʹग़ྗτʔΫϯ͸ສτʔΫϯ͕ݶք ຐ๏ͷढจ୳͠ʹ͸ݶք͕͋ͬͨ
13. ୈೋஈ֊ɿ࠶ؼతϑϩʔʢRecursive FlowʣʹΑΔಥഁ 13 ิ଍ ࠶ؼతʹೖྗ͢Δͱɺલճͷग़ྗ͸ೖྗͱͳΓɺ·ͨೖྗ͸--.ʹͱͬͯ͸ʮਖ਼͍͠΋ͷʯͱͯ͠ѻΘΕ·͢ɻ
    ͜͜Ͱલճͷग़ྗʹΤϥʔ͕͋ΔͱɺͦͷΤϥʔ͕ʮਖ਼͍͠΋ͷʯͱͯ͠ޙଓͷग़ྗʹӨڹ͠ଓ͚·͢ɻ
    ࠶ؼతͳϑϩʔΛ༻͍Δͱɺ͜ͷΑ͏ͳΤϥʔͷ஝ੵΛͲ͏௿ݮ͢Δ͔ߟ͑Δඞཁ͕͋ΔͷͰ͢ɻ • ղܾࡦ • Ұ౓ʹશͯΛग़ྗͤͣɺग़ྗΛෳ਺ճʹ෼ׂͯ͠ܧଓͤ͞Δ࢓૊ΈΛ࣮૷ • খઆͷੜ੒Ͱ͸ষ͝ͱʹৄࡉͳจΛ࡞ΔΑ͏ʹɺHTMLͱStylesheetΛผʑʹग़ྗͤ͞ΔΑ͏ʹ • ٕज़త޻෉ • LangChain.jsΛ࠾༻͠ɺAIϓϩόΠμʔؒͷࠩҟΛٵऩ • લճͷग़ྗΛೖྗʹ໭͢࠶ؼతͳख๏ʢRecurrent FlowʣΛ࣮૷ • ݁ՌɿʮԿ͕͏·͍͔͘ͳ͔ͬͨͷ͔ʯ • ڊେͳσβΠϯ΋ม׵Մೳʹͳͬͨ • ͔͠͠ɺσβΠϯͷதؒ෦෼͕ܽམͨ͠ΓɺҰ؏ੑ͕ࣦΘΕΔ
14. ୈࡾஈ֊ɿAIΤʔδΣϯτߏஙͱࣗݾධՁϧʔϓ 14 ิ଍ --.
    BT
    +VEHFͷϊ΢ϋ΢͸͜ͷαΠτΛࢀߟʹ͠·ͨ͠ɻ • զʑͷ݁࿦ • Agentic Work fl owͷ৺ଁ෦ɿʮࣗݾධՁϧʔϓʢRe fl ectionʣʯ • Generatorʢੜ੒୲౰ʣɿ·ͣίʔυΛ࡞Δ໾ׂ • EvaluatorʢධՁ୲౰/LLM as Judgeʣɿ • ੜ੒෺͕σβΠϯ௨Γ͔ɺෆඋ͕ͳ͍͔νΣοΫ͢Δ໾ׂ • ੍ޚϑϩʔɿ • ෆ߹֨ͳΒվળҊΛఴ͑ͯGeneratorʹࠩ͠໭͠ɺ࠷େධՁճ਺·Ͱϧʔϓ https://hamel.dev/ ࣗ཯తʹग़ྗΛ൑ఆɾमਖ਼͢ΔAIΤʔδΣϯτɾϫʔΫϑϩʔ΁ͷҠߦ
15. ੍ޚϑϩʔ֓ཁ • ࠷ऴஈͰग़ྗΛධՁ͢Δ • ධՁͷ࠷େ਺͸1ճ • มߋͷ༨஍͕͋Δ͕όϥϯε͕ྑ͔ͬͨ • ܁Γฦ͢Օॴ͸ಉ͡ೖྗ͕࿈ଓ͢ΔͨΊ ΩϟογϡΛಋೖ 15 ิ଍ ਪ࿦ʹ͸͕͔͔࣌ؒΔͨΊɺ
    -BNCEBͰͷ࣮ߦ͓Αͼ"NB[PO
    424ͰΩϡʔΠϯά
16. EvaluatorΛʮެฏͳ৹ࠪһʯʹ͢ΔͨΊͷઃܭ 16 • AIͷධՁΛ҆ఆͤ͞ΔͨΊͷ޻෉ • 1. ϖϧιφࢦఆɿ۩ମతͳ໾ׂΛ೚໋͠ɺ࢓༷Λೖྗ͢Δ • 2. ݫ֨ͳϑΥʔϚοτʢJSONʣͰग़ྗ • ػց͕ղऍՄೳͳܗࣜͰɺείΞͱ۩ମతͳվળҊΛఏग़ͤ͞Δ • վળ఺ʹ͸༏ઌ౓΋ग़ྗͤ͞Δ • 3. ग़ྗͱ͸ಠཱͤ͞Δ • Generatorͷग़ྗΛਖ਼͍͠΋ͷͱѻΘͳ͍Α͏ʹ͢Δ • ॏཁͳઃఆ • ʮग़ྗ్͕தͰऴΘ͍ͬͯΔ৔߹͸0఺ͱ͢ΔʯͳͲɺϓϩμΫτͷৡΕͳ͍ϥΠϯΛ໌จԽ͢Δ ਓ͕ؒݟ͚ࣦͭͨഊࣄྫΛEvaluatorʹϑΟʔυόοΫ͢Δ͜ͱͰਫ਼౓޲্ΛਤΔ!
17. ٕज़ج൫ɿLangGraph.jsͱτϨʔγϯά 17 • LangGraph.jsͷ࠾༻ • LLM൛ReduxͷΑ͏ͳෳࡶͳάϥϑߏ଄ͷ੍ޚͱεςʔτ؅ཧʹར༻ • LangGraph.jsͷϫʔΫεϖʔεΛϓϩτλΠϓͱͯ͠׆༻ • ؂ࢹͱσόοάʢLangfuseʣ • தؒεςοϓͷਪ࿦΍πʔϧར༻ɺফඅίετΛՄࢹԽ • EvaluatorͷείΞ΍ίϝϯτ͸ਓؒ΋֬ೝͰ͖ΔΑ͏ʹ͠ɺվળʹ׆༻ • Ωϟογϡઓུ • Vertex AIͷίϯςΩετΩϟογϡΛ׆༻͠ɺAPIίʔϧΛ࠷దԽ
18. ݁࿦ɿAIϓϩμΫτ։ൃ͸ʮ࣮ݧʯͷ࿈ଓͰ͋Δ 18 • ֶͼ • AIͷ੍໿ʢτʔΫϯ੍ݶ΍ਫ਼౓ྼԽʣΛ௚ࢹ͠ɺ࢓૊ΈͰղܾ͢Δ • Ұݟ͏·͍͍ͬͯ͘ΔΑ͏ʹݟ͑ͯ΋ɺҰ෦ͷࣄྫͷࣦഊΛݟམͱ͞ͳ͍ • Ձ஋ͷ֩৺͸ʮ୯ҰͷAIʯͰ͸ͳ͘ɺͦΕΒΛݡ͘࿈ܞͤ͞ΔʮAIγεςϜʯ ͷσβΠϯʹ͋Δ • ਓ͕ؒͦ͜ʮԿ͕͏·͍͔͘ͳ͍͔ʯΛݟ͚ͭଓ͚Δ • ࣄྫऩू͸ɺߴ౓ͳAIΤʔδΣϯτΛϓϩμΫτʹ૊ΈࠐΉͨΊʹॏཁ • ग़ྗ݁Ռͷ࠷௿඼࣭ϥΠϯΛ໌จԽ • ·ͨ৽͍ࣦ͠ഊΛݟ͚ͭͨΒɺͦΕͷରࡦΞϓϩʔνΛಋೖ͢Δ ิ଍ ϓϥάΠϯͷ޻෉͸ͪ͜ΒͷεϥΠυΛࢀর͍ͩ͘͞ɻ https://speakerdeck.com/nanimonodemonai/hatenacmsde fi gmawoqu-riip-musisutemunishi-wareteiruji-shu
19. ऴ 19