masahiro8

バッカム株式会社代表、UI/UXデザイナー＆プログラマ。Chat-GPTや様々なAIを…

masahiro8

バッカム株式会社代表、UI/UXデザイナー＆プログラマ。Chat-GPTや様々なAIを活用した開発の効率化を研究してます。

プログラムコード生成するときに活用したい生成AIサービス・プロダクトの備忘録

コーディングに関する生成AIサービスはいろいろあり、個人的に何があったか忘れてしまうので備忘録として記載しておきます。 分類 コーディングサポート系 初回プロンプト入力型自動生成系 対話型自動生成系 １．コーディングサポート系 Github CopilotのようにエディターやIDEに入れてコーディングをサポートしてくれたり、IDEそのものに生成AIが組み込まれています。従来のワークフローのまま導入ができるので、既存の過去のコードや現在実装しているコードでも発揮しま

masahiro8

    • Chat-GPTのGPTsを使って、画像からHTMLコードを生成するAIを3分で作る

      　これまで紹介したv0やScreenshot to CodeはUIやウェブデザインをHTMLのコードに変換をしてくれるAIでした。内部的にはOpenAIのCodexやStableCodeのようなコード生成するAIモデルを使っています。同様のことをChat-GPTのGPTsでも作ることができるので、簡単なGPTsの作成手順を紹介します。すぐにできる最小限の設定をしていきます。 Chat-GPTsを設定する 画面左のナビゲーションの中のExplore GPTsをクリックしてGP

      masahiro8

      • 画像からコードを生成する「Screenshot to Code」の様々なデザインのコード生成精度を検証する

        　webサイトやUIを生成するAIは様々あります。私が最初に一番衝撃を受けたのは10web、いくつか質問に答えるだけでかなりそれっぽいランディングページを生成します。前回記事にしたv0は、プロンプトに具体的にUIのイメージを入れて生成します。共通しているのは最終的なアウトプットはUIやW-webサイトのコードということです。 　ところで一般的なwebサイトやwebシステムの開発は、以下のような流れになるとおもます。 ワイヤーフレームを作成 デザイン作成 HTML,CS

        masahiro8

        • UIとフロントエンドのコード生成する「v0」の何がすごいか＆実際に画面を生成する流れを動画にしました

          　Vercelの提供するUI生成システムv0は、自然言語でUIとフロントエンドのコードを生成する画期的なシステムです。弊社ではUI設計とフロントエンド設計・実装を中核として主にシステム開発を行っています。めちゃくちゃ領域が被っていますので登場時から積極的に活用して知見を溜めています。 　今回はv0を使って、システム開発では必須の画面である「ユーザ一覧画面」を生成していく工程を動画にしました。　 v0の特徴　v0はプロンプトからにUIのデザインとコードを生成します。shad

          masahiro8

        プログラムコード生成するときに活用したい生成AIサービス・プロダクトの備忘録

        masahiro8

        • Chat-GPTのGPTsを使って、画像からHTMLコードを生成するAIを3分で作る

          masahiro8

        • 画像からコードを生成する「Screenshot to Code」の様々なデザインのコード生成精度を検証する

          masahiro8

        • UIとフロントエンドのコード生成する「v0」の何がすごいか＆実際に画面を生成する流れを動画にしました

          masahiro8

          Chat-GPTでJavascript+Canvasのコードを生成するワークショップを開催しました

          　最近は知人の会社や、取引先の開発チームに頼まれて、デザインやコーディングでのAIやChat-GPTの活用方法のワークショップをやっています。私はChat-GPTやGithub Copilotが登場し、わりとすぐに開発に導入して活用していました。Github Copilotはコードの補完的な使い方もできてかなり重宝しますね。非常に便利ですべての開発者が導入すればいいのにと思いますが、まわりでは意外と使っていない印象です。 　それでも興味をもっている人も多く、開発者本人というよ

          masahiro8

          Chat-GPTでJavascript+Canvasのコードを生成するワークショップを開催しました

          masahiro8