Prevent Image/Link prop type mismatch in generated components

props.Image returns {src, alt} and props.Link returns {href, target} — not
plain strings. Components that typed these as string caused [object Object]
rendering at runtime (found in AvatarGroup, Breadcrumbs, CarouselSlider,
CmsFilterSearch).

Three-layer fix:
1. Prompt (generate_react_component@v1): Added rule 11 with explicit table,
   rules, and code example showing correct types and JSX usage
2. Deterministic check Webflow-Examples#12: Detects when a prop declared as props.Image or
   props.Link in the webflow declaration is typed as string in the React
   component — fails the quality gate and feeds back exact fix instructions
3. types.ts / workflow.ts: Added imageLinkPropsCorrect to DeterministicChecks

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Author: KirklandGee

webflow-code-components/src/workflows/component_generator/prompts/generate_react_component@v1.prompt

@@ -110,7 +110,43 @@ text.split(/\\n|\n/)
 ```
 Do NOT use `.split("\n")` alone — it will miss literal `\n` from JSX string attributes and Webflow text fields.
 
-### 11. External API Integrations
+### 11. Webflow Prop Type Shapes
+Webflow passes certain prop types as **objects**, not plain strings. You MUST type these correctly in the interface and use them correctly in JSX — otherwise they render as `[object Object]` at runtime.
+
+| Webflow prop type | TypeScript type in interface | How to use in JSX |
+|---|---|---|
+| `props.Image` | `{ src: string; alt?: string }` | `<img src={image.src} alt={image.alt || fallback} />` |
+| `props.Link` | `{ href?: string; target?: string }` | `<a href={link?.href || "#"} target={link?.target}>` |
+
+**Rules:**
+- NEVER type an Image prop as `string`. Always use `{ src: string; alt?: string }`.
+- NEVER type a Link prop as `string`. Always use `{ href?: string; target?: string }`.
+- Always use optional chaining (`link?.href`) since the prop may be undefined before the user fills it in.
+- Pass `target={link?.target}` to preserve the link target (e.g. `_blank`) the user sets in Webflow.
+- When a Link or Image prop feeds into an internal array/object (e.g. a `Slide` or `Item` interface), match the types there too.
+
+**Example — correct Image and Link usage:**
+{% raw %}
+```tsx
+export interface HeroProps {
+  heroImage?: { src: string; alt?: string };
+  ctaLink?: { href?: string; target?: string };
+}
+
+export default function Hero({ heroImage, ctaLink }: HeroProps) {
+  return (
+    <div className="wf-hero">
+      {heroImage && <img src={heroImage.src} alt={heroImage.alt || ""} className="wf-hero-image" />}
+      <a href={ctaLink?.href || "#"} target={ctaLink?.target} className="wf-hero-cta">
+        Get Started
+      </a>
+    </div>
+  );
+}
+```
+{% endraw %}
+
+### 13. External API Integrations
 When the component needs to fetch data from an external API:
 - Use `useEffect` + `useState` for data fetching (loading → data | error states)
 - Use `fetch()` — do NOT import axios or any HTTP library
@@ -121,7 +157,7 @@ When the component needs to fetch data from an external API:
 - Show an error message if the fetch fails
 - Accept API keys/tokens as props so Webflow designers can configure them in the panel
 
-### 12. Focused and Minimal
+### 14. Focused and Minimal
 - Keep the component focused on its core purpose
 - Don't add unnecessary features beyond what's described
 - Provide sensible default values for ALL optional props so it looks complete out of the box

webflow-code-components/src/workflows/component_generator/steps.ts

@@ -298,6 +298,27 @@ export const runDeterministicChecks = step( {
       }
     }
 
+    // 12. Image and Link props typed correctly
+    // props.Image returns {src, alt} and props.Link returns {href, target} — not plain strings.
+    // Find every prop declared as props.Image or props.Link in the webflow declaration and verify
+    // the React component does NOT type that prop as `?: string`.
+    let imageLinkPropsCorrect = true;
+    const imagePropNames = [ ...webflowDeclarationCode.matchAll( /(\w+):\s*props\.Image\s*\(/g ) ].map( m => m[1] );
+    const linkPropNames = [ ...webflowDeclarationCode.matchAll( /(\w+):\s*props\.Link\s*\(/g ) ].map( m => m[1] );
+    for ( const propName of imagePropNames ) {
+      // Match `propName?: string` or `propName: string` in the React interface
+      if ( new RegExp( `${propName}\\??:\\s*string\\b` ).test( reactComponentCode ) ) {
+        imageLinkPropsCorrect = false;
+        failures.push( `Prop "${propName}" uses props.Image but is typed as string in the React component — must be typed as { src: string; alt?: string }` );
+      }
+    }
+    for ( const propName of linkPropNames ) {
+      if ( new RegExp( `${propName}\\??:\\s*string\\b` ).test( reactComponentCode ) ) {
+        imageLinkPropsCorrect = false;
+        failures.push( `Prop "${propName}" uses props.Link but is typed as string in the React component — must be typed as { href?: string; target?: string }` );
+      }
+    }
+
     const checks = {
       classPrefixCorrect,
       typographyInherited,
@@ -310,6 +331,7 @@ export const runDeterministicChecks = step( {
       propsGrouped,
       ssrFlagCorrect,
       noCodeFences,
+      imageLinkPropsCorrect,
     };
 
     const allPassed = Object.values( checks ).every( Boolean );

webflow-code-components/src/workflows/component_generator/types.ts

@@ -47,6 +47,7 @@ export const DeterministicChecksSchema = z.object( {
   propsGrouped: z.boolean(),
   ssrFlagCorrect: z.boolean(),
   noCodeFences: z.boolean(),
+  imageLinkPropsCorrect: z.boolean(),
 } );
 
 export const EvaluationSchema = z.object( {

webflow-code-components/src/workflows/component_generator/workflow.ts

@@ -50,6 +50,7 @@ export default workflow( {
       propsGrouped: false,
       ssrFlagCorrect: false,
       noCodeFences: false,
+      imageLinkPropsCorrect: false,
     };
     let llmScore = 0;
     let iterations = 0;