UI Component Inventory Extractor
Identify all components, states, and data fields from a sketch to prevent rework later.
Prompt Overview
Tips For You
Normalize names early so design and engineering speak the same language. | Document validation where data is captured to speed QA later. | Prefer variants over new components to reduce design system sprawl. | Capture accessibility states like focus order and ARIA role hints.
From Operations TeamNexusAi TechnologyProblem It Solves
Surprise components appear late and blow up timelines. This inventories elements early with states and data needs.
State Coverage Matrix
Ensures every interactive element defines behavior under all states.
Data Contracts
Lists fields, types, and validation to align with engineering.
Variant Discipline
Reduces sprawl by grouping variants sensibly.
Accessibility Hooks
Prompts focus order and ARIA hints where relevant.
AI Prompt Instructions
Act as: A design systems lead tasked with extracting a component inventory from a rough UI sketch and mapping states and data contracts.
Why this task matters: A solid component inventory prevents duplication, clarifies engineering needs, and keeps mockups consistent.
Important boundaries:
- Separate presentational vs data-driven components.
- Capture all states (default, hover, focus, active, disabled, loading, empty, error).
- Define minimal data fields and validation for each data-bound component.
User inputs:
- Sketch description and any labels present in the sketch.
- Known data sources or APIs (if any).
- Accessibility and localization constraints.
Objectives:
1) List components and categorize (atoms, molecules, organisms).
2) Define all interactive states and transitions.
3) Map data fields, validation, and error messaging.
4) Flag reusable patterns and naming suggestions.
Analysis workflow:
1) Parse the sketch into candidate components.
2) Normalize names to a consistent naming convention.
3) Group similar elements into a single reusable component with variants.
4) Document state machine for interactive elements.
5) Identify dependencies (auth, permissions, network).
Required output format:
- Summary (purpose, scope, assumptions)
- Component table (Name, Type, States, Data, Validation, Reusability, Notes)
- State diagrams (textual) for key components
- Risks & open questions
Quality controls:
- Every interactive element has at least focus and disabled states considered.
- Validation rules are specific and testable.
- Data fields include type and required/optional.
Verification checklist:
- Component names are unique and consistent.
- No duplicate components that should be variants.
- All error states include copy guidance.
Final instruction: Output a tidy, skimmable inventory suitable for handoff to design and engineering.
Expected Outcome
Summary: Inventory for onboarding + project list screens; assumes email-first auth. Component table (excerpt): - TextInput.Email | Atom | states: default/focus/error | data: email:string | validation: RFC 5322 | reusable: high | notes: inline error under field - Button.Primary | Atom | states: default/loading/disabled | data: n/a | validation: n/a | reusable: high | notes: progress spinner left - ProjectCard | Molecule | states: default/hover/empty | data: name:string, tasks:int | validation: name ≤ 60 chars | reusable: medium | notes: badge shows task count Risks & open questions: - Error copy tone-of-voice not defined. - Need password rules and localization policies.
Implementation Journey
Extract inventory in Claude
Open Claude and paste the prompt with your sketch description and constraints. Ask for a component table, states, and data fields. Expect a structured inventory with reusable naming.
9 minCross-check in ChatGPT
Paste Claude’s output into ChatGPT and request gaps on accessibility, validation, and error copy. Expect a refined list of states and specific validation rules.
6 minApprove baseline
Ask ChatGPT to produce a final table with unique IDs and variant naming to circulate with your team before mockups start.
5 min