Case study.

Even detailed AI prompting

requires focused verification.

My process was to prompt in both ChatGPT and Claude. Prompts provided detailed  instructions of what I wanted the ai model to perform for me which included. I instructed each model to ask questions and connect directly to Figma and create what I asked. Wherever I found misses in their output or what I would call crappy output I would go back in and detail what was wrong and missing and what I want and then review the work output from each model again.

One interesting note is that both models missed things, made mistakes and when I brought them up said they missed it and would fix it. If the model knew what it the instructions were then why didn't it perform them completely the first time? I noticed this a few times and in both models that if they made a mistake they may blame the prompt writer or something else for why they missed a specific direction or made an error. As the human in the loop I needed to be able to review and validate work to locate errors and then redirect the models to correct it. This did prove to be a learning experience for the models and was added to the reusable Markdown instruction file (.md agents) created.

Working with AI models and the speed it provides is not a "one and done" but rather a partner standard of how to work with the tool to produce and deliver outstanding results. After all we are not satisfied with average delivered products! Average and false "good" results certainly result from lack of basic reviews and standards. My list grows for my best AI working practices with 4 listed here that are foundational parts of working with AI in design or interfaces where humans are product success dependent.

Designers working with AI should create rules .md agents providing a starting template framework of rules for each projects starting point. Iterating on these rules with lessons learned should be a regular part of the design and engineering team's process.

Claude: From prompt to Figma

Detailed prompting and connecting from Claude via the MCP to Figma connect provided mixed results with both benefits and time challenges.

 ■   Structure and Layout: Claude was directed through detailed prompts to create a fully tokenized design system from a Sketch symbol file. It provided a light system with a framework that still included the original  master symbols instead of the tokens, variables and documentation. It appeared to follow some prompts and ignore others. It did work well connecting to Figma. Interface designs were jump started for would be designers but not overly innovative.

 ■   Scorecard and Design Testing: Claude did well when instructed to test with the list of agent in design best practices I provided. The list of questions were templated (.md created) and then applied to the interfaces to see where the designs failed and where they needed to be resolved based on the answers to those questions. A scoreboard was created to take that data and provide a design scoreboard which could be reused to test designs and prove or disprove validity in especially high risk enterprises.

 ■   Partial Benefit: Time could be saved by designers and stakeholders with the base level designs for interface with agents however the design system creation was so light the work would be restarted in ChatGPT.

View a sampling of the images grabbed from the study to see how Claude would handle creating a complete tokenized design system from symbols and incorporating an agent into a high risk financial application.

Chatgpt: From prompt to Figma

ChatGPT helped turn the lessons from the first build into a more rigorous workflow—strengthening the prompts, auditing the live Figma structure and translating visual review into measurable design-system and agentic-UX checks.

 ■   Structure and Verification: ChatGPT was strongest when the work moved beyond “create a design system” to explicit acceptance criteria. It helped define the three-tier token structure, light and dark modes, component and state requirements, accessibility checks and the evidence needed to verify completion. The resulting workflow measured the live file instead of accepting a plausible-looking result.

 ■   Prompt Architecture and Design Testing: ChatGPT helped convert repeated corrections into reusable prompts and a governed validation framework. Agentic interface concepts were reviewed for intent visibility, planning transparency, source disclosure, confidence, human approval, failure recovery, escalation, least privilege and auditability. These became repeatable questions for evaluating high-risk enterprise designs.

 ■   Measured Benefit: ChatGPT accelerated audit synthesis, prompt refinement, documentation, visual evidence and portfolio storytelling. It did not remove the need for a senior designer. I still determined what was accurate, protected the UMB brand, challenged incomplete output, set the boundaries of delegated action and decided what required human review.

The strongest result was not one model working independently. It was a governed workflow in which each model supported different parts of the process while every output remained subject to human judgment and verification.

Simplified Symbol Styles

The original design system styling was using Sketch UX Design software. This was a time prior to Figma where manual components, annotations and documentation were manual processes.

AI Design System creation

I imported the Sketch file into Figma then connected both ChatGPT and Claude to the file and instructed it to create a full design system from the Sketch symbols. Multiple iterations produced and outstanding result.

Component documentation

I instructed the AI models to follow the best practices of the most professional and respected design systems. Including component documentation with do's and dont's turned out nicely.

Icon Library

The AI models were instructed to create and icon library matching an outlined style I provided. Several iterations were needed to attain the right level of icons a, sizing and options.

ChatGPT's Design

In this study my evaluation is that ChatGPT slightly edged out over Claude for prompted design work. I felt the creativity was better and the model followed creative direction more effectively in this case.

Built-in Evaluation

Multiple prompts and a review of risk and compliance integrating AI agents  provided a best practices foundation where evaluations would be attached to every design. For designers this would allow responsive interactivity with rapid design iterations based on best practices.

Test & Design

Among the instructions in  prompting the models was mimicking the  design processes of discovery, research, variations, scoring , accessibility and advanced testing and micro testing techniques.

Best Practices & Patterns

I discovered critical core principles and patterns that would align to creating products which would ensure to the level of risk and compliance of fintech and other regulatory enterprises.

It was an ideal testing scenario providing a full scope for creative thinking to bring my experience to the utilization and implementation of the tool.

I implemented micro testing of the interface following each prompt. Both models connected successfully to Figma and both models needed regular validation to prove the directions were followed and results met with the requirement.

Understanding the models' limitations and pluses enables me to to guide the projects in the right direction for saving time and rework.

The results of the study provided a templated prompt where the model would  successfully include all of the successful directions learned throughout the project.

The templated design-system .md agent can be reused in future projects to:

• Create full Design Systems for use across devices and sub-brands
• Audit an existing Figma library for missing tokens, duplicate components, inconsistent naming and incomplete states.
• Convert legacy Sketch symbols, UI kits or disconnected Figma assets into a structured design-system inventory.
• Define primitive, semantic and component-level token architecture.
• Establish light and dark themes using role-based variables instead of hard-coded values.
• Map existing components to approved tokens, variants and reusable properties.
• Generate component requirements for size, hierarchy, interaction states, content and accessibility.
• Create a traceable migration plan showing what should be preserved, consolidated, remapped, rebuilt or removed.
• Validate focus states, color contrast, error handling, disabled states and other accessibility requirements.
• Produce consistent component documentation, usage guidance and implementation notes.
• Compare requested deliverables with the live Figma file and report measurable completion evidence.
• Prevent duplicate components and unnecessary variables by requiring the agent to inspect the library before editing.
• Create reusable acceptance criteria and scorecards for design-system quality reviews.
• Support design-to-development handoff through clearer naming, token mapping and component specifications.
• Identify exceptions, unresolved issues and decisions requiring senior designer or engineering review.
• Adapt the same governed workflow to a new brand, product, industry or component library.
• Give future AI tools a repeatable operating framework while preserving human review, approval and design accountability.