UI Maker

mkui.sh

#! /bin/bash

# Check if an argument is provided
if [ $# -eq 0 ]; then
    echo "Error: Please provide a prompt as an argument."
    echo "Usage: $0 <prompt>"
    exit 1
fi
echo "Prompt: $1"

# Load the schema file
SCHEMA=$(cat schema.xsd)

# Include the schema contents in the PROMPT variable
read -r -d '' PROMPT << EOM
You are a professional interaction designer. Use the schema to arrange interfaces.

$SCHEMA
EOM

echo "$1" | \
cgpt \
-b "anthropic" \
-m "claude-3-5-sonnet-20240620" \
-s "$PROMPT" \
-p "<?xml version="1.0" encoding="UTF-8"?>"

schema.xsd

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

    <!-- Simple elements -->
    <xs:element name="title" type="xs:string" />
    <xs:element name="subtitle" type="xs:string" />

    <!-- Definition of attributes -->
    <xs:attribute name="id" type="xs:string"/>
    <xs:attribute name="title" type="xs:string"/>

    <!-- A row is used to display basic information -->
    <xs:element name="row">
        <xs:complexType>
            <xs:sequence>
                <xs:element ref="title" use="required"/>
                <xs:element ref="subtitle"/>
            </xs:sequence>
            <xs:attribute ref="id" use="required"/>
        </xs:complexType>
    </xs:element>

    <!-- A list is used to display rows of content -->
    <xs:element name="list">
        <xs:complexType>
            <xs:sequence>
                <xs:element ref="row" maxOccurs="unbounded"/>
            </xs:sequence>
            <xs:attribute ref="title"/>
        </xs:complexType>
    </xs:element>
</xs:schema>

usage.md

$ ./mkui.sh "Create a list of books"
Prompt: a list of books
<?xml version=1.0 encoding=UTF-8?>
<list title="Books">
  <row id="book1">
    <title>To Kill a Mockingbird</title>
    <subtitle>Harper Lee</subtitle>
  </row>
  <row id="book2">
    <title>1984</title>
    <subtitle>George Orwell</subtitle>
  </row>
  <row id="book3">
    <title>Pride and Prejudice</title>
    <subtitle>Jane Austen</subtitle>
  </row>
  <row id="book4">
    <title>The Great Gatsby</title>
    <subtitle>F. Scott Fitzgerald</subtitle>
  </row>
  <row id="book5">
    <title>One Hundred Years of Solitude</title>
    <subtitle>Gabriel García Márquez</subtitle>
  </row>
</list>