Skip to content

For design engineers

Make the design decisions before the first draft.

A polished interface starts with specific choices. Define the layout, visual language, and state behavior so your builder has something concrete to follow.

See the workflow
Example brief3 decisions

Project

A calm analytics workspace

  • Use a compact sidebar and a readable content width
  • Keep type, spacing, and color choices consistent
  • Design empty, loading, and error states together

A starting point to adapt to your project.

Start with

A visual direction that is hard to describe

Leave with

A design brief, CSS tokens, and a state matrix

A practical way through.

Three steps · Free tools · No signup

  1. 01

    Turn the direction into a design brief

    Choose the layout and visual details deliberately. Export a UI prompt and CSS that describe the interface you actually want.

    Visual UI Prompt Builder
  2. 02

    Give repeated decisions a shared value

    Build a set of CSS tokens for the design direction. Review them against the existing design system before introducing new values.

    Design Token Generator
  3. 03

    Design beyond the populated screen

    Specify how each part of the UI behaves while loading, when empty, and when a request fails. Include these states in the implementation brief.

    UI State Matrix Generator

A few details

Before you start.

Can I use my existing design system?

Yes. Use your current components and tokens as the starting point. The tools produce an editable brief and CSS; they do not replace or install a component library.

Can I check contrast and type sizing too?

Yes. The free tools directory includes a color contrast checker, a typography scale playground, and a responsive layout builder.

Does the UI prompt builder create an image?

No. It assembles a text brief and CSS from your choices. Copy the output into your builder or share it as implementation guidance.

Keep your project context close.

Use the free tools on their own, or bring your brief into Archly to prepare prompts for your AI builder.

Explore Archly