图像大厨imgcook

imgcookは、デザイン稿をフロントエンドコードに変換するデザイン-to-codeツールです。Sketch、Photoshop、VS Code、CLIに対応し、プラグインと開発者向けのワークフローを提供します。

概要

imgcook は、デザイン稿をフロントエンドコードに変換するデザイン-to-code 製品です。ホームページでは、画像ベースまたはデザインツール由来の素材をコードに変換するツールとして位置づけられており、ドキュメントでは、コード生成前にデザインレイヤーからレイアウト情報とスタイル情報を抽出すると説明されています。

この製品は、単一のエクスポートボタンではなく、プラグインと開発者向けのワークフローを中心に構成されています。ソースページでは、Sketch と Photoshop のプラグイン、imgcook エディター、VS Code プラグイン、そして imgcook CLI のサポートが説明されており、生成コードをローカルプロジェクトや既存の R&D プロセスに取り込めるようになっています。

特徴

デザイン稿からコードへのプラグイン

Sketch プラグインまたは Photoshop プラグインを使用して、デザイン稿からレイアウト情報とスタイル情報を抽出し、レイヤー要素からコードを生成します。

複数の入力・出力パス

プラグインのワークフローを通じて生成コードを出力するか、デザインファイルを imgcook エディターにアップロードしてそこから作業を続けられます。

CLI ベースのプロジェクト統合

imgcook CLI を使用して生成されたコード成果物をローカルプロジェクトに取り込み、エンジニアリングのワークフローに組み込めます。

VS Code エディターワークフロー

VS Code プラグインを使用して、デザインツールの出力をエディターに貼り付け、コードを生成し、対象フォルダーへエクスポートできます。

公式 DSL サポートとカスタマイズ

react、rax、Vue、applet を含む 10 種類のコードタイプに対する公式 DSL サポートを利用でき、その他の出力向けにはカスタム DSL サポートもあります。

カスタムエクスポート処理

エクスポート時にカスタムプラグインを適用して、画像を個人のアセット領域へ移動したり、ファイルディレクトリを変換したりするなど、コード成果物を処理できます。

利用例

モックアップからのデザイン引き継ぎ
デザイナーは Sketch または Photoshop のプラグインをインストールし、下書きからレイヤー情報を抽出して、静的なモックアップの代わりに生成されたコードを引き渡せます。
ローカル開発への統合
フロントエンドチームは CLI または VS Code プラグインを使って生成コードをローカルリポジトリに取り込み、通常のツール内で実装を続けられます。
フレームワーク別コード生成
フレームワーク固有の出力が必要なチームは、react、rax、Vue、applet を含む公式 DSL から選択するか、自分たちの対象スタック向けに DSL をカスタマイズできます。
エクスポート時のコード処理
エンジニアリングチームは、エクスポート時にカスタムプラグインを適用して、画像の移動、フォルダーの再編成、またはプロジェクト投入前の生成コードの後処理を行えます。
反復制作のためのプラットフォームワークフロー
プロダクトチームやプラットフォームチームは、デザイン素材管理、コード出力、プラグインベースの編集を組み合わせた社内ワークフローの一部として imgcook を採用し、繰り返しの制作に利用できます。

Pros and Cons

Pros

プラグイン、エディター、CLI、VS Code ワークフローを含む、複数の作成・配信パスをサポートしています。
Sketch と Photoshop の両方のプラグイン導入手順が記載されており、異なるデザインツールを使うチームに役立ちます。
10 個の DSL を公式に提供し、他のコード出力向けにカスタム DSL 生成も可能です。
デザインを平坦な画像として扱うのではなく、デザインレイヤーからレイアウト情報とスタイル情報を保持するコード生成ワークフローを示しています。
エクスポート時に生成されたコード成果物を後処理するためのカスタムプラグインが含まれています。

Cons

収集したソースでは価格ページが not-found ページを返しているため、価格情報は利用できません。
利用可能なソースでは、文書化されているプラグインと DSL の記載を超えて、対応するデザインツールや対象フレームワークの全体像を明確には確認できません。
収集した証拠の一部ドキュメントページは内容が少ないかアクセスできないため、いくつかのワークフロー詳細は部分的にしか確認できません。

FAQ

imgcook はどのようにデザインをコードに変換しますか？

Imgcook は、プラグインツールとエディターを通じてデザイン稿をフロントエンドコードに変換するワークフローを提供します。ドキュメントでは、Sketch と Photoshop のプラグインに加え、生成されたコードを出力するための imgcook エディタのワークフローが説明されています。

imgcook はどのようなプラットフォームやワークフローに対応していますか？

ソース資料では、Mac 向けの Sketch プラグインと、Mac と Windows の両方に対応する Photoshop プラグインが示されています。あわせて、生成コードをローカル開発のワークフローに組み込むための imgcook VS Code プラグインと imgcook CLI も記載されています。

imgcook はどのような出力を生成しますか？

インストールガイドでは、imgcook がデザイン稿から位置やスタイルなどの情報を抽出し、レイヤー単位の処理を通じてフロントエンドコードを生成すると説明されています。ホームページでも、生成したコードをエクスポート、アップロード、またはローカルプロジェクトに統合できると案内されています。

imgcook は異なるフレームワーク向けのコードを生成できますか？

ホームページでは、react、rax、Vue、applet を含む 10 個の DSL への公式対応が説明されており、ほかのコード形式を生成するために DSL をカスタマイズすることもできるとされています。

imgcook の料金はいくらですか？

収集したソース内の価格ページは not-found ページを返しているため、利用可能な証拠からは価格情報を確認できません。

Quick Facts

カテゴリ: デザインツール / 開発者ツール
ソースドメイン: imgcook.com
主なワークフロー: デザイン稿からフロントエンドコードへ
対応デザインツール: Sketch と Photoshop のプラグイン
開発者向けワークフロー: imgcook CLI と VS Code プラグイン
価格: 収集したソースでは未確認