igniteui-react-generate-from-image-design

Implementing a React View from a Design Image

React only — pass platform: 'react' / framework: 'react' to every MCP call.

Order of work

1. Read the image. Identify every region, its component, and the layout structure.
2. Inspect the app. Existing theme imports, design system, palette overrides, installed packages.
3. Look up the components you chose before writing them — get_doc, get_api_reference.
4. Theme — global layer only if the app has none, then per-component tokens.
5. Implement the layout, mock data, and view.
6. Validate — build, run, compare with the image, iterate.

Steps 3 and 4 use MCP servers where available; both are optional. Without them, read the installed .d.ts files (node_modules/igniteui-webcomponents/components/<name>/) for props, @slot, @csspart, and @cssproperty names, and theme with the palette shades documented in igniteui-react-customize-theme.

1. Read the image

Record, per region: layout role and proportions, component type, colors, type scale, borders/radius/shadow, data shape, and spacing rhythm.

Resolve layout as CSS Grid rows and columns that preserve the observed proportions — do not reverse-engineer exact pixel values or invent breakpoints yet. Get desktop proportions right first, then add stacking rules.

Before coding, state briefly: chosen component per region, any region falling back to plain HTML and why, theme strategy, packages needed, and assumptions you made where the image is ambiguous.

Start every region from an Ignite UI component. Fall back to semantic HTML only when the component's DOM structure stays incompatible after CSS overrides and ::part() are considered, and say so in a comment. Component picks live in COMPONENTS.md; use list_components({ framework: 'react', filter: '<narrow term>' }) to discover more. Narrow filters work better — 'list view', not 'list'.