Using Images / Diagrams to communicate to AI

This doesn’t always work 100%, but it will definately cut down on dev time.
See attached image:

If you have complex designs and are super specific in your UI.
Design a DIAGRAM and attach it to your PROMPT:

"See attached:
This image is a diagram of what we need to create.
The informatioon in the color teal are NOTES.
The information in Pink are the Component Attributes.

  1. Review the “END RESULT”, this displays the Whole module and where the compnent will live.

  2. Next view the component outside of the Module.

  3. Each element of the component is separated and the attributes for each are shown.

Follow the attributes and build this component.
Review the Diagram and then create, Compare your work to the diagram carefully. Do this 3 times to ensure your work is complete."

1 Like

why not use figma mcp server