const assetPathPrefix = "https://www.figma.com/api/mcp/asset/38131a8f-9955-4e6d-81bb-80a2ebd0c35b"; const imgArtwork = `${assetPathPrefix}/dc9f0.svg`; const imgArtwork1 = `${assetPathPrefix}/5b47a.svg`; const imgArtwork2 = `${assetPathPrefix}/21d30.svg`; const imgArtwork3 = `${assetPathPrefix}/ada46.svg`; const imgArtwork4 = `${assetPathPrefix}/99c21.svg`; const imgArtwork5 = `${assetPathPrefix}/aa73a.svg`; const imgArtwork6 = `${assetPathPrefix}/d20b3.svg`; const imgArtwork7 = `${assetPathPrefix}/fbc1d.svg`; const imgArtwork8 = `${assetPathPrefix}/53e3f.svg`; const imgArtwork9 = `${assetPathPrefix}/9faab.svg`; type LinkProps = { className?: string; label?: string; state?: "Default"; }; function Link({ className, label = "View student record", state = "Default" }: LinkProps) { return (

{label}

); } type BadgeProps = { className?: string; label?: string; tone?: "Success" | "Warning"; }; function Badge({ className, label = "Draft", tone = "Success" }: BadgeProps) { const isWarning = tone === "Warning"; return (
{tone === "Success" && (

{label}

)} {isWarning && (

{label}

)}
); } type TableRowProps = { className?: string; name?: string; program?: string; reference?: string; state?: "Default"; }; function TableRow({ className, name = "Maria Santos", program = "BS Information Technology", reference = "2026-00124", state = "Default" }: TableRowProps) { return (

{name}

{reference}

{program}

); } type StatCardProps = { className?: string; hint?: string; label?: string; tone?: "Neutral" | "Info" | "Warning"; value?: string; }; function StatCard({ className, hint = "Selected period · Main campus", label = "Enrolled students", tone = "Neutral", value = "248" }: StatCardProps) { const isInfo = tone === "Info"; const isWarning = tone === "Warning"; return (

{label}

{value}

{tone === "Neutral" && (

{hint}

)} {isInfo && (

{hint}

)} {isWarning && (

{hint}

)}
); } type AvatarProps = { className?: string; initials?: string; size?: "Default"; }; function Avatar({ className, initials = "MS", size = "Default" }: AvatarProps) { return (

{initials}

); } type TopbarProps = { className?: string; layout?: "Desktop"; subtitle?: string; title?: string; }; function Topbar({ className, layout = "Desktop", subtitle = "Main campus", title = "First Semester · 2026–2027" }: TopbarProps) { return (

{title}

{subtitle}

); } type SidebarProps = { className?: string; layout?: "Expanded"; role?: "Registrar"; }; function Sidebar({ className, layout = "Expanded", role = "Registrar" }: SidebarProps) { return (

School Portal

Registrar workspace

Main campus

Overview

Enrollments

Students

Transfer credits

Reports

Maria Santos

Registrar

Sign out

); } export default function DesktopRegistrar() { return (

Enrollment overview

Review clearance and complete student enrollments.

Start enrollment

Enrollment queue

Search enrollments

Filter results

Student

Program / level

Clearance

Action

Maria Santos

2026-00124

BS Information Technology

Ready

Daniel Reyes

2026-00125

Grade 11 · STEM

Financial hold

Luis Garcia

2026-00127

BS Business Administration

Ready

Showing 1–4 of 4 records

Previous

Next

); } SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system. 1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens 2. Convert React syntax to the target framework/library 3. Transform all Tailwind classes to the target styling system while preserving exact visual design 4. Follow the project's existing patterns and conventions DO NOT install any Tailwind as a dependency unless the user instructs you to do so. Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`. These styles are contained in the design: School/Heading 3: Font(family: "Public Sans", style: SemiBold, size: 20, weight: 600, lineHeight: 28, letterSpacing: 0), School/Small Strong: Font(family: "Public Sans", style: SemiBold, size: 14, weight: 600, lineHeight: 20, letterSpacing: 0), School/Small: Font(family: "Public Sans", style: Regular, size: 14, weight: 400, lineHeight: 20, letterSpacing: 0), School/Label: Font(family: "Public Sans", style: Medium, size: 16, weight: 500, lineHeight: 24, letterSpacing: 0), School/Heading 1: Font(family: "Public Sans", style: SemiBold, size: 32, weight: 600, lineHeight: 40, letterSpacing: 0), School/Body: Font(family: "Public Sans", style: Regular, size: 16, weight: 400, lineHeight: 24, letterSpacing: 0). Component descriptions: The following components have usage descriptions or documentation links defined in Figma. These descriptions provide important context about the intended usage, best practices, and any constraints for each component. Follow these guidelines when implementing or using these components. ## Sidebar **Node ID:** 10:2013 Role-specific navigation patterns. Role visibility illustrates the proposed access model and does not replace server authorization. ## Icon/book-open **Node ID:** 3:8 Lucide book-open outline icon; editable vector source. Use the Icon swap property in UI controls. ## Nav Item **Node ID:** 10:942 Labeled navigation is the default. Collapsed items keep the same 48px targets and icon swap property. ## Icon/layout-dashboard **Node ID:** 3:21 Lucide layout-dashboard outline icon; editable vector source. Use the Icon swap property in UI controls. ## Icon/clipboard-list **Node ID:** 3:63 Lucide clipboard-list outline icon; editable vector source. Use the Icon swap property in UI controls. ## Icon/users **Node ID:** 3:35 Lucide users outline icon; editable vector source. Use the Icon swap property in UI controls. ## Icon/graduation-cap **Node ID:** 3:48 Lucide graduation-cap outline icon; editable vector source. Use the Icon swap property in UI controls. ## Icon/chart-column **Node ID:** 3:129 Lucide chart-column outline icon; editable vector source. Use the Icon swap property in UI controls. ## Avatar **Node ID:** 10:46 Initials-based identity marker. Use a visible person name alongside important record actions. ## Icon/log-out **Node ID:** 3:309 Lucide log-out outline icon; editable vector source. Use the Icon swap property in UI controls. ## Topbar **Node ID:** 10:2732 School context, current period and account controls. Mobile uses a menu trigger and compact context. ## Button **Node ID:** 5:179 Primary actions use 48px controls and a clear verb. Includes text, optional icon swap, focus, disabled and loading states. ## Icon/plus **Node ID:** 3:198 Lucide plus outline icon; editable vector source. Use the Icon swap property in UI controls. ## Stat Card **Node ID:** 10:213 A compact operational total with its label and period context. Example counts are illustrative. ## Data Table **Node ID:** 10:610 A reusable record table with toolbar, pagination and deliberate loading, empty and error states. ## Search **Node ID:** 6:224 A clear search affordance for authorized students, enrollments or classes. ## Icon/search **Node ID:** 3:208 Lucide search outline icon; editable vector source. Use the Icon swap property in UI controls. ## Icon/filter **Node ID:** 3:383 Lucide filter outline icon; editable vector source. Use the Icon swap property in UI controls. ## Table Row **Node ID:** 10:305 Comfortable 64px record rows with student identity, program, status and an explicit review link. ## Badge **Node ID:** 10:15 A semantic status label. Always communicate the status in words as well as color. ## Link **Node ID:** 5:643 Use for navigation to a record or document. Hover and focus retain a visible underline. The generated code contains image and SVG URL constants, e.g. const image = `${assetPathPrefix}/`, where assetPathPrefix is declared once at the top of the code and every asset URL interpolates it. These URLs are temporary download sources and expire after 7 days. Download each asset into the project with curl -L, then replace its URL in the generated code with a reference to the downloaded asset. Never use the temporary URLs as runtime image sources.