{"id":7681,"date":"2025-11-24T09:54:16","date_gmt":"2025-11-24T08:54:16","guid":{"rendered":"https:\/\/blog.bart.sk\/en\/?p=7681"},"modified":"2026-01-08T12:40:21","modified_gmt":"2026-01-08T11:40:21","slug":"from-prototype-to-product-testing-ai-in-clinic-kiosk-development","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/from-prototype-to-product-testing-ai-in-clinic-kiosk-development\/","title":{"rendered":"From Prototype to Product: Testing AI in Clinic Kiosk Development"},"content":{"rendered":"\n<p><strong>When building a new digital product, the most important goal is usually the same \u2014 get to a functional prototype as quickly as possible. That\u2019s the moment when we learn whether an idea works outside of documentation and whether it\u2019s worth investing in further development. It\u2019s not just about speed, but about reducing the risk of heading in the wrong direction early on.<\/strong><\/p>\n\n\n\n<p>For our clinic kiosk application, we decided to internally compare three different ways of building a prototype. We wanted to see how speed and quality would differ when using AI-only, a traditional workflow with no AI, and a hybrid approach where a developer works hand-in-hand with AI.<\/p>\n\n\n\n<p>This experiment allowed us to look at the same task from three perspectives and evaluate which method makes the most sense for similar projects. Since the client only pays for the solution that goes to production, we were free to explore all approaches without increasing their budget.<\/p>\n\n\n\n<p>I was part of the team testing the developer + AI workflow. And while I had certain expectations, some results were far more surprising than I anticipated.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The brief: a self-check-in kiosk for clinics<\/strong><\/h2>\n\n\n\n<p>The project had a clear goal: build a touch-friendly kiosk application for clinics that allows patients to quickly and intuitively confirm their arrival \u2014 without waiting at the reception desk. Key requirements included:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>large touch-optimized interface elements,<\/li>\n\n\n\n<li>multi-language support,<\/li>\n\n\n\n<li>automatic return to the home screen after inactivity,<\/li>\n\n\n\n<li>integration readiness for secure API communication and ID-card scanning.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Three development paths<\/strong><\/h2>\n\n\n\n<p><strong>AI-only:<\/strong> using several tools with minimal human input (Lovable, GitHub Copilot, Figma plugins such as Anima and the MCP server, GitHub Spark).<\/p>\n\n\n\n<p><strong>No AI:<\/strong> a traditional development process delivered by our partner company.<\/p>\n\n\n\n<p><strong>Developer + AI:<\/strong> a hybrid workflow where AI accelerates the work while the developer ensures quality and correctness.<\/p>\n\n\n\n<p>This is where I was involved. My task was to implement the front end with AI support. Using precise prompts, I generated components based on the Figma design and connected them to the API. My colleague handled the back end, also supported by AI when implementing application logic and integrations. At the end, we merged everything into a functional prototype ready for testing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How front-end development looked in the developer \u00d7 AI workflow<\/strong><\/h2>\n\n\n\n<p>When I joined the project, I already had a complete Figma design. Thanks to Figma\u2019s MCP server, I was able to give AI direct access to the entire design \u2014 including typography, colors, spacing, and visual styles.<\/p>\n\n\n\n<p>The AI then generated components exactly according to the technical requirements I defined \u2014 in this case, React components using Tailwind. Because the design was relatively straightforward, the output was very accurate and required only minimal adjustments.<\/p>\n\n\n\n<p>This meant I didn\u2019t have to spend time on repetitive work and could focus more on testing and fine-tuning details to make the user experience as smooth and intuitive as possible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2025\/11\/image-15.png\" alt=\"\" class=\"wp-image-13628\"\/><\/figure>\n\n\n\n<p>I was also surprised by how quickly I managed to implement Trust1 Connector \u2014 a service for reading ID cards. All I had to do was describe the service to the AI, send a link to its documentation, and outline how it should work. The AI handled the rest, and the result was functional much sooner than expected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2025\/11\/image-18.png\" alt=\"\" class=\"wp-image-13631\"\/><\/figure>\n\n\n\n<p>Refactoring and code unification were significantly faster as well \u2014 whenever broader changes were needed, I didn\u2019t have to open file after file. The AI identified all relevant occurrences, understood the relationships between components, and modified the code consistently across the project.<\/p>\n\n\n\n<p class=\"has-gray-100-background-color has-background\"><strong>In roughly 24 hours, I had a fully functional front end ready for real-world deployment.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How the other teams approached the task<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>AI-only: speed without control<\/strong><\/h3>\n\n\n\n<p>The AI-only team tested multiple tools. The most successful outputs came from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lovable:<\/strong> created the basic structure including multi-language support and the inactivity timeout, but any larger code change caused unpredictable shifts in layout and behavior.<\/li>\n\n\n\n<li><strong>GitHub Copilot:<\/strong> generated the project skeleton, but the output was inconsistent and overly verbose.<\/li>\n\n\n\n<li><strong>Anima plugin:<\/strong> exported screens from Figma, but lacked responsiveness \u2014 a critical feature for kiosk devices.<\/li>\n<\/ul>\n\n\n\n<p>Each tool produced a clickable prototype, but all of them had significant drawbacks. None were suitable as a foundation for long-term development, so they served mainly as a visual reference for discussion.<\/p>\n\n\n\n<p><strong>Generated home screens:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"730\" data-id=\"7690\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable.png\" alt=\"\" class=\"wp-image-7690\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable.png 1080w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-300x203.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-768x519.png 768w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-512x346.png 512w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-1024x692.png 1024w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-920x622.png 920w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><figcaption class=\"wp-element-caption\">Lovable<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"730\" data-id=\"7692\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-Homescreen-1.png\" alt=\"\" class=\"wp-image-7692\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-Homescreen-1.png 1080w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-Homescreen-1-300x203.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-Homescreen-1-768x519.png 768w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-Homescreen-1-512x346.png 512w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-Homescreen-1-1024x692.png 1024w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-Homescreen-1-920x622.png 920w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><figcaption class=\"wp-element-caption\">GitHub<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"730\" data-id=\"7691\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-Homescreen.png\" alt=\"\" class=\"wp-image-7691\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-Homescreen.png 1080w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-Homescreen-300x203.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-Homescreen-768x519.png 768w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-Homescreen-512x346.png 512w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-Homescreen-1024x692.png 1024w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-Homescreen-920x622.png 920w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><figcaption class=\"wp-element-caption\">Anima<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p><strong>Generated patient identification screens:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-7 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1072\" height=\"706\" data-id=\"7693\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-2.png\" alt=\"\" class=\"wp-image-7693\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-2.png 1072w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-2-300x198.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-2-768x506.png 768w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-2-512x337.png 512w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-2-1024x674.png 1024w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Lovable-2-920x606.png 920w\" sizes=\"(max-width: 1072px) 100vw, 1072px\" \/><figcaption class=\"wp-element-caption\">Lovable<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"730\" data-id=\"7694\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-ID.png\" alt=\"\" class=\"wp-image-7694\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-ID.png 1080w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-ID-300x203.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-ID-768x519.png 768w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-ID-512x346.png 512w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-ID-1024x692.png 1024w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/GitHub-ID-920x622.png 920w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><figcaption class=\"wp-element-caption\">GitHub<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"730\" data-id=\"7695\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-ID.png\" alt=\"\" class=\"wp-image-7695\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-ID.png 1080w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-ID-300x203.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-ID-768x519.png 768w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-ID-512x346.png 512w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-ID-1024x692.png 1024w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/11\/Figma-ID-920x622.png 920w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><figcaption class=\"wp-element-caption\">Anima<\/figcaption><\/figure>\n<\/figure>\n\n\n<h3 class=\"wp-block-heading\"><strong>No AI: stability at the cost of time<\/strong><\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The partner team followed a traditional development approach. Their output was stable, well-structured, and easy to test. However, development took significantly longer and lacked details that make user navigation faster and clearer \u2014 such as auto-filling common data or stronger visual guidance.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Even with careful attention to the Figma design, small deviations in spacing or text alignment appeared \u2014 details that AI handled with surprising precision.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\"><strong>Conclusion: Where AI shines \u2014 and where it doesn\u2019t<\/strong><\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>After reviewing all three approaches together with the client, we agreed that the developer + AI workflow offered the best balance of speed and quality. AI accelerated repetitive tasks, while the developer ensured context, logic, and user experience were correct.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"top\":\"var:preset|spacing|30\",\"bottom\":\"var:preset|spacing|50\",\"left\":\"var:preset|spacing|30\",\"right\":\"var:preset|spacing|30\"}}},\"backgroundColor\":\"gray-100\"} --><\/p>\n<div class=\"wp-block-group has-gray-100-background-color has-background\" style=\"padding: var(--wp--preset--spacing--50);\">\n<p><strong>In short:<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>AI alone cannot deliver a high-quality application \u2014 but it can significantly speed up repetitive work.<\/li>\n<li>It is most useful during early implementation, refactoring, and testing rare scenarios.<\/li>\n<li>Without a developer, AI lacks context and often produces inefficient solutions. Together, they work extremely well.<\/li>\n<\/ul>\n<\/div>\n<p><!-- \/wp:group --><\/p>\n<div>\n<p><!-- wp:paragraph --><\/p>\n<p>Today, the developer + AI workflow is \u2014 in our experience \u2014 the most effective approach, especially when building an MVP (a Minimum Viable Product that quickly validates whether an idea is worth scaling).<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The final kiosk application has passed internal testing and is now ready for deployment in real clinics. Its launch is planned for the upcoming months.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"textAlign\":\"center\"} --><\/p>\n<h2 class=\"wp-block-heading has-text-align-center\" style=\"text-align: center;\">If you\u2019re considering AI in your development process, reach out. We\u2019ll help you apply it meaningfully and effectively.<\/h2>\n<p style=\"text-align: center;\"><!-- \/wp:heading --><\/p>\n<p style=\"text-align: center;\"><!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} --><\/p>\n<div class=\"wp-block-buttons\"><center>\n<div class=\"wp-block-button\" style=\"text-align: center;\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.bart.sk\/mam-zaujem\" target=\"_blank\" rel=\"noreferrer noopener\" data-wplink-edit=\"true\">Contact us<\/a><\/div>\n<p>\u00a0<\/p>\n<\/center><\/div>\n<p><!-- \/wp:buttons --><\/p>\n<p><!-- wp:separator --><\/p>\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/><!-- \/wp:separator -->\n<h2>Frequently asked questions about AI in software development<\/h2>\n<div class=\"faq\"><details>\n<summary>Can AI build a complete app without a developer?<\/summary>\n<p>No. AI can quickly prepare a demo or basic prototype, but it cannot ensure stability, precise logic, security, or full design consistency. A developer is essential.<\/p>\n<\/details><details>\n<summary>Why can\u2019t AI prototypes be used as a production foundation?<\/summary>\n<p>They tend to be unstable, design-inconsistent, and sensitive to changes. They\u2019re excellent for early discussions \u2014 but not as the base for long-term development.<\/p>\n<\/details><details>\n<summary>Where is AI most helpful in development?<\/summary>\n<p>Mainly at the start \u2014 creating structure, generating components, refactoring, and speeding up repetitive tasks.<\/p>\n<\/details><details>\n<summary>Why is traditional development slower?<\/summary>\n<p>It provides the highest stability and control, but building the first usable prototype takes significantly more time compared to workflows that leverage AI.<\/p>\n<\/details><details>\n<summary>What makes the developer + AI workflow different?<\/summary>\n<p>It combines rapid generation with expert control over logic, UX, and quality \u2014 resulting in a fast, reliable prototype ready for real development.<\/p>\n<\/details><details>\n<summary>Is AI suitable for high-security or complex projects?<\/summary>\n<p>Yes \u2014 but only under the supervision of an experienced developer. AI speeds up routine tasks, but critical parts like security, integrations, or data handling must remain human-controlled.<\/p>\n<\/details><details>\n<summary>Can AI replace a designer or reproduce Figma layouts perfectly?<\/summary>\n<p>Not fully. It can approximate the design, but lacks precision and cannot guarantee consistent styling or typography. Manual review is still required.<\/p>\n<\/details><details>\n<summary>When does it make sense to start a project \u201cAI-first\u201d?<\/summary>\n<p>For MVPs, internal tools, or early concept validation. In those cases, AI brings fast, low-cost results.<\/p>\n<\/details><details>\n<summary>How much time can AI save during development?<\/summary>\n<p>In early phases, often days or weeks. For complex products, the impact is smaller but still valuable in repetitive or large-scale refactoring tasks.<\/p>\n<\/details><details>\n<summary>Does AI reduce the overall project cost?<\/summary>\n<p>It can reduce costs during prototyping and validation. In production, it mainly optimizes developer workload rather than lowering the total price.<\/p>\n<\/details><details>\n<summary>Is AI-generated code secure?<\/summary>\n<p>Not always. AI cannot reliably identify security risks or choose the best practices. Critical sections \u2014 such as authentication or handling sensitive data \u2014 always need a developer\u2019s review.<\/p>\n<\/details><details>\n<summary>Will AI eventually create complete applications on its own?<\/summary>\n<p>Possibly for simple apps. But for complex, business-critical products, developers will remain essential for architecture, integrations, and accountability.<\/p>\n<\/details><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"When building a new digital product, the most important goal is usually the same \u2014 get to a&hellip;","protected":false},"author":21,"featured_media":7682,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[199],"tags":[974,1062,1057,1058,1061,1060,971,1059,1064,1066,1067,1065,1063,1068],"_links":{"self":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7681"}],"collection":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/comments?post=7681"}],"version-history":[{"count":6,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7681\/revisions"}],"predecessor-version":[{"id":7697,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7681\/revisions\/7697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media\/7682"}],"wp:attachment":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media?parent=7681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/categories?post=7681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/tags?post=7681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}