本文へ移動

のために design engineers

最初のドラフトの前に設計決定を行います。

洗練されたインターフェイスは特定の選択から始まります。 レイアウト、ビジュアル言語、状態の動作を定義するので、ビルダーには具体的なものがあります。

ワークフローを見る
事例紹介3つの決定

プロジェクト

落ち着いた分析ワークスペース

  • コンパクトなサイドバーと読みやすいコンテンツ幅を使用する
  • タイプ、間隔および色の選択を一貫した保って下さい
  • 空の設計、ローディングおよび間違いは一緒にの状態をします

プロジェクトに適応する出発点。

スタート

記述が難しい視覚的な方向

ふりがな

設計概要, CSS トークン、および状態の行列

実用的な方法を通して。

3段・無料工具・サインアップなし

  1. 01

    方向を設計簡略に変えて下さい

    レイアウトと視覚的な詳細を意図的に選択します。 UIをエクスポートする プロンプト そして、 CSS 実際に望むインターフェイスを記述します。

    UIプロンプト作成ツール
  2. 02

    共有価値を繰り返し決定する

    セットをビルドする CSS 設計方向のトークン。 既存の設計システムに対して、新しい価値を導入する前に見直します。

    デザイントークン生成ツール
  3. 03

    ポップアップ画面を超えてデザインする

    UIの各部分がロード中に振る舞い、空のとき、リクエストが失敗したときに指定します。 これらの状態を実装の簡略に含める。

    UI状態マトリクス生成ツール

いくつかの詳細

はじめる前に。

既存の設計システムを使うことはできますか?

はい。 現在のコンポーネントとトークンをスタート地点として使用してください。 ツールは編集可能な簡略化を生成し、 CSS; コンポーネントライブラリを置き換えたりインストールしたりしません。

コントラストや型サイジングもチェックできますか?

はい。 無料のツールディレクトリには、カラーコントラストチェッカー、タイポグラフィスケールプレイグラウンド、レスポンシブレイアウトビルダーが含まれています。

UI は プロンプト ビルダーはイメージを作成しますか?

いいえ。 テキストを簡潔に組み立て、 CSS あなたの選択から。 出力をビルダーにコピーするか、実装ガイダンスとして共有します。

プロジェクトのコンテキストを閉じる。

無料ツールを自分で使用したり、簡単なツールを持参したりする Archly 準備する プロンプト AI ビルダー向け。

観光ガイド Archly