@mindstudio-ai/remy 0.1.40 → 0.1.41

package/dist/prompt/compiled/design.md

@@ -4,13 +4,11 @@ Design standards for web interfaces in MindStudio apps.
 
 ## Quality Bar
 
-Every interface must feel like a polished, shipping product — not a
-prototype, not a starter template, not a homework assignment. The standard
-is iOS and Apple's bundled iOS apps, Notion, Stripe. If it wouldn't look
-good on Dribbble, Behance, or Mobbin, it's not done.
+Every interface must feel like a polished, shipping product — not a prototype, not a starter template, not a homework assignment. If it wouldn't look good on Dribbble, Behance, or Mobbin, it's not done.
 
-MindStudio apps are end-user products. The interface is the product. Users
-judge the entire app by how it looks and feels in the first 3 seconds.
+MindStudio apps are end-user products. The interface is the product. Users judge the entire app by how it looks and feels in the first 3 seconds.
+
+For questions about design, layout, UI, interfaces, components, and anything else, ask the design expert! They have access to countless resources and references and can provide great inspiration as you plan and work - the response to a quick "I'm making XYZ - wdyt?" can be such a powerful input to your thinking!
 
 ## Design System from the Spec
 
@@ -20,232 +18,83 @@ Set up a lightweight theme layer early (CSS variables or a small tokens file) so
 
 **When brand spec files are present, always use the defined fonts and colors in generated code.** Do not pick your own fonts or colors when the spec defines them. Reference colors semantically (as CSS variables or named constants) rather than scattering raw hex values through the codebase.
 
-### Colors block format
-
-A `` ```colors `` fenced block in a `type: design/color` spec file declares 3-5 brand colors with evocative names, hex values, and descriptions. The names are brand identity names (not CSS property names), and the descriptions explain the color's role in the brand:
-
-```colors
-Midnight:
-  value: "#000000"
-  description: Primary background and dark surfaces
-Charcoal:
-  value: "#1C1C1E"
-  description: Elevated surfaces and containers
-Snow:
-  value: "#F5F5F7"
-  description: Primary text and foreground elements
-Smoke:
-  value: "#86868B"
-  description: Secondary text and supporting content
-```
-
-Derive additional implementation colors (borders, focus states, hover states, disabled states) from the brand palette rather than expecting them to be specified.
-
-### Typography block format
-
-A `` ```typography `` fenced block in a `type: design/typography` spec file declares fonts (with source URLs) and one or two anchor styles (typically Display and Body). Styles can include an optional `case` field (`uppercase`, `lowercase`, `capitalize`) for text-transform. Derive additional styles (labels, buttons, captions, overlines) from these anchors:
-
-```typography
-fonts:
-  Satoshi:
-    src: https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap
-  Clash Grotesk:
-    src: https://api.fontshare.com/v2/css?f[]=clash-grotesk@400,500,600&display=swap
-
-styles:
-  Display:
-    font: Satoshi
-    size: 40px
-    weight: 600
-    letterSpacing: -0.03em
-    lineHeight: 1.1
-    case: uppercase
-    description: Page titles and hero text
-  Body:
-    font: Satoshi
-    size: 16px
-    weight: 400
-    lineHeight: 1.5
-    description: Default reading text
-```
-
-## Be Distinctive
-
-AI-generated interfaces tend to converge on the same generic look: safe
-fonts, timid colors, predictable layouts. Fight this actively. Every
-interface should have character and intentionality — it should look like a
-designer made deliberate choices, not like it was generated from a template.
-
-**Typography must be a conscious choice.** Pick fonts that are beautiful,
-distinctive, and appropriate for the product's personality. Generic system
-fonts and overused defaults make everything look the same. Typography is
-the single fastest way to give an interface identity.
-
-**Commit to a color palette.** One or two dominant colors with sharp accents
-outperform timid, evenly-distributed palettes. Draw inspiration from the
-app's domain — a finance tool might use deep greens and golds; a creative
-tool might use bold, saturated primaries. The palette should feel intentional
-and owned, not randomly selected.
-
-**Backgrounds create atmosphere.** Solid white or solid gray is the safe
-default and the enemy of distinctiveness. Layer subtle gradients, use warm
-or cool tints, add geometric patterns or contextual textures. The background
-sets the mood before the user reads a single word.
-
-**Layouts should surprise.** Avoid the predictable patterns: three equal
-boxes with icons, centered hero with subtitle, generic card grid. Use
-asymmetry, varied column widths, creative negative space, unexpected
-compositions. Study Behance and Mobbin for layout inspiration. Every screen
-should feel considered, not generated.
-
-## App-Like, Not Web-Page-Like
-
-Interfaces run fullscreen in the user's browser or a wrapped webview mobile
-app. They should feel like native apps, not websites.
-
-- **No long scrolling pages.** Use structured layouts: cards, split panes,
-  steppers, tabs, grouped sections that fit the viewport. The interface
-  should feel like a single-purpose tool, not a document.
-- **On mobile**, scrolling may be necessary, but use sticky headers, fixed
-  CTAs, and anchored navigation to keep key actions within reach.
-- Think of every screen as something the user opens, uses, and closes —
-  not something they read.
-
-## Visual Design
-
-- **Typography:** Strong hierarchy — clear distinction between headings,
-  body, labels, and captions. Use weight and size, not just color, to
-  create hierarchy. Choose fonts that elevate the interface and give it
-  personality.
-- **Color:** Clean, vibrant, intentional. Use color to communicate state
-  and guide attention, not to decorate. Commit to a direction — bold and
-  saturated, or muted and editorial — and follow through consistently.
-- **Spacing:** Consistent and generous. Padding and margins should be
-  uniform across all components — nothing should feel cramped or uneven.
-  White space is a feature, not wasted space.
-- **Components:** Every component (buttons, inputs, cards, modals, lists)
-  should look like it belongs to the same design system. Consistent border
-  radii, consistent shadows, consistent padding. If two buttons on the
-  same screen look different for no reason, that's a bug.
-
-## Animation
-
-Use motion to make interactions feel polished, not to show off. Focus on
-high-impact moments: a well-orchestrated page load with staggered reveals
-creates more delight than scattered micro-interactions everywhere.
-
-- Transitions between states should be smooth but fast.
-- Streaming content should flow into containers that grow naturally without
-  pushing sibling elements around.
-- No parallax, no cheesy scroll effects, no bounce/elastic easing, no
-  gratuitous loading animations.
+## Important: Build Apps, Not Web Pages
+
+Interfaces run fullscreen in the user's browser or a wrapped webview mobile app. They must feel like native Mac or iOS apps, not websites.
+
+- **No long scrolling pages.** Use structured layouts: cards, split panes, steppers, tabs, grouped sections that fit the viewport. The interface should feel like an award winning iOS or macOS app, not a document.
+- **On mobile**, scrolling may be necessary, but use sticky headers, fixed CTAs, and anchored navigation to keep key actions within reach.
+- Think of every screen as something the user opens, uses, and closes — not something they read.
 
 ## Layout Stability
 
-Layout shift is never acceptable. Elements jumping around as content loads
-or streams in makes an interface feel broken.
-
-- Reserve space for content that hasn't arrived yet. Use fixed/min-height
-  containers, skeletons, or aspect-ratio boxes.
-- Images must always have explicit dimensions so the browser reserves space
-  before the image loads.
-- Loading-to-loaded transitions should swap content in-place without
-  changing container size.
-- Buttons must not change size during loading states. Use a fixed width or
-  `min-width`, and swap the label for a spinner or short text that fits the
-  same space. "Submit" becoming "Submitting..." should not make the button
-  wider and push adjacent elements around.
-- Conditional UI should use opacity/overlay transitions, not insertion into
-  flow that displaces existing content.
+Layout shift is never acceptable. Elements jumping around as content loads or streams in makes an interface feel broken.
+
+- Reserve space for content that hasn't arrived yet. Use fixed/min-height containers, skeletons, or aspect-ratio boxes.
+- Images must always have explicit dimensions so the browser reserves space before the image loads.
+- Loading-to-loaded transitions should swap content in-place without changing container size.
+- Buttons must not change size during loading states. Use a fixed width or `min-width`, and swap the label for a spinner or short text that fits the same space. "Submit" becoming "Submitting..." should not make the button wider and push adjacent elements around.
+- Conditional UI should use opacity/overlay transitions, not insertion into flow that displaces existing content.
+- This is especially important to keep in mind when building things that display AI generated text, especially if the text streams in. Make sure to never shift layout because of streaming AI text.
 
 ## Responsive Design
 
-Every interface must work on both desktop and mobile.
+Every interface must work on both desktop and mobile. Think about how the app will be used and prioritize the primary use case - mobile apps should be mobile-first, business apps are more likely to be used on desktops.
 
 - Use the full viewport. Backgrounds should extend to edges.
-- On desktop, use the space — multi-column layouts, sidebars, spacious
-  cards. Avoid narrow centered columns with empty gutters on a wide screen.
+- On desktop, use the space — multi-column layouts, sidebars, spacious cards. Avoid narrow centered columns with empty gutters on a wide screen.
 - On mobile, stack gracefully. Prioritize content and actions.
-- Test at both extremes. A layout that only looks good at one breakpoint
-  is not done.
+- Test at both extremes. A layout that only looks good at one breakpoint is not done.
+- When the app is primarily mobile (e.g., a mobile-first consumer app, a tool designed for on-the-go use), set `"defaultPreviewMode": "mobile"` in `web.json` so the editor previews in a mobile viewport by default.
 
 ## Forms
 
 Forms should feel like interactions, not paperwork.
 
 - Group related fields visually. Use cards or sections, not a flat list.
-- Inline validation — show errors as the user types, not after submit.
-  Validation must never introduce layout shift.
-- Loading states after submission. Always indicate that something is
-  happening.
+- Inline validation — show errors as the user types, not after submit. Validation must never introduce layout shift.
+- Loading states after submission. Always indicate that something is happening.
 - Disabled states should be visually distinct but not jarring.
-- Even data entry can be beautiful. Pay attention to alignment, padding,
-  and spacing. Consistency is key.
+- Even data entry can be beautiful. Pay attention to alignment, padding, and spacing. Consistency is key.
+
+#### Form Elements
+
+- When loading elements dynamically, make sure the experience isn't janky (e.g., user selects something from a dropdown and suddenly a bunch of thigns snap in, or user loads a form and then after 500ms once a network call resolves the user sees a jump for a new element to appear)
+
+### Placeholders
+
+- Always use icon placeholders for things like empty user profile pictures and other empty images.
+- Create beautiful empty states by using icons alongside labels. Empty states should feel like an invitation to get started, not an error mode.
+
+#### Loading states
+
+Buttons should use a small animated spinner during loading, not text labels like "Loading..." or "Submitting...". The `loader-2` tabler icon with a CSS spin animation is a common pattern. The spinner replaces the button label while maintaining the button's size — be sure there is no layout shift. Recommend the developer implement this as a reusable pattern early.
 
 ## Data Fetching and Updates
 
-The UI should feel instant. Never make the user wait for a server round-trip
-to see the result of their own action.
-
-- **Optimistic updates.** When a user adds a row, toggles a setting, or
-  submits a form, update the UI immediately and let the backend confirm
-  in the background. If the backend fails, revert and show an error.
-- **Use SWR for data fetching** (`useSWR` from the `swr` package). It
-  handles caching, revalidation, and stale-while-revalidate out of the box.
-  Prefer SWR over manual `useEffect` + `useState` fetch patterns.
-- **Mutate after actions.** After a successful create/update/delete, call
-  `mutate()` to revalidate the relevant SWR cache rather than manually
-  updating local state.
-- **Skeleton loading.** Show skeletons that mirror the layout on initial
-  load. Never show a blank page or centered spinner while data is loading.
-
-## What Good Looks Like
-
-- A dashboard that feels like Linear — clean data, clear hierarchy, every
-  pixel intentional.
-- A form that feels like Stripe Checkout — focused, calm, confident.
-- A settings page that feels like iOS Settings — organized, scannable,
-  no clutter.
-- A list view that feels like Notion — flexible, spacious, information-dense
-  without feeling crowded.
-
-## What to Actively Avoid
-
-These are the hallmarks of generic AI-generated interfaces. Every one of
-them makes an interface look like it was auto-generated rather than designed.
-
-- **Generic fonts.** Overused defaults that strip away all personality.
-  Instead: pick a distinctive Google Font that fits the app's character.
-- **Purple or indigo anything.** Purple gradients, purple buttons, purple
-  accents. This is the #1 AI-generated aesthetic cliché. Instead: use
-  a color palette that fits the app's domain — greens for finance, warm
-  neutrals for productivity, bold primaries for creative tools, or just
-  confident grayscale.
-- **Colored left-border callout boxes.** Rounded divs with a thick colored
-  `border-left` — the generic "info card" pattern. Instead: use typography,
-  spacing, and background tints to create hierarchy. If you need to call
-  something out, use a full subtle background or a top border.
-- **Three equal boxes with icons.** The default AI landing page layout.
-  Instead: use asymmetric layouts, varied column widths, or a single
-  focused content area.
-- **Timid color palettes.** Evenly distributed, non-committal colors.
-  Instead: one or two dominant colors with sharp accents. Commit to a
-  direction.
-- **Card-heavy nested layouts.** Cards inside cards, everything boxed.
-  Instead: use space, typography, and dividers to create hierarchy without
-  extra containers.
-- **Inconsistent spacing.** 12px here, 20px there, 8px somewhere else.
-  Instead: define a spacing scale (4/8/12/16/24/32/48/64) and use it
-  everywhere.
-- **Components from different visual languages.** Rounded buttons next to
-  square inputs, shadows mixed with flat design. Instead: pick one system
-  and apply it consistently.
-- **Long scrolling forms with no visual grouping.** Instead: group fields
-  into sections with clear headings, cards, or stepped flows.
-- **Cramped layouts.** Text pressed against edges, no room to breathe.
-  Instead: generous padding, comfortable margins, let the content float.
-- **Loading states that are just a centered spinner on a blank page.**
-  Instead: use skeletons that mirror the layout, or keep the existing
-  structure visible with a subtle loading indicator.
-- **Any interface where the first reaction is "this looks like a demo" or
-  "this looks like it was made with a website builder."**
+The UI should feel instant. Never make the user wait for a server round-trip to see the result of their own action.
+
+- **Optimistic updates.** When a user adds a row, toggles a setting, or submits a form, update the UI immediately and let the backend confirm in the background. If the backend fails, revert and show an error.
+- **Use SWR for data fetching** (`useSWR` from the `swr` package). It handles caching, revalidation, and stale-while-revalidate out of the box. Prefer SWR over manual `useEffect` + `useState` fetch patterns.
+- **Mutate after actions.** After a successful create/update/delete, call `mutate()` to revalidate the relevant SWR cache rather than manually updating local state.
+- **Skeleton loading.** Show skeletons that mirror the layout on initial load. Never show a blank page or centered spinner while data is loading.
+
+## FTUE
+
+All interactive apps must be intuitive and easy to use. Form elements must be well-labelled. Complex interfaces should have descriptions or tooltips when helpful. Complex apps benefit from a beautiful simple onboarding modal on first use or a simple click tour. Even if the app is intuitive and easy to use, users showing up for the first time might still be overwhelmed or confused, and we have an opportunity to set expectations, provide context, and make the user confident as they use our product. Don't neglect this.
+
+## What to Actively Avoid At All Costs
+
+- **Avoid generic fonts.** Overused defaults that strip away all personality. Instead: pick a distinctive Google Font that fits the app's character.
+- **Avoid purple or indigo anything.** Purple gradients, purple buttons, purple accents are overused. The user will be dismissive of our designs if they come out looking purple or indigo.
+- **Avoid colored left-border callout boxes.** Rounded divs with a thick colored `border-left` — the generic "info card" pattern. Instead: use typography, spacing, and background tints to create hierarchy. If you need to call something out, use a full subtle background or a top border.
+- **Avoid three equal boxes with icons.** The default AI landing page layout. Instead: use asymmetric layouts, varied column widths, or a single focused content area.
+- **Avoid timid color palettes.** Evenly distributed, non-committal colors. Instead: one or two dominant colors with sharp accents. Commit to a direction.
+- **Avoid card-heavy nested layouts.** Cards inside cards, everything boxed. Instead: use space, typography, and dividers to create hierarchy without extra containers.
+- **Avoid inconsistent spacing.** 12px here, 20px there, 8px somewhere else. Instead: define a spacing scale (4/8/12/16/24/32/48/64) and use it everywhere.
+- **Avoid components from different visual languages.** Rounded buttons next to square inputs, shadows mixed with flat design. Instead: pick one system and apply it consistently.
+- **Avoid long scrolling forms with no visual grouping.** Instead: group fields into sections with clear headings, cards, or stepped flows.
+- **Avoid cramped layouts.** Text pressed against edges, no room to breathe. Instead: generous padding, comfortable margins, let the content float.
+- **Avoid loading states that are just a centered spinner on a blank page.** Instead: use skeletons that mirror the layout, or keep the existing structure visible with a subtle loading indicator.
+
+Most importantly: **Avoid any interface where the first reaction is "this looks like a demo" or "this looks like it was made with a website builder."**

package/dist/prompt/compiled/interfaces.md

@@ -27,7 +27,8 @@ dist/interfaces/web/
 ```json
 {
   "devPort": 5173,
-  "devCommand": "npm run dev"
+  "devCommand": "npm run dev",
+  "defaultPreviewMode": "desktop"
 }
 ```
 
@@ -35,6 +36,7 @@ dist/interfaces/web/
 |-------|------|---------|-------------|
 | `devPort` | `number` | `5173` | Port for the dev server |
 | `devCommand` | `string` | `"npm run dev"` | Command to start the dev server |
+| `defaultPreviewMode` | `"desktop"` \| `"mobile"` | `"desktop"` | Default preview viewport in the editor. Set to `"mobile"` for mobile-first apps. |
 
 ### Frontend SDK
 

package/dist/prompt/compiled/msfm.md

@@ -209,7 +209,7 @@ The card system generates images using the brand's typography and color
 palette, creating shareable assets that feel native to the app's identity.
 
 ~~~
-Use generateImage with Seedream to create styled cards. Card template
+Use generateImage to create styled cards. Card template
 applies brand typography and colors from the spec. Export as PNG via
 CDN transform at 2x resolution. Social sharing via Web Share API with
 clipboard fallback for unsupported browsers.
@@ -217,6 +217,6 @@ clipboard fallback for unsupported browsers.
 
 ## History
 
-- **2026-03-22** — Built card generation using generateImage with Seedream.
+- **2026-03-22** — Built card generation using generateImage.
   Added share button to haiku detail view.
 ```

package/dist/prompt/static/team.md

@@ -10,7 +10,7 @@ Note: when you talk about the team to the user, refer to them by their name or a
 
 Your designer. Consult for any visual decision — choosing a color, picking fonts, proposing a layout, soucing images, reviewing whether something looks good. Not just during intake or big design moments. If you're about to write CSS and you're not sure about a color, ask. If you just built a page and want a gut check, ask the designer to take a quick look. If the user says "I don't like how this looks," ask the design expert what to change rather than guessing yourself, or if they say "I want a different image," that's the designer's problem, not yours. The design expert can also source images if you need images for placeholders in scenarios - use it for bespoke, tailor-made images suited to the scenario instead of trying to guess stock photo URLs.
 
-The design expert cannot see your conversation with the user, so include all relevant context and requirements in your task. It can take screenshots of the app preview on its own — just ask it to review what's been built.
+The design expert cannot see your conversation with the user, so include all relevant context and requirements in your task. It also can not see its own conversation history, so if you want an audit you need to provide the exact values to check, or any other necessary context for it to do its job. It can take screenshots of the app preview on its own — just ask it to review what's been built.
 
 Returns concrete resources: hex values, font names with CSS URLs, image URLs, layout descriptions. It has curated font catalogs and design inspiration built in — don't ask it to research generic inspiration or look up "best X apps." Only point it at specific URLs if the user references a particular site, brand, or identity to match.
 

package/dist/subagents/designExpert/data/sources/dev/index.html

@@ -534,6 +534,43 @@ function useInspiration() {
   return { data, loading, error, addImage, deleteImage, analyze, dedup, reload };
 }
 
+function useUiInspiration() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const reload = useCallback(async () => {
+    try {
+      setLoading(true);
+      const d = await api('/api/ui-inspiration');
+      setData(d);
+      setError(null);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { reload(); }, [reload]);
+
+  const addScreen = useCallback(async (entry) => {
+    await api('/api/ui-inspiration', { method: 'POST', body: entry });
+    await reload();
+  }, [reload]);
+
+  const deleteScreen = useCallback(async (index) => {
+    await api('/api/ui-inspiration/' + index, { method: 'DELETE' });
+    await reload();
+  }, [reload]);
+
+  const analyze = useCallback(async (url) => {
+    return api('/api/ui-inspiration/analyze', { method: 'POST', body: { url } });
+  }, []);
+
+  return { data, loading, error, addScreen, deleteScreen, analyze, reload };
+}
+
 // ---------------------------------------------------------------------------
 // Toast
 // ---------------------------------------------------------------------------
@@ -862,6 +899,71 @@ function InspirationTab({ inspiration }) {
   `;
 }
 
+function UiInspirationDetail({ screen, index, onDelete }) {
+  if (!screen) return html`<div class="inspiration-empty">Select a screen</div>`;
+
+  return html`
+    <div class="inspiration-detail">
+      <img class="inspiration-detail-img" src=${screen.url} alt="UI reference" />
+      <div class="inspiration-detail-body">
+        <div class="inspiration-detail-header">
+          <span>#${index}</span>
+          <button class="btn-danger" onClick=${() => onDelete(index)} title="Delete">✕</button>
+        </div>
+        <div class="inspiration-analysis"
+          dangerouslySetInnerHTML=${{ __html: renderAnalysis(screen.analysis) }}
+        />
+      </div>
+    </div>
+  `;
+}
+
+function UiInspirationTab({ uiInspiration }) {
+  const [selected, setSelected] = useState(0);
+  const sidebarRef = { current: null };
+
+  if (uiInspiration.loading) return html`<div class="loading"><span class="spinner"></span></div>`;
+  if (uiInspiration.error) return html`<div class="loading" style="color:#e00">Error: ${uiInspiration.error}</div>`;
+  if (!uiInspiration.data) return null;
+
+  const screens = uiInspiration.data.screens;
+  const current = screens[selected] || null;
+
+  const select = (i) => {
+    const clamped = Math.max(0, Math.min(i, screens.length - 1));
+    setSelected(clamped);
+    sidebarRef.current?.children[clamped]?.scrollIntoView({ block: 'center' });
+  };
+
+  const onKey = (e) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); select(selected + 1); }
+    if (e.key === 'ArrowUp') { e.preventDefault(); select(selected - 1); }
+  };
+
+  const handleDelete = async (index) => {
+    const nextIndex = index >= screens.length - 1 ? Math.max(0, index - 1) : index;
+    setSelected(nextIndex);
+    await uiInspiration.deleteScreen(index);
+  };
+
+  return html`
+    <div class="inspiration-layout">
+      <div class="inspiration-sidebar" ref=${el => sidebarRef.current = el} tabindex="0" onKeyDown=${onKey}>
+        ${screens.map((s, i) => html`
+          <img
+            key=${i}
+            class="inspiration-thumb ${i === selected ? 'active' : ''}"
+            src=${s.url}
+            loading="lazy"
+            onClick=${() => select(i)}
+          />
+        `)}
+      </div>
+      <${UiInspirationDetail} screen=${current} index=${selected} onDelete=${handleDelete} />
+    </div>
+  `;
+}
+
 // ---------------------------------------------------------------------------
 // App
 // ---------------------------------------------------------------------------
@@ -870,6 +972,7 @@ function App() {
   const [tab, setTab] = useState('fonts');
   const fonts = useFonts();
   const inspiration = useInspiration();
+  const uiInspiration = useUiInspiration();
   const toast = useToast();
 
   return html`
@@ -878,6 +981,7 @@ function App() {
         <button class="tab ${tab === 'fonts' ? 'active' : ''}" onClick=${() => setTab('fonts')}>Fonts${fonts.data ? ` (${fonts.data.fonts.length})` : ''}</button>
         <button class="tab ${tab === 'pairings' ? 'active' : ''}" onClick=${() => setTab('pairings')}>Pairings${fonts.data ? ` (${fonts.data.pairings.length})` : ''}</button>
         <button class="tab ${tab === 'inspiration' ? 'active' : ''}" onClick=${() => setTab('inspiration')}>Inspiration${inspiration.data ? ` (${inspiration.data.images.length})` : ''}</button>
+        <button class="tab ${tab === 'ui' ? 'active' : ''}" onClick=${() => setTab('ui')}>UI Patterns${uiInspiration.data ? ` (${uiInspiration.data.screens.length})` : ''}</button>
       </div>
       ${tab === 'inspiration' ? html`
         <div style="margin-left: auto;">
@@ -888,6 +992,7 @@ function App() {
     <div class="content">
       ${tab === 'fonts' ? html`<${FontsTab} fonts=${fonts} />`
         : tab === 'pairings' ? html`<${PairingsTab} fonts=${fonts} />`
+        : tab === 'ui' ? html`<${UiInspirationTab} uiInspiration=${uiInspiration} />`
         : html`<${InspirationTab} inspiration=${inspiration} />`
       }
     </div>

package/dist/subagents/designExpert/data/sources/dev/serve.mjs

@@ -17,6 +17,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const dataDir = join(__dirname, '..');
 const fontsPath = join(dataDir, 'fonts.json');
 const inspirationPath = join(dataDir, 'inspiration.json');
+const uiInspirationPath = join(dataDir, 'ui_inspiration_compiled.json');
 
 // ---------------------------------------------------------------------------
 // JSON helpers
@@ -222,6 +223,50 @@ const server = createServer(async (req, res) => {
       return json(res, { ok: true, removed, count: deduped.length });
     }
 
+    // --- UI Inspiration API ---
+
+    if (path === '/api/ui-inspiration' && method === 'GET') {
+      return json(res, readJson(uiInspirationPath));
+    }
+
+    if (path === '/api/ui-inspiration' && method === 'POST') {
+      const entry = await parseBody(req);
+      const data = readJson(uiInspirationPath);
+      data.screens.push(entry);
+      writeJson(uiInspirationPath, data);
+      return json(res, { ok: true, count: data.screens.length }, 201);
+    }
+
+    const uiInspirationDeleteMatch = path.match(/^\/api\/ui-inspiration\/(\d+)$/);
+    if (uiInspirationDeleteMatch && method === 'DELETE') {
+      const index = parseInt(uiInspirationDeleteMatch[1], 10);
+      const data = readJson(uiInspirationPath);
+      if (index < 0 || index >= data.screens.length) {
+        return error(res, 'Screen index out of range', 404);
+      }
+      data.screens.splice(index, 1);
+      writeJson(uiInspirationPath, data);
+      return json(res, { ok: true, count: data.screens.length });
+    }
+
+    if (path === '/api/ui-inspiration/analyze' && method === 'POST') {
+      const { url } = await parseBody(req);
+      if (!url) return error(res, 'url is required');
+
+      const promptFile = join(dataDir, 'prompts', 'ui-analysis.md');
+      const prompt = readFileSync(promptFile, 'utf-8').trim();
+
+      try {
+        const result = execSync(
+          `mindstudio analyze-image --prompt ${JSON.stringify(prompt)} --image-url ${JSON.stringify(url)} --output-key analysis --no-meta`,
+          { encoding: 'utf-8', timeout: 120000 },
+        ).trim();
+        return json(res, { url, analysis: result });
+      } catch (err) {
+        return error(res, `Analysis failed: ${err.message}`, 500);
+      }
+    }
+
     notFound(res);
   } catch (err) {
     error(res, err.message, 500);