> For the complete documentation index, see [llms.txt](https://docs.robpod.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.robpod.cloud/hmi-designer/design-steps.md).

# Design Steps

Follow the **Design Steps** below to learn how to use ![](/files/b0XsenUiNn5A5nQOXi0r) [**HMI Designer**](/hmi-designer/introduction.md) to develop custom panels for the robot teach pendant.

{% content-ref url="/pages/xoMrizh3Jq7TL3xBk7W6" %}
[Create new HMI Panel](/hmi-designer/design-steps/create-new-hmi-panel.md)
{% endcontent-ref %}

{% content-ref url="/pages/gAnnO43L7POdGXGaFHvl" %}
[Add HMI Components](/hmi-designer/design-steps/add-hmi-components.md)
{% endcontent-ref %}

{% content-ref url="/pages/zUVxVMlGYwzvm4pKgwUQ" %}
[Edit HMI Components](/hmi-designer/design-steps/edit-hmi-components.md)
{% endcontent-ref %}

{% content-ref url="/pages/4j1URa42yygjFOtolPT6" %}
[Synchronize HMI Panel](/hmi-designer/design-steps/synchronize-hmi-panel.md)
{% endcontent-ref %}

{% content-ref url="/pages/riu0Z6hCvmEcHu5kE3S0" %}
[Preview HMI Panel](/hmi-designer/design-steps/preview-hmi-panel.md)
{% endcontent-ref %}

{% content-ref url="/pages/Nbw0Dn2ddhnz1XLpWV7l" %}
[Run HMI Program](/hmi-designer/design-steps/run-hmi-program.md)
{% endcontent-ref %}