---
title: "Form - AI Wardrobe Stylist"
platform: ios
slug: form-ai-stylist
screens: ["dashboard"]
domains: ["productivity"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["top-navigation-bar", "button", "chip", "card", "badge", "hyperlink", "gallery", "tab-bar"]
score: {clean: 100, consistent: 79, accessible: 66, comprehensible: 71}
url: https://gui.farm/ios/form-ai-stylist
raw: https://gui.farm/ios/form-ai-stylist/design.guix
download: https://gui.farm/ios/form-ai-stylist.gui
---

# Form - AI Wardrobe Stylist

An iOS AI personal stylist form that collects style preferences, sizing, occasion and budget to generate personalized outfit and fashion recommendations.

- **Live preview:** https://gui.farm/ios/form-ai-stylist
- **Raw source:** https://gui.farm/ios/form-ai-stylist/design.guix
- **Download (.gui):** https://gui.farm/ios/form-ai-stylist.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Form - AI Wardrobe Stylist">
  <tokens>
    <color name="bg" value="#F4F1E8" />
    <color name="surface" value="#FCFAF4" />
    <color name="ink" value="#171815" />
    <color name="muted" value="#6D6D66" />
    <color name="line" value="#D9D5C9" />
    <color name="accent" value="#C8E52D" />
    <color name="olive" value="#515844" />
    <number name="r-card" value="20" />
    <number name="r-small" value="12" />
  </tokens>
  <styles>
    <text-style name="Title" font-family="SF Pro" font-size="32" font-weight="700" line-height="36" />
    <text-style name="H2" font-family="SF Pro" font-size="22" font-weight="700" line-height="27" />
    <text-style name="Body" font-family="SF Pro" font-size="15" font-weight="400" line-height="22" />
    <text-style name="BodyStrong" font-family="SF Pro" font-size="15" font-weight="600" line-height="22" />
    <text-style name="Caption" font-family="SF Pro" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Tiny"
      font-family="SF Pro"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="0.6"
    />
  </styles>
  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="390" fill="$bg">
    <row w="390" h="54" p="14 20 0 20" align="middle-left">
      <text
        w="fill"
        value="9:41"
        font-family="SF Pro"
        font-size="14"
        font-weight="600"
        line-height="18"
        color="$ink"
      />
      <row gap="7" align="middle-left">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/signal.svg" w="16" h="16" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/wifi.svg" w="16" h="16" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/battery.svg" w="20" h="20" />
      </row>
    </row>
    <row w="390" h="58" p="0 20" align="middle-left" role="top-navigation-bar">
      <col w="fill" gap="1">
        <text
          value="FORM"
          font-family="SF Pro"
          font-size="18"
          font-weight="700"
          line-height="20"
          color="$ink"
        />
        <text value="YOUR DAILY STYLIST" text-style="Tiny" color="$muted" />
      </col>
      <row w="38" h="38" radius="19" border="1 $line" align="middle-center" role="button">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/calendar.svg" w="18" h="18" />
      </row>
    </row>
    <col w="390" p="20" gap="16">
      <row w="350" align="bottom-left">
        <col w="fill" gap="4">
          <text value="THURSDAY, 30 JAN" text-style="Tiny" color="$muted" />
          <text value="Today’s look" text-style="Title" color="$ink" />
        </col>
        <row
          h="36"
          radius="18"
          fill="$surface"
          border="1 $line"
          p="0 12"
          gap="7"
          align="middle-left"
          role="chip"
        >
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/cloud-sun.svg" w="17" h="17" />
          <text value="22° / Breezy" text-style="Caption" color="$ink" />
        </row>
      </row>
      <frame w="350" h="442" radius="$r-card" clip="true" role="card">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/look-main.png" x="0" y="0" w="350" h="442" fit="cover" />
        <row
          x="14"
          y="14"
          w="hug"
          h="28"
          fill="$accent"
          radius="14"
          p="0 10"
          gap="6"
          align="middle-left"
          role="badge"
        >
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/sparkles.svg" w="14" h="14" />
          <text value="92% MATCH" text-style="Tiny" color="$ink" />
        </row>
        <row x="298" y="14" w="38" h="38" fill="$surface" radius="19" align="middle-center" role="button">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/bookmark.svg" w="18" h="18" />
        </row>
        <row
          x="14"
          y="386"
          w="322"
          h="42"
          fill="#171815E8"
          radius="21"
          p="0 16"
          align="middle-left"
          role="button"
        >
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/shuffle.svg" w="18" h="18" />
          <text w="fill" value="REMIX THIS LOOK" text-style="Tiny" align="center" color="$surface" />
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/arrow-right-light.svg" w="17" h="17" />
        </row>
      </frame>
      <row w="350" gap="8" align="middle-left">
        <row h="34" radius="17" fill="$ink" p="0 12" align="middle-center" role="chip">
          <text value="Gallery opening" text-style="Caption" color="$surface" />
        </row>
        <row h="34" radius="17" border="1 $line" p="0 12" align="middle-center" role="chip">
          <text value="Smart casual" text-style="Caption" color="$ink" />
        </row>
        <row h="34" radius="17" border="1 $line" p="0 12" align="middle-center" role="chip">
          <text value="Low effort" text-style="Caption" color="$ink" />
        </row>
      </row>
      <col w="350" fill="$surface" border="1 $line" radius="$r-card" p="16" gap="12" role="card">
        <row w="318" align="middle-left">
          <row w="34" h="34" radius="17" fill="$accent" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/sparkles.svg" w="17" h="17" />
          </row>
          <text w="fill" value="Why this works" text-style="BodyStrong" color="$ink" />
          <text value="FORM AI" text-style="Tiny" color="$muted" />
        </row>
        <text
          value="The cropped blazer sharpens the wide trouser silhouette. Oxblood loafers add warmth without competing with the olive, and every layer handles today’s breeze."
          text-style="Body"
          color="$ink"
        />
        <row w="318" gap="8" align="middle-left">
          <row h="28" radius="14" fill="$bg" p="0 10" role="chip" align="middle-center">
            <text value="Balanced proportion" text-style="Caption" color="$olive" />
          </row>
          <row h="28" radius="14" fill="$bg" p="0 10" role="chip" align="middle-center">
            <text value="Weather ready" text-style="Caption" color="$olive" />
          </row>
        </row>
      </col>
      <row w="350" align="middle-left">
        <text w="fill" value="Other directions" text-style="H2" color="$ink" />
        <text value="See all" text-style="BodyStrong" color="$olive" role="hyperlink" />
      </row>
      <row w="350" gap="12" align="top-left" role="gallery">
        <col w="169" gap="8">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/look-blue.png" w="169" h="216" fit="cover" radius="$r-small" />
          <text value="Soft contrast" text-style="BodyStrong" color="$ink" />
          <text value="Dinner / 88% match" text-style="Caption" color="$muted" />
        </col>
        <col w="169" gap="8">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/look-denim.png" w="169" h="216" fit="cover" radius="$r-small" />
          <text value="Clean signal" text-style="BodyStrong" color="$ink" />
          <text value="Studio day / 85% match" text-style="Caption" color="$muted" />
        </col>
      </row>
      <col w="350" fill="$ink" radius="$r-card" p="18" gap="14" role="card">
        <row w="314" align="middle-left">
          <col w="fill" gap="3">
            <text value="WARDROBE STATUS" text-style="Tiny" color="$accent" />
            <text value="Everything is ready" text-style="H2" color="$surface" />
          </col>
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/check-circle.svg" w="28" h="28" />
        </row>
        <text
          value="All 6 pieces are clean and available. The blazer was last worn 12 days ago."
          text-style="Body"
          color="#CBCBC4"
        />
      </col>
    </col>
    <row w="390" h="92" fill="$surface" border="1 $line" p="10 20 24 20" align="top-left" role="tab-bar">
      <col w="87" align="top-center" gap="5">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/home.svg" w="21" h="21" />
        <text value="Today" text-style="Tiny" color="$ink" />
      </col>
      <col w="87" align="top-center" gap="5">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/shirt.svg" w="21" h="21" />
        <text value="Wardrobe" text-style="Tiny" color="$muted" />
      </col>
      <col w="87" align="top-center" gap="5">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/sparkles-muted.svg" w="21" h="21" />
        <text value="Create" text-style="Tiny" color="$muted" />
      </col>
      <col w="87" align="top-center" gap="5">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/1b5cfc9f-8e16-4dc3-9245-23bb94fb32f2/user.svg" w="21" h="21" />
        <text value="Profile" text-style="Tiny" color="$muted" />
      </col>
    </row>
  </col>
</gui>
```