{"id":4886,"date":"2026-04-02T05:14:05","date_gmt":"2026-04-02T05:14:05","guid":{"rendered":"https:\/\/mandyullmann.com\/?post_type=avada_portfolio&#038;p=4886"},"modified":"2026-10-21T22:00:50","modified_gmt":"2026-10-21T20:00:50","slug":"coding_study_lovable","status":"publish","type":"avada_portfolio","link":"https:\/\/mandyullmann.com\/de\/portfolio-items\/coding_study_lovable\/","title":{"rendered":"Spec-Driven Vibe Coding Study With Lovable AI"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling mandy-dark-surface-page\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:10%;--awb-padding-right:13%;--awb-padding-bottom:0%;--awb-padding-left:13%;--awb-padding-top-medium:8%;--awb-padding-bottom-medium:8%;--awb-padding-right-small:24px;--awb-padding-left-small:24px;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-flex-wrap:wrap;\" id=\"intro\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-stretch fusion-flex-justify-content-space-between fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_5_6 5_6 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:83.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:23.04%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:0%;--awb-width-medium:83.333333333333%;--awb-order-medium:0;--awb-spacing-right-medium:23.04%;--awb-spacing-left-medium:0%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><progress class=\"fusion-scroll-progress fusion-scroll-progress-1 fusion-fixed-bottom\" max=\"100\" style=\"--awb-height:10px;--awb-border-size:0px;--awb-background-color:#1b2d40;--awb-progress-color:#92deb7;--awb-border-color:var(--awb-color1);\"><\/progress><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_3_4 3_4 fusion-flex-column\" style=\"--awb-bg-color:rgba(255,255,255,0);--awb-bg-color-hover:rgba(255,255,255,0);--awb-bg-size:cover;--awb-width-large:75%;--awb-margin-top-large:0px;--awb-spacing-right-large:0%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:0%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:0%;--awb-margin-bottom-medium:72px;--awb-spacing-left-medium:0%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-margin-bottom-small:32px;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-1 fusion-sep-none fusion-title-text fusion-title-size-one job_headline mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\"><h1 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:700;margin:0;letter-spacing:1px;font-size:1em;line-height:150%;\"><p data-pm-slice=\"1 1 &#091;&#093;\">How I Learned to Talk to Lovable AI\u2014and Was Finally Understood<\/p><\/h1><\/div><div class=\"fusion-title title fusion-title-2 fusion-sep-none fusion-title-text fusion-title-size-paragraph subline_job mandy-dark-foreground-secondary\" style=\"--awb-text-color:#ffffff;--awb-margin-bottom:0px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\"><p class=\"fusion-title-heading title-heading-left title-heading-tag\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:300;margin:0;letter-spacing:var(--awb-typography2-letter-spacing);text-transform:var(--awb-typography2-text-transform);font-size:1em;line-height:160%;\">A case study on how I learned to guide AI to produce pixel-accurate, reusable results and implement my design system the way I built it in Figma.<\/p><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-color:rgba(224,220,233,0);--awb-bg-color-hover:rgba(224,220,233,0);--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:0%;--awb-margin-bottom-large:71px;--awb-spacing-left-large:0%;--awb-width-medium:100%;--awb-order-medium:1;--awb-spacing-right-medium:0%;--awb-margin-bottom-medium:0px;--awb-spacing-left-medium:0%;--awb-width-small:100%;--awb-order-small:1;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-space-between fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-3 fusion-sep-none fusion-title-text fusion-title-size-paragraph kunde_u_datum mandy-foreground-green-500\" style=\"--awb-text-color:#8dd3b0;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:16px;\"><p class=\"fusion-title-heading title-heading-left title-heading-tag\" style=\"font-family:&quot;Roboto Mono&quot;;font-style:normal;font-weight:400;margin:0;font-size:1em;line-height:170%;\">AI-ASSISTED ENGINEERING EXPERIMENT 2026<\/p><\/div><a\n  class=\"mandy-button mandy-button--dark-primary\"\n  href=\"https:\/\/dummy-link-fun.lovable.app\"\n  target=\"_blank\"\n  rel=\"noopener noreferrer\"\n>\n  <span class=\"mandy-button__label\">\n    Test Syllable LIVE\n  <\/span>\n\n  <svg\n    class=\"mandy-button__icon\"\n    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <path\n      d=\"M10 8L13.6465 11.6465C13.8417 11.8417 13.8417 12.1583 13.6465 12.3536L10.0001 16\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    \/>\n  <\/svg>\n<\/a><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling container_x mandy-dark-surface-page\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-right:13%;--awb-padding-left:13%;--awb-padding-top-medium:0px;--awb-padding-top-small:0px;--awb-padding-right-small:20px;--awb-padding-left-small:20px;--awb-margin-top:0px;--awb-margin-top-medium:0px;--awb-margin-top-small:0px;--awb-background-color:#1b2e3f;--awb-flex-wrap:wrap;\" id=\"team-setup\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-3 fusion_builder_column_3_4 3_4 fusion-flex-column\" style=\"--awb-padding-left:22px;--awb-overflow:hidden;--awb-bg-size:cover;--awb-border-radius:30px 30px 30px 30px;--awb-width-large:75%;--awb-margin-top-large:0px;--awb-spacing-right-large:0%;--awb-margin-bottom-large:40px;--awb-spacing-left-large:0%;--awb-width-medium:83.333333333333%;--awb-order-medium:0;--awb-margin-top-medium:10px;--awb-spacing-right-medium:0%;--awb-spacing-left-medium:0%;--awb-width-small:100%;--awb-order-small:0;--awb-margin-top-small:0;--awb-spacing-right-small:0%;--awb-spacing-left-small:0%;\"><div class=\"fusion-column-wrapper lazyload fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-row fusion-column-has-bg-image\" data-bg-url=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2025\/09\/raster_page_rrot-1024x698.png\" data-bg=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2025\/09\/raster_page_rrot-1024x698.png\"><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-0 fusion_builder_column_inner_1_1 1_1 fusion-flex-column fusion-flex-align-self-flex-start\" style=\"--awb-padding-top:28px;--awb-padding-right:40px;--awb-padding-bottom:5px;--awb-padding-left:21px;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:0%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:0%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:0%;--awb-spacing-left-medium:0%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-row\"><div class=\"fusion-title title fusion-title-4 fusion-sep-none fusion-title-text fusion-title-size-two team_setup_heading mandy-highlight-green\" style=\"--awb-text-color:#8dd3b0;--awb-margin-left:14px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:24px;\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:100%;\">Project Team Setup<\/h2><\/div><div class=\"fusion-text fusion-text-1 fusion-text-no-margin mandy-light-foreground-on-brand-secondary\" style=\"--awb-font-size:18px;--awb-line-height:160%;--awb-text-color:#ffffff;--awb-margin-top:-10px;--awb-margin-right:0px;--awb-margin-bottom:5%;--awb-margin-left:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><ul>\n<li>Me \u2013 Product Design, UX, Prompt Engineering<\/li>\n<li>Lovable \u2013 AI Developer (Code Generation &amp; Implementation)<\/li>\n<li>ChatGPT \u2013 Prompt Support &amp; Technical Sparring<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-4 fusion_builder_column_5_6 5_6 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:83.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:0%;--awb-margin-bottom-large:117px;--awb-spacing-left-large:0%;--awb-width-medium:83.333333333333%;--awb-order-medium:0;--awb-spacing-right-medium:0%;--awb-spacing-left-medium:0%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><ul\n  class=\"mandy-pill-list\"\n  aria-label=\"Skills and tools used in this project\"\n>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">1:1 Design Prompting<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Acceptance Criteria<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Accessibility<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">AI<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">AI Workflows<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Component Library<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Component Thinking<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Design System<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Design Tokens<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Prompt Engineering<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Prompting<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Spec-Driven<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-primary\">Vibe Coding<\/li>\n\n  <li class=\"mandy-pill mandy-pill--dark-secondary\">Builder.io<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-secondary\">ChatGPT<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-secondary\">Claude<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-secondary\">CSS<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-secondary\">Figma<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-secondary\">HTML<\/li>\n  <li class=\"mandy-pill mandy-pill--dark-secondary\">Lovable<\/li>\n<\/ul><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-5 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><section\n  class=\"\n    mandy-slider\n    mandy-case-slider\n    mandy-case-slider--light\n    mandy-image-slider\n    is-loading\n  \"\n  data-mandy-slider\n  role=\"region\"\n  aria-label=\"Game experience\"\n  aria-roledescription=\"carousel\"\n  tabindex=\"0\"\n>\n\n  <div class=\"mandy-slider__viewport\">\n\n    <div class=\"mandy-slider__stage\">\n\n\n      <!-- =====================================================\n           01 \u2014 STYLEGUIDE\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-active\"\n        data-mandy-slider-card\n        aria-current=\"true\"\n        aria-labelledby=\"image-slide-01-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/01_styleguide.png\"\n            alt=\"Design system overview with game UI components, states and visual elements\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-01-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              01 Building the UI Foundation\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              Core components, states and visual rules for the game.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           02 \u2014 HOME\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-next\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-02-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/02_home.png\"\n            alt=\"Player 01 opening a new game\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-02-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              02 Open a New Game\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              Player 01 creates the game and gets ready to invite a friend.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           03 \u2014 FREUND EINLADEN\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-03-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/03_freund_einladen.png\"\n            alt=\"Invite flow with native sharing and copy link confirmation\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-03-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              03 Invite a Friend\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              Share the game or copy the invite link.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           04 \u2014 HOME PLAYER 02\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-04-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/04_home_player_02.png\"\n            alt=\"Player 02 joining the game while Player 01 controls the game start\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-04-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              04 Join the Game\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              Player 02 enters while Player 01 controls the start.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           05 \u2014 PLAYER 02 WAIT\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-05-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/05_player_02_wait.png\"\n            alt=\"Player 02 waiting screen before Player 01 starts the game\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-05-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              05 Waiting for the Start\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              Player 02 waits until Player 01 starts the game.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           06 \u2014 INTRO EXPLAIN\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-06-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/06_intro_explain.png\"\n            alt=\"Animated introduction explaining the explainer role\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-06-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              06 Learn the Explainer Role\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              A short animated intro explains how to describe the word.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           07 \u2014 INTRO GUESS\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-07-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/07_intro_guess.png\"\n            alt=\"Animated introduction explaining the guesser role\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-07-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              07 Learn the Guesser Role\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              A short intro explains how to guess and use the club.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           08 \u2014 GAMESTART GUESS\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-08-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/08_gamestart_guess.png\"\n            alt=\"Guesser gameplay with persistent chat input and pressure feature\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-08-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              08 Guess the Word\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              Type guesses, follow the round and put your partner under pressure.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           09 \u2014 GAME EXPLAIN\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-09-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/09_game_explain.png\"\n            alt=\"Explainer gameplay with forbidden word and persistent chat input\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-09-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              09 Explain the Word\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              Describe without using the forbidden word and react to guesses.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           10 \u2014 KEULENSCHLAG\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-10-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/10_keulenschlag.png\"\n            alt=\"Penalty feature with animated positive and negative score feedback\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-10-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              10 Penalty in Action\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              The club triggers a short penalty with animated score feedback.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           11 \u2014 PRESSURE FEATURE\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-after\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-11-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/11_pressure_feature.png\"\n            alt=\"Pressure feature with sound reactions and camera controls\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-11-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              11 Add Some Pressure\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              Send sounds and reactions to distract or motivate your partner.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =====================================================\n           12 \u2014 ENDSCREEN\n           ===================================================== -->\n\n      <article\n        class=\"mandy-slider-card is-prev\"\n        data-mandy-slider-card\n        aria-hidden=\"true\"\n        aria-labelledby=\"image-slide-12-title\"\n        aria-roledescription=\"slide\"\n      >\n\n        <div class=\"mandy-slider-card__media\">\n          <img decoding=\"async\"\n            class=\"lazyload mandy-slider-card__image\"\n            src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/10\/12_endscreen.png\"\n            alt=\"Game over screen with score breakdown, new game option and after-game chat\"\n          >\n        <\/div>\n\n        <div class=\"mandy-slider-card__body\">\n\n          <div class=\"mandy-slider-card__copy\">\n\n            <h3\n              id=\"image-slide-12-title\"\n              class=\"mandy-slider-card__title\"\n            >\n              12 Review the Game\n            <\/h3>\n\n            <p class=\"mandy-slider-card__description\">\n              See the final score, start again or keep chatting.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <div\n    class=\"mandy-sr-only\"\n    data-mandy-slider-status\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n  ><\/div>\n\n<\/section><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-3 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling mandy-dark-surface-page\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:0px;--awb-padding-right:12%;--awb-padding-left:12%;--awb-padding-right-medium:8%;--awb-padding-left-medium:8%;--awb-padding-right-small:5%;--awb-padding-bottom-small:5px;--awb-padding-left-small:5%;--awb-margin-top:0px;--awb-margin-top-medium:0px;--awb-background-color:#1b2d40;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-6 fusion-flex-column fusion-flex-align-self-flex-start\" style=\"--awb-padding-top:107px;--awb-padding-left:0%;--awb-padding-top-small:37px;--awb-padding-right-small:0px;--awb-padding-bottom-small:0px;--awb-padding-left-small:0px;--awb-bg-size:cover;--awb-width-large:100%;--awb-flex-grow:1;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:2.304%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:2.304%;--awb-width-small:100%;--awb-order-small:0;--awb-margin-top-small:0px;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" id=\"product\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><nav\n  class=\"mandy-dropdown\"\n  aria-label=\"Explore my journey\"\n>\n\n  <button\n    class=\"mandy-dropdown__trigger\"\n    type=\"button\"\n    aria-expanded=\"false\"\n    aria-controls=\"mandy-dropdown-menu\"\n  >\n    <span class=\"mandy-dropdown__label\">\n      Explore my Journey\n    <\/span>\n\n    <svg\n      class=\"mandy-dropdown__caret\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M6 9l6 6 6-6\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      \/>\n    <\/svg>\n  <\/button>\n\n\n  <ul\n    id=\"mandy-dropdown-menu\"\n    class=\"mandy-dropdown__menu\"\n    role=\"listbox\"\n  >\n\n    <li>\n      <a\n        class=\"mandy-dropdown__entry is-active\"\n        role=\"option\"\n        aria-selected=\"true\"\n        href=\"#product\"\n      >\n        About The Product\n      <\/a>\n    <\/li>\n\n<li>\n      <a\n        class=\"mandy-dropdown__entry is-active\"\n        role=\"option\"\n        aria-selected=\"true\"\n        href=\"#short\"\n      >\n        Long Story Short\n      <\/a>\n    <\/li>\n\n\n    <li>\n      <a\n        class=\"mandy-dropdown__entry\"\n        role=\"option\"\n        href=\"#game_logic\"\n      >\n        Natual Language & AI\n      <\/a>\n    <\/li>\n\n\n    <li>\n      <a\n        class=\"mandy-dropdown__entry\"\n        role=\"option\"\n        href=\"#cl_break\"\n      >\n        Limits of Conversational Language\n      <\/a>\n    <\/li>\n\n\n    <li>\n      <a\n        class=\"mandy-dropdown__entry\"\n        role=\"option\"\n        href=\"#visual_layer\"\n      >\n        Visual Design with AI\n      <\/a>\n    <\/li>\n\n\n    <li>\n      <a\n        class=\"mandy-dropdown__entry\"\n        role=\"option\"\n        href=\"#figma_structure\"\n      >\n        Mise en Place in Figma\n      <\/a>\n    <\/li>\n\n\n    <li>\n      <a\n        class=\"mandy-dropdown__entry\"\n        role=\"option\"\n        href=\"#builder_io\"\n      >\n        Pixel Perfection with Builder.io Code?\n      <\/a>\n    <\/li>\n\n\n    <li>\n      <a\n        class=\"mandy-dropdown__entry\"\n        role=\"option\"\n        href=\"#small_changes\"\n      >\n        Good Prompts For Small Changes\n      <\/a>\n    <\/li>\n\n\n    <li>\n      <a\n        class=\"mandy-dropdown__entry\"\n        role=\"option\"\n        href=\"#instructions_md\"\n      >\n        Files For Defined Rules\n      <\/a>\n    <\/li>\n\n  <\/ul>\n\n<\/nav><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\" id=\"product\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-1 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:40px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-5 fusion-sep-none fusion-title-text fusion-title-size-two h2_title mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-bottom:0px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">I wanted to understand:<\/h2><\/div><div class=\"fusion-text fusion-text-2 p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"display: inline; background-color: var(--mandy-blue-500); color: var(--mandy-light-foreground-on-color-primary);\">Can I build a pixel-precise App with Lovable AI, without losing control over my Figma design, structure, and logic?<br \/><\/span><\/p>\n<\/div><\/div><\/div><\/div><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-2 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:18px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-6 fusion-sep-none fusion-title-text fusion-title-size-two h2_title mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:20px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">\ud83c\udfaf My Goal<\/h2><\/div><div class=\"fusion-text fusion-text-3 p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color: var(--mandy-dark-foreground-secondary);\"><span style=\"background-color: var(--mandy-highlight-green); color: var(--mandy-light-foreground-on-color-primary);\">Build a functional mobile web app using Lovable AI<\/span> and define a workflow that allows me to control the outcome. How should Figma be structured, what can be inferred from the export (and what cannot), and what instructions and rules are necessary to guide the AI toward reliable, reusable results?<br \/>\n<\/span><\/p>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-3 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:18px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-7 fusion-sep-none fusion-title-text fusion-title-size-two h2_title mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:20px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">\ud83d\udc49\u00a0 The Product<\/h2><\/div><div class=\"fusion-text fusion-text-4 p1 \" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color: var(--mandy-dark-foreground-secondary);\">A simple word game, similar to charades, but limited to one-syllable hints. <\/p>\n<p><span style=\"background-color: var(--mandy-blue-500); color: var(--mandy-light-foreground-on-color-primary);\">Try it on your own, too, by opening two firm ones side by side<\/span><\/span><\/p>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-4 fusion_builder_column_inner_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:18px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:168px;--awb-spacing-left-large:3.264%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.264%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><a\n  class=\"mandy-button mandy-button--dark-primary\"\n  href=\"https:\/\/dummy-link-fun.lovable.app\"\n  target=\"_blank\"\n  rel=\"noopener noreferrer\"\n>\n  <span class=\"mandy-button__label\">\n    Test Syllable LIVE\n  <\/span>\n\n  <svg\n    class=\"mandy-button__icon\"\n    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <path\n      d=\"M10 8L13.6465 11.6465C13.8417 11.8417 13.8417 12.1583 13.6465 12.3536L10.0001 16\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    \/>\n  <\/svg>\n<\/a><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-5 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:18px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" id=\"short\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-8 fusion-sep-none fusion-title-text fusion-title-size-two h2_title\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:20px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\" id=\"mission\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">Long Story short \ud83d\udc47<\/h2><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-6 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-padding-top:24px;--awb-overflow:hidden;--awb-bg-color:#f8f8f8;--awb-bg-color-hover:#f8f8f8;--awb-bg-size:cover;--awb-border-radius:30px 30px 30px 30px;--awb-width-large:100%;--awb-margin-top-large:18px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"accordian fusion-accordian insights_card mandy-accordion\" style=\"margin-bottom:30px;--awb-margin-top:0px;--awb-margin-bottom:30px;--awb-padding-top:0px;--awb-padding-right:0px;--awb-padding-bottom:0px;--awb-padding-left:0px;--awb-border-size:1px;--awb-icon-size:16px;--awb-content-font-size:20px;--awb-content-line-height:170%;--awb-icon-alignment:right;--awb-hover-color:var(--awb-color2);--awb-border-color:rgba(175,175,175,0);--awb-background-color:rgba(248,248,248,0);--awb-divider-color:var(--awb-color3);--awb-divider-hover-color:var(--awb-color3);--awb-icon-color:var(--awb-color1);--awb-title-color:#16293b;--awb-content-color:var(--awb-color8);--awb-icon-box-color:var(--awb-color8);--awb-toggle-hover-accent-color:var(--awb-color5);--awb-title-font-family:&quot;Raleway&quot;;--awb-title-font-weight:600;--awb-title-font-style:normal;--awb-title-font-size:20px;--awb-title-letter-spacing:var(--awb-custom_typography_3-letter-spacing);--awb-title-line-height:1.5;--awb-content-font-family:&quot;Raleway&quot;;--awb-content-font-style:normal;--awb-content-font-weight:400;\"><div class=\"panel-group fusion-toggle-icon-right fusion-toggle-icon-boxed\" id=\"accordion-4886-1\"><div class=\"fusion-panel panel-default panel-47d0b59aaf5ab5768 fusion-toggle-no-divider fusion-toggle-boxed-mode\" style=\"--awb-content-font-size:20px;--awb-content-line-height:170%;--awb-content-font-family:&quot;Raleway&quot;;--awb-content-font-style:normal;--awb-content-font-weight:400;--awb-title-font-family:&quot;Raleway&quot;;--awb-title-font-weight:600;--awb-title-font-style:normal;--awb-title-font-size:20px;--awb-title-line-height:150%;--awb-title-color:#16293b;--awb-content-color:#16293b;\"><div class=\"panel-heading\"><h3 class=\"panel-title toggle\" id=\"toggle_47d0b59aaf5ab5768\"><a aria-expanded=\"false\" aria-controls=\"47d0b59aaf5ab5768\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion-4886-1\" data-target=\"#47d0b59aaf5ab5768\" href=\"#47d0b59aaf5ab5768\"><span class=\"fusion-toggle-icon-wrapper\" aria-hidden=\"true\"><i class=\"fa-fusion-box active-icon awb-icon-minus\" aria-hidden=\"true\"><\/i><i class=\"fa-fusion-box inactive-icon awb-icon-plus\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-toggle-heading\">Figma File structure for 1:1 builder.io export<\/span><\/a><\/h3><\/div><div id=\"47d0b59aaf5ab5768\" class=\"panel-collapse collapse \" aria-labelledby=\"toggle_47d0b59aaf5ab5768\"><div class=\"panel-body toggle-content fusion-clearfix\">\n<p class=\"isSelectedEnd\">Builder.io was able to recognize a surprising amount of this structure \u2014 including components, variants, nesting, Auto Layout, colors and many design values. The key learning: <strong>design the Figma file with implementation in mind and remove as much ambiguity as possible before exporting.<\/strong>A clean Figma file makes a huge difference \u2014 the more explicit the design system, the less the AI has to interpret.<\/p>\n<p class=\"isSelectedEnd\"><strong>What worked best:<\/strong> clearly named and grouped components, consistent variant logic, explicit design tokens, Auto Layout throughout, mobile-first screen design, defined breakpoints and states, and separate Builder.io exports for relevant breakpoints or variants.<\/p>\n<p>&nbsp;<\/p>\n<\/div><\/div><\/div><div class=\"fusion-panel panel-default panel-ec9a16a69195648af fusion-toggle-no-divider fusion-toggle-boxed-mode\" style=\"--awb-content-font-size:20px;--awb-content-line-height:170%;--awb-content-font-family:&quot;Raleway&quot;;--awb-content-font-style:normal;--awb-content-font-weight:400;--awb-title-font-family:&quot;Raleway&quot;;--awb-title-font-weight:600;--awb-title-font-style:normal;--awb-title-font-size:20px;--awb-title-line-height:150%;--awb-title-color:#16293b;--awb-content-color:#16293b;\"><div class=\"panel-heading\"><h3 class=\"panel-title toggle\" id=\"toggle_ec9a16a69195648af\"><a aria-expanded=\"false\" aria-controls=\"ec9a16a69195648af\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion-4886-1\" data-target=\"#ec9a16a69195648af\" href=\"#ec9a16a69195648af\"><span class=\"fusion-toggle-icon-wrapper\" aria-hidden=\"true\"><i class=\"fa-fusion-box active-icon awb-icon-minus\" aria-hidden=\"true\"><\/i><i class=\"fa-fusion-box inactive-icon awb-icon-plus\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-toggle-heading\">Learnings about builder.io code<\/span><\/a><\/h3><\/div><div id=\"ec9a16a69195648af\" class=\"panel-collapse collapse \" aria-labelledby=\"toggle_ec9a16a69195648af\"><div class=\"panel-body toggle-content fusion-clearfix\">\n<p class=\"isSelectedEnd\">The cleaner and more implementation-friendly the Figma file, the easier the handover to Builder.io and Lovable became.<\/p>\n<ol start=\"1\" data-spread=\"true\">\n<li><strong>Keep the structure simple.<\/strong><br \/>Avoid unnecessary frames or complicated nesting. Build the layout as closely as possible to how it could later work in real CSS.<\/li>\n<li><strong>Use Auto Layout consistently.<\/strong><br \/>Define clearly how elements behave: fixed, hug, fill, spacing, alignment and responsive resizing.<\/li>\n<li><strong>Name everything clearly.<\/strong><br \/>Components, variants, frames and important layers should have understandable and consistent names. Good naming also makes it much easier to reference them later in prompts.<\/li>\n<li><strong>Build reusable components only once.<\/strong><br \/>Create components and variants centrally and reuse them throughout the design instead of rebuilding similar elements inside individual screens.<\/li>\n<li><strong>Define variants and states before the handover.<\/strong><br \/>The more complete the component system is in Figma, the fewer decisions the AI has to make later.<\/li>\n<li><strong>Think about the code structure while designing.<\/strong><br \/>Figma and CSS do not behave exactly the same. If I already know that a certain structure can create problems in code, I can adjust the Figma structure before exporting. \u2192 <strong>See also: Figma \u2260 Real CSS Findings<\/strong><\/li>\n<li><strong>Do not rely on the generated code alone.<\/strong><br \/>For more complex structures, I sometimes also provided a screenshot of the Figma layer\/component hierarchy and explained how the elements were meant to be nested and reused.<\/li>\n<li><strong>Make the structure easy to explain.<\/strong><br \/>A good test was: Can I quickly show the Figma structure and explain how the page is built from components, variants and containers? If yes, the AI handover was usually much easier.<\/li>\n<\/ol>\n<p><strong>Main learning:<\/strong><br \/>Build Figma not only for the final visual result, but also for a clear handover. <strong>Simple structure, consistent naming, reusable components and explicit hierarchy reduce the amount the AI has to interpret.<\/strong><\/p>\n<\/div><\/div><\/div><div class=\"fusion-panel panel-default panel-f75b2619e6023d85f fusion-toggle-no-divider fusion-toggle-boxed-mode\" style=\"--awb-content-font-size:20px;--awb-content-line-height:170%;--awb-content-font-family:&quot;Raleway&quot;;--awb-content-font-style:normal;--awb-content-font-weight:400;--awb-title-font-family:&quot;Raleway&quot;;--awb-title-font-weight:600;--awb-title-font-style:normal;--awb-title-font-size:20px;--awb-title-line-height:150%;--awb-title-color:#16293b;--awb-content-color:#16293b;\"><div class=\"panel-heading\"><h3 class=\"panel-title toggle\" id=\"toggle_f75b2619e6023d85f\"><a aria-expanded=\"false\" aria-controls=\"f75b2619e6023d85f\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion-4886-1\" data-target=\"#f75b2619e6023d85f\" href=\"#f75b2619e6023d85f\"><span class=\"fusion-toggle-icon-wrapper\" aria-hidden=\"true\"><i class=\"fa-fusion-box active-icon awb-icon-minus\" aria-hidden=\"true\"><\/i><i class=\"fa-fusion-box inactive-icon awb-icon-plus\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-toggle-heading\">Figma \u2260 Real CSS Findings<\/span><\/a><\/h3><\/div><div id=\"f75b2619e6023d85f\" class=\"panel-collapse collapse \" aria-labelledby=\"toggle_f75b2619e6023d85f\"><div class=\"panel-body toggle-content fusion-clearfix\">\n<p class=\"isSelectedEnd\">A design can be perfectly valid in Figma and still require a different structure in real CSS.<\/p>\n<p class=\"isSelectedEnd\"><strong>Things I had to learn and correct:<\/strong> Figma <code dir=\"ltr\">auto<\/code> line-height can turn into incorrect framework defaults, <code dir=\"ltr\">fill<\/code> + <code dir=\"ltr\">max-width<\/code> does not behave the same in CSS, stretched components can break centering, visual layer order does not automatically become <code dir=\"ltr\">z-index<\/code>, and gradient strokes need a different CSS implementation such as layered backgrounds.<\/p>\n<p class=\"isSelectedEnd\">Sometimes I even had to restructure the Figma component \u2014 for example by introducing wrappers \u2014 to make the design reflect how the layout actually needs to work in code.<\/p>\n<p><strong>Big learning:<\/strong> pixel-perfect AI handoff also requires some understanding of real frontend constraints. Generated code still needs to be inspected and challenged.<\/p>\n<\/div><\/div><\/div><div class=\"fusion-panel panel-default panel-cb18f89bbcc3f064e fusion-toggle-no-divider fusion-toggle-boxed-mode\" style=\"--awb-content-font-size:20px;--awb-content-line-height:170%;--awb-content-font-family:&quot;Raleway&quot;;--awb-content-font-style:normal;--awb-content-font-weight:400;--awb-title-font-family:&quot;Raleway&quot;;--awb-title-font-weight:600;--awb-title-font-style:normal;--awb-title-font-size:20px;--awb-title-line-height:150%;--awb-title-color:#16293b;--awb-content-color:#16293b;\"><div class=\"panel-heading\"><h3 class=\"panel-title toggle\" id=\"toggle_cb18f89bbcc3f064e\"><a aria-expanded=\"false\" aria-controls=\"cb18f89bbcc3f064e\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion-4886-1\" data-target=\"#cb18f89bbcc3f064e\" href=\"#cb18f89bbcc3f064e\"><span class=\"fusion-toggle-icon-wrapper\" aria-hidden=\"true\"><i class=\"fa-fusion-box active-icon awb-icon-minus\" aria-hidden=\"true\"><\/i><i class=\"fa-fusion-box inactive-icon awb-icon-plus\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-toggle-heading\">DOM visibility of tokens &amp; components<\/span><\/a><\/h3><\/div><div id=\"cb18f89bbcc3f064e\" class=\"panel-collapse collapse \" aria-labelledby=\"toggle_cb18f89bbcc3f064e\"><div class=\"panel-body toggle-content fusion-clearfix\">\n<p class=\"isSelectedEnd\">At first I thought Lovable had failed to create my component system because I could not see the Figma component names in the browser inspector.<\/p>\n<p class=\"isSelectedEnd\">But React components are compiled into normal HTML elements when rendered \u2014 so the original component structure is not automatically visible in the DOM.<\/p>\n<p class=\"isSelectedEnd\">My solution was to make the system explicitly inspectable:<\/p>\n<p class=\"isSelectedEnd\"><code dir=\"ltr\"><strong>data-component=\"ComponentName\"<\/strong><\/code> \u2192 identifies the React\/Figma component<br \/><code dir=\"ltr\"><strong>data-typo-token=\"text-m\"<\/strong><\/code> \u2192 identifies the typography token being used<\/p>\n<p class=\"isSelectedEnd\">This turned the DOM into an additional validation layer: I could inspect a screen and verify which component and token was actually being used instead of trusting the AI&#8217;s description of its implementation.<\/p>\n<p class=\"isSelectedEnd\"><strong>Learning:<\/strong> if AI-generated systems need to be validated by a designer, build observability into the implementation.<\/p>\n<\/div><\/div><\/div><div class=\"fusion-panel panel-default panel-ee9ce30b5b7f8ca27 fusion-toggle-no-divider fusion-toggle-boxed-mode\" style=\"--awb-content-font-size:20px;--awb-content-line-height:170%;--awb-content-font-family:&quot;Raleway&quot;;--awb-content-font-style:normal;--awb-content-font-weight:400;--awb-title-font-family:&quot;Raleway&quot;;--awb-title-font-weight:600;--awb-title-font-style:normal;--awb-title-font-size:20px;--awb-title-line-height:150%;--awb-title-color:#16293b;--awb-content-color:#16293b;\"><div class=\"panel-heading\"><h3 class=\"panel-title toggle\" id=\"toggle_ee9ce30b5b7f8ca27\"><a aria-expanded=\"false\" aria-controls=\"ee9ce30b5b7f8ca27\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion-4886-1\" data-target=\"#ee9ce30b5b7f8ca27\" href=\"#ee9ce30b5b7f8ca27\"><span class=\"fusion-toggle-icon-wrapper\" aria-hidden=\"true\"><i class=\"fa-fusion-box active-icon awb-icon-minus\" aria-hidden=\"true\"><\/i><i class=\"fa-fusion-box inactive-icon awb-icon-plus\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-toggle-heading\">Biggest mistakes in communication with AI<\/span><\/a><\/h3><\/div><div id=\"ee9ce30b5b7f8ca27\" class=\"panel-collapse collapse \" aria-labelledby=\"toggle_ee9ce30b5b7f8ca27\"><div class=\"panel-body toggle-content fusion-clearfix\">\n<p class=\"isSelectedEnd\">During the project, I learned how easily <strong>small gaps in a prompt can turn into unwanted AI decisions<\/strong>.<\/p>\n<ol start=\"1\" data-spread=\"true\">\n<li>\n<p class=\"isSelectedEnd\"><strong>Leaving too much room for interpretation<\/strong><br \/>A general idea is often not enough. If I do not define the behavior clearly, AI fills the gaps itself. I need to think through the task more like a <strong>design or development ticket<\/strong>: What happens when? What if X happens? What if it does not? Which states, conditions and edge cases exist? What should never happen?<\/p>\n<p class=\"isSelectedEnd\">Clear <strong>acceptance criteria<\/strong> are important: How should something work, and how do I know when it has been implemented correctly?<\/p>\n<\/li>\n<li><strong>Changing the focus by accident<\/strong><br \/>The wording of a question can change the priority. When I asked for the <strong>fastest handover<\/strong>, the conversation shifted toward speed \u2014 although my actual priority was pixel accuracy. AI reacts strongly to the current request, so the main goal needs to stay clear.<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Not making important rules strict enough<\/strong><br \/>I originally wrote: <strong>\u201cUse the following breakpoints across the entire app\u201d<\/strong> and listed my S \/ M \/ L values. Lovable still used Tailwind defaults.<\/p>\n<p class=\"isSelectedEnd\">Only after I explicitly wrote <strong>\u201cBREAKPOINT SYSTEM MANDATORY \u2014 use exactly these breakpoints\u201d<\/strong> did it follow my system.<\/p>\n<p class=\"isSelectedEnd\">If something is non-negotiable, I need to say so clearly.<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Not defining the role and source of truth clearly enough<\/strong><br \/>AI needs to know <strong>what its job is and which source it must follow<\/strong>.<\/p>\n<p class=\"isSelectedEnd\">In my case, Builder.io code became the <strong>single source of truth<\/strong> for layout, structure, hierarchy and design tokens.<\/p>\n<p class=\"isSelectedEnd\">\u201cDo not guess\u201d alone was not enough. I had to make the role explicit:<\/p>\n<p class=\"isSelectedEnd\"><strong>You are not designing. You are not interpreting. You are building.<\/strong><\/p>\n<p class=\"isSelectedEnd\">If several inputs exist, I also need to define which one wins. Otherwise, the AI has to decide that itself.<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Not asking for clarification, validation and reporting<\/strong><br \/>If something important is missing, conflicting or unclear, AI should <strong>stop and ask before building instead of making the decision itself<\/strong>.<\/p>\n<p class=\"isSelectedEnd\">It also helped me a lot to make validation part of the prompt. After implementation, I asked the AI to <strong>go through all requirements again, check its own work, correct mistakes and then tell me exactly what it changed.<\/strong><\/p>\n<p class=\"isSelectedEnd\">This created another control layer before I checked the result myself.<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Forgetting important system rules<\/strong><br \/>AI does not necessarily notice that an instruction is missing. When I forgot to define token rules, Lovable simply created its own token system.<\/p>\n<p class=\"isSelectedEnd\">If I do not want an alternative solution, the rule needs to be explicit.<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Giving conflicting instructions \u2014 including old ones<\/strong><br \/>Instructions can work against each other. At one point, I referred to Figma tokens while Builder.io was already defined as the single source of truth.<\/p>\n<p class=\"isSelectedEnd\">I later found another problem: a strict <code dir=\"ltr\"><strong>MUST<\/strong><\/code><strong> rule from an earlier instruction could override what I asked for in a new prompt<\/strong>.<\/p>\n<p class=\"isSelectedEnd\">So I also need to check whether my current prompt, persistent rules and previous instructions still fit together.<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Depending too much on conversation history<\/strong><br \/>AI reacts strongly to the current input. Important goals, constraints and rules should therefore not depend only on something discussed much earlier.<\/p>\n<p class=\"isSelectedEnd\">For critical tasks, I learned to treat each prompt more like a <strong>fresh handover to a new team member<\/strong> \u2014 or explicitly tell the AI to read the relevant instruction files again.<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Being too implicit about states and variants<\/strong><br \/>Defining a component and its variants was not always enough. Even if Lovable already knew a variant, it did not automatically mean that the correct one would be used in the correct state.<\/p>\n<p class=\"isSelectedEnd\">I had to make the connection explicit:<\/p>\n<p class=\"isSelectedEnd\"><strong>State X \u2192 Component Y \u2192 Variant Z<\/strong><\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Trusting the result without checking it myself<\/strong><br \/>AI can sound confident even when the implementation is wrong. It generates a plausible result \u2014 not automatically the correct one.<\/p>\n<p class=\"isSelectedEnd\">Components, variants, tokens, responsive behavior and logic still need to be checked against the original requirements.<\/p>\n<\/li>\n<\/ol>\n<p class=\"isSelectedEnd\"><strong>A useful check before sending a prompt:<\/strong><br \/><strong>Would a new developer understand exactly what I mean \u2014 or could they still ask \u201cWhat happens if\u2026?\u201d<\/strong><\/p>\n<p class=\"isSelectedEnd\">And before accepting the result:<br \/><strong>Did the AI actually do what I asked \u2014 or does it only sound like it did?<\/strong><\/p>\n<p><strong>Clarify \u2192 Build \u2192 Self-check \u2192 Report \u2192 Verify<\/strong><\/p>\n<\/div><\/div><\/div><div class=\"fusion-panel panel-default panel-5be4fceb9111680ff fusion-toggle-no-divider fusion-toggle-boxed-mode\" style=\"--awb-content-font-size:20px;--awb-content-line-height:170%;--awb-content-font-family:&quot;Raleway&quot;;--awb-content-font-style:normal;--awb-content-font-weight:400;--awb-title-font-family:&quot;Raleway&quot;;--awb-title-font-weight:600;--awb-title-font-style:normal;--awb-title-font-size:20px;--awb-title-line-height:150%;--awb-title-color:#16293b;--awb-content-color:#16293b;\"><div class=\"panel-heading\"><h3 class=\"panel-title toggle\" id=\"toggle_5be4fceb9111680ff\"><a aria-expanded=\"false\" aria-controls=\"5be4fceb9111680ff\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion-4886-1\" data-target=\"#5be4fceb9111680ff\" href=\"#5be4fceb9111680ff\"><span class=\"fusion-toggle-icon-wrapper\" aria-hidden=\"true\"><i class=\"fa-fusion-box active-icon awb-icon-minus\" aria-hidden=\"true\"><\/i><i class=\"fa-fusion-box inactive-icon awb-icon-plus\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-toggle-heading\">How I forced Lovable to build my system<\/span><\/a><\/h3><\/div><div id=\"5be4fceb9111680ff\" class=\"panel-collapse collapse \" aria-labelledby=\"toggle_5be4fceb9111680ff\"><div class=\"panel-body toggle-content fusion-clearfix\">\n<p class=\"isSelectedEnd\">The breakthrough came when I stopped treating Lovable like a conversational design partner and gave it a strict implementation system.<\/p>\n<p class=\"isSelectedEnd\">I defined Builder.io as the <strong>single source of truth<\/strong>, switched Lovable into a clear <em>Frontend Developer \/ Builder<\/em> role and specified rules for: <strong>tokens first, exact naming, reusable components, variants via props, nested components, no duplicates, global updates instead of local overrides, mandatory S\/M\/L breakpoints, responsive behavior and validation before implementation.<\/strong><\/p>\n<p class=\"isSelectedEnd\">I then externalized the rules into three persistent files:<\/p>\n<p class=\"isSelectedEnd\"><code dir=\"ltr\"><strong>instructions.md<\/strong><\/code> \u2192 global implementation rules<br \/><code dir=\"ltr\"><strong>component_system.md<\/strong><\/code> \u2192 components, variants and updates<br \/><code dir=\"ltr\"><strong>game_rules.md<\/strong><\/code> \u2192 screen-specific product logic<\/p>\n<p class=\"isSelectedEnd\">Instead of repeating a huge prompt every time, new prompts can now reference the system, add the screen-specific context and update the documentation when something changes.<\/p>\n<p><strong>Big learning:<\/strong> reliable AI implementation needs a persistent system \u2014 not an ever-growing conversation.<\/p>\n<\/div><\/div><\/div><div class=\"fusion-panel panel-default panel-2659ff5dc1d28884b fusion-toggle-no-divider fusion-toggle-boxed-mode\" style=\"--awb-content-font-size:20px;--awb-content-line-height:170%;--awb-content-font-family:&quot;Raleway&quot;;--awb-content-font-style:normal;--awb-content-font-weight:400;--awb-title-font-family:&quot;Raleway&quot;;--awb-title-font-weight:600;--awb-title-font-style:normal;--awb-title-font-size:20px;--awb-title-line-height:150%;--awb-title-color:#16293b;--awb-content-color:#16293b;\"><div class=\"panel-heading\"><h3 class=\"panel-title toggle\" id=\"toggle_2659ff5dc1d28884b\"><a aria-expanded=\"false\" aria-controls=\"2659ff5dc1d28884b\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion-4886-1\" data-target=\"#2659ff5dc1d28884b\" href=\"#2659ff5dc1d28884b\"><span class=\"fusion-toggle-icon-wrapper\" aria-hidden=\"true\"><i class=\"fa-fusion-box active-icon awb-icon-minus\" aria-hidden=\"true\"><\/i><i class=\"fa-fusion-box inactive-icon awb-icon-plus\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-toggle-heading\">What does a good Prompt need?<\/span><\/a><\/h3><\/div><div id=\"2659ff5dc1d28884b\" class=\"panel-collapse collapse \" aria-labelledby=\"toggle_2659ff5dc1d28884b\"><div class=\"panel-body toggle-content fusion-clearfix\">\n<p class=\"isSelectedEnd\">A good prompt does not have to be short. For complex tasks, it should work more like a <strong>well-prepared design or development ticket<\/strong>: clear enough that the person executing it does not have to fill important gaps themselves.<\/p>\n<p class=\"isSelectedEnd\">For more complex tasks, I now check these ten things:<\/p>\n<ol start=\"1\" data-spread=\"true\">\n<li><strong>Role<\/strong><br \/>Who should the AI be for this task?<br \/>A developer, reviewer, designer, researcher or something else?<\/li>\n<li><strong>Context<\/strong><br \/>What does it need to know to understand the task correctly?<br \/>Include the relevant project context, current state and important background.<\/li>\n<li><strong>Task &amp; Goal<\/strong><br \/>What exactly should it do, and what should be true when it is finished?<br \/>Be clear about the desired outcome \u2014 not only the action.<\/li>\n<li><strong>Source of Truth<\/strong><br \/>Which information is authoritative?<br \/>Figma, Builder.io code, an existing component, documentation or a specific file? If sources conflict, define which one wins.<\/li>\n<li><strong>Scope<\/strong><br \/>What exactly may be changed?<br \/>Name the component, variant, state, breakpoint, page or file \u2014 and also what must stay untouched.<\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Conditions, Edge Cases &amp; Acceptance Criteria<\/strong><br \/>Think through the task like a ticket before handing it over:<br \/><strong>When should something happen? What if X happens? What if it does not? What happens next? What should never happen?<\/strong><\/p>\n<p class=\"isSelectedEnd\">Define the important <strong>if \/ then conditions, states, exceptions and edge cases<\/strong> as clearly as possible.<\/p>\n<p class=\"isSelectedEnd\">Also define the acceptance criteria:<br \/><strong>How do I know that the task has been implemented correctly?<\/strong><\/p>\n<\/li>\n<li><strong>Rules &amp; Constraints<\/strong><br \/>What must the AI follow?<br \/>Define mandatory tokens, naming, breakpoints, component rules, technical restrictions and fixed requirements. Also say clearly what it must <strong>not<\/strong> redesign, invent, rename, duplicate or replace.<\/li>\n<li><strong>References &amp; Expected Result<\/strong><br \/>If something should follow an existing pattern, show it.<br \/>Use examples, existing components or references and describe the expected behavior, structure and output.<\/li>\n<li><strong>Clarification<\/strong><br \/>Tell the AI what to do when information is missing, conflicting or unclear:<br \/><strong>Stop and ask before building. Do not make the decision yourself.<\/strong><\/li>\n<li>\n<p class=\"isSelectedEnd\"><strong>Validation &amp; Self-Check<\/strong><br \/>Ask the AI to review its own work before finishing:<\/p>\n<p class=\"isSelectedEnd\"><strong>Go through all requirements again. Check every condition, acceptance criterion, component, variant, token, breakpoint and behavior. Look for missing cases, conflicts or unintended changes. Correct them before reporting the task as complete. Then summarize exactly what you changed.<\/strong><\/p>\n<\/li>\n<\/ol>\n<p class=\"isSelectedEnd\">For complex tasks, prompts can become quite long \u2014 and that is not necessarily a problem. The important part is that the detail comes from <strong>thinking through the task<\/strong>, not from adding unnecessary words.<\/p>\n<p class=\"isSelectedEnd\">Stable project rules can live in persistent instruction or component files. The individual prompt can then focus on the <strong>current task, conditions, edge cases, scope and expected result<\/strong>.<\/p>\n<p class=\"isSelectedEnd\"><strong>Clarify \u2192 Build \u2192 Self-check \u2192 Report \u2192 Verify<\/strong><\/p>\n<p class=\"isSelectedEnd\">And even after the AI has checked itself, <strong>I still verify important results myself.<\/strong><\/p>\n<p><strong>My rule of thumb:<\/strong><br \/>Before sending a prompt, ask: <strong>Could a developer still ask me \u201cWhat happens if\u2026?\u201d<\/strong><br \/>If yes, I probably need to think the task through one step further.<\/p>\n<\/div><\/div><\/div><div class=\"fusion-panel panel-default panel-a353ba2333e4bf4da fusion-toggle-no-divider fusion-toggle-boxed-mode\"><div class=\"panel-heading\"><h3 class=\"panel-title toggle\" id=\"toggle_a353ba2333e4bf4da\"><a aria-expanded=\"false\" aria-controls=\"a353ba2333e4bf4da\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion-4886-1\" data-target=\"#a353ba2333e4bf4da\" href=\"#a353ba2333e4bf4da\"><span class=\"fusion-toggle-icon-wrapper\" aria-hidden=\"true\"><i class=\"fa-fusion-box active-icon awb-icon-minus\" aria-hidden=\"true\"><\/i><i class=\"fa-fusion-box inactive-icon awb-icon-plus\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-toggle-heading\">When to Let AI Explore \u2014 and When to Take Control<\/span><\/a><\/h3><\/div><div id=\"a353ba2333e4bf4da\" class=\"panel-collapse collapse \" aria-labelledby=\"toggle_a353ba2333e4bf4da\"><div class=\"panel-body toggle-content fusion-clearfix\">\n<p class=\"isSelectedEnd\"><strong>AI does not always need the same level of control<\/strong>. It depends on what I want to achieve.<\/p>\n<p class=\"isSelectedEnd\">At the beginning of the project, natural language worked very well. I could describe an idea, test a rough functionality, explore different directions and let Lovable make suggestions. In this phase, some interpretation was actually helpful.<\/p>\n<ul data-spread=\"false\">\n<li><strong>For exploration:<\/strong> Natural language is often enough. AI can help generate ideas, test flows, create first prototypes and show different possible directions.<\/li>\n<li><strong>For early validation:<\/strong> A rough implementation can be more useful than spending too much time defining every detail upfront. It helps reveal missing states, unclear logic or product questions very quickly.<\/li>\n<li><strong>For inspiration:<\/strong> AI can act like a design partner and make suggestions I can review, keep, change or reject.<\/li>\n<\/ul>\n<p class=\"isSelectedEnd\">The situation changed once my own design was defined.<\/p>\n<p class=\"isSelectedEnd\">When the <strong>design system, components, variants, tokens, breakpoints and product logic were already decided<\/strong>, I no longer wanted the AI to interpret. I wanted it to implement.<\/p>\n<p class=\"isSelectedEnd\">At that point, open prompts created unnecessary decisions. A visually reasonable suggestion was no longer automatically a good result if it did not match my system.<\/p>\n<p class=\"isSelectedEnd\">So I started to separate the two modes more clearly:<\/p>\n<p class=\"isSelectedEnd\"><strong>Explore \u2192 give AI room to interpret, suggest and experiment.<\/strong><br \/><strong>Execute \u2192 define strict rules, remove ambiguity and make AI follow the existing system.<\/strong><\/p>\n<p class=\"isSelectedEnd\">This became an important principle throughout the project:<\/p>\n<p class=\"isSelectedEnd\"><strong>The more decisions I have already made as a designer, the fewer decisions I should leave to the AI.<\/strong><\/p>\n<p>The goal was not to remove AI&#8217;s creativity completely. It was to <strong>use its flexibility when exploration was useful \u2014 and control it when precision mattered.<\/strong><\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-7 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-padding-bottom:0px;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:350px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" id=\"game_logic\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-9 fusion-sep-none fusion-title-text fusion-title-size-paragraph h2_title mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:20px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\"><p class=\"fusion-title-heading title-heading-left title-heading-tag\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">\ud83d\udc49\u00a0 Long Version<\/p><\/div><div class=\"fusion-title title fusion-title-10 fusion-sep-none fusion-title-text fusion-title-size-two h2_title\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:20px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\"><span style=\"color: var(--mandy-dark-foreground-primary);\">01 Defining Product Logic with <span style=\"background-color: var(--mandy-highlight-green); color: var(--mandy-light-foreground-on-color-primary);\">Natural Language<\/span><\/span><\/h2><\/div><div class=\"fusion-text fusion-text-5 fusion-text-no-margin p2 \" style=\"--awb-font-size:24px;--awb-line-height:180%;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color: var(--mandy-dark-foreground-secondary);\">Instead of writing a full spec, I explored how far I could get using only natural language \u2014 starting a conversation to define the system step by step.<\/span> <span style=\"color: var(--mandy-highlight-green);\">Here\u2019s a simplified version of that conversation<\/span> \ud83d\udc47<\/p>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-8 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"lovable-chat\" style=\"background-color: #1B1B1B; color: var(--mandy-dark-foreground-primary);\">\n\n  <!-- HEADER -->\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  <!-- CHAT START TIME -->\n  <div class=\"chat-time start-time\">09:41<\/div>\n\n  <!-- CHAT CONTENT -->\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      What do you need from me to build a working game app?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Game idea, structure, and basic flow. Design \/ Screenshots are optional.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Is it easily possible to change a simple web App with shareable link and real-time interaction afterwards to an true native app?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Yes \u2014 You have two options: 1. Installable Web App (PWA) \u2013 ... 2. True Native App (Capacitor) \u2014 ... Both work with your existing React codebase \u2014 no rewrite needed. For a real-time chat, we would need Lovable Cloud (database + real-time features)..\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Does real-time, hosting or playing this app cost money?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Small apps usually stay within the free tier.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Okay \u2014 let\u2019s build a 2-player PWA version with a Lovable Cloud Backend.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Game rules: 2 players join via a link, one starts the game and invites the other. Then both are in a live chat.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      One player gets a word and has to explain it using only one-syllable words.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Everything happens live in the chat, you can type or even speak, and the other person sees single words as bubbles in chat instantly.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      If Player 1 uses a word with more than one syllable, the system should highlight that word. The other player can then award a penalty point by swinging the club, and Player 1 loses a point. A new word appears, and the round continues as long as the timer is still running.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      If the word is guessed correctly, the guesser gets one point and the explainer gets three points. Here, too, a new word appears for the explainer as long as time hasn\u2019t run out. The goal is to score as many points as possible over the course of four rounds. Both players take turns explaining and guessing.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      For that, I\u00b4ll need your ElevenLabs API key. Do you already have one, or should I show you how to get one?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      High accuracy when speaking into the mic and ensuring that the right word is actually recognized is absolutely crucial in this game. But do we really need ElevenLabs for a simple speech-to-text feature? Is it free?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Yes, for higher accuracy with ElevenLabs Scribe, you need an API key.\n\n      The difference:\n\n      Web Speech API (free): ..\n      ElevenLabs Scribe (API key required): ...\n      For a word game where every word must be recognized correctly, the higher accuracy makes sense.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      OK, here\u00b4s the API key for speech-to-text and also for sound effects for later.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Got it. Building the full game now.\n    <\/div>\n  <\/div>\n\n  <!-- TIME BREAK -->\n  <div class=\"chat-time\">11:44<\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      <strong>Game ready:<\/strong> Real-time, scoring, timer and word validation included.\n    <\/div>\n  <\/div>\n\n<\/div><div class=\"fusion-text fusion-text-6 fusion-text-no-margin p2 \" style=\"--awb-font-size:24px;--awb-line-height:180%;--awb-margin-top:80px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color: var(--mandy-dark-foreground-secondary);\">\ud83d\udc49 This was enough to define a working game structure \u2014 without writing a single formal specification. <span style=\"background-color: var(--mandy-highlight-green); color: var(--mandy-light-foreground-on-color-primary);\">After just ~2 hours<\/span>, I had a first working version of the game \u2013 <span style=\"background-color: var(--mandy-highlight-green); color: var(--mandy-light-foreground-on-color-primary);\">a solid base to iterate on:<\/span><\/span><\/p>\n<\/div><\/div><\/div><\/div><video\n  class=\"testvideo_01\"\n  controls\n  playsinline\n  preload=\"none\"\n  poster=\"\/wp-content\/uploads\/2026\/03\/thumbnail_test01.png\"\n  aria-label=\"First functional prototype of the Syllable game built with Lovable after about two hours.\"\n  style=\"width:100%; height:auto; display:block; background:var(--mandy-dark-surface-page); border-radius:20px; overflow:hidden;\"\n>\n  <source\n    src=\"\/wp-content\/uploads\/2026\/03\/einsilbi_test.mp4\"\n    type=\"video\/mp4\"\n  >\n<\/video><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:120px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-1 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1550\" height=\"618\" title=\"sprachprobleme\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/sprachprobleme.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/sprachprobleme.png\" alt class=\"lazyload img-responsive wp-image-4910\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271550%27%20height%3D%27618%27%20viewBox%3D%270%200%201550%20618%27%3E%3Crect%20width%3D%271550%27%20height%3D%27618%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/sprachprobleme-200x80.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/sprachprobleme-400x159.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/sprachprobleme-600x239.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/sprachprobleme-800x319.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/sprachprobleme-1200x478.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/sprachprobleme.png 1550w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1550px\" \/><\/span><\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 01 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 01\n        <\/span>\n\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 Lovable is powerful for early-stage ideation & rapid prototyping\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          It enables quickly validate flows, uncover needed states, and turn abstract ideas into tangible experiences.\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-text fusion-text-7 fusion-text-no-margin p2 mandy-dark-foreground-secondary\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-margin-top:120px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>During testing, it became clear that speech recognition wasn\u2019t reliable enough \u2014 words were missed, misinterpreted, or even triggered without input \ud83d\udea7<\/p>\n<p>I went back into the conversation to refine the system \u2014 adding clearer rules and defining acceptance criteria trying to make the behavior more predictable and robust \ud83d\udc47<\/p>\n<\/div><div class=\"lovable-chat\" style=\"background-color:#1B1B1B;\">\n\n  <!-- HEADER -->\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  <!-- CHAT START TIME -->\n  <div class=\"chat-time start-time\">09:41<\/div>\n\n  <!-- NEW ITERATION CHAT -->\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Voice input still feels unstable. Recording stops immediately.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Improved voice input stability by preventing unnecessary re-renders. Recording now stays active.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Great, this works better. Now I need a few specific improvements:\n      \u2013 Remove the delay after speaking\n      \u2013 Detect pauses properly so words don\u2019t merge\n      \u2013 Set the language to German\n      \u2013 Improve overall recognition \u2014 input sometimes stops\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Enhanced voice input latency and recognition accuracy. Reduced false outputs and improved pause detection.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Language is now set to German. VAD activated. Word separation improves as the model follows German linguistic rules. Pauses are automatically detected...\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      The system also needs to detect correct guesses \u2014 even with typos or punctuation.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Auto-check guesses from partial transcripts. Improved word matching logic. Correct answers are now detected even with...\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Player 2 should be able to speak naturally \u2014 full sentences, emojis, not just single words. No Bubbles here for every word.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Updated input handling. Player B can now use full sentences, emojis, and voice input...\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Also, rule violations need to be detected \u2014 like using parts of the actual word.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Added rule validation. Word fragments of the term being defined are detected and result in a -1 penalty.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Right now it feels like something is wrong when I activate the microphone \u2014 it suddenly turns red. <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">Please make the button green in active state. It should also show some kind of audio animation or visualization when speaking.<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Updated microphone feedback. The button now turns green in active mode to indicate recording instead of an error state. Added audio visualization while speaking.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Oh what\u00b4s that? It\u2019s just constantly flashing now. It feels really distracting. Please stop it.\n    <\/div>\n  <\/div>\n\n<\/div><div class=\"fusion-text fusion-text-8 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-margin-top:120px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\" id=\"cl_break\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">\ud83d\udc49 <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">Up until this point, using natural language had worked surprisingly well.<\/span> Then I hit this:<\/span><\/p>\n<\/div><div class=\"fusion-text fusion-text-9 fusion-text-no-margin p2\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:100px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">I asked for an <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">\u201caudio animation and visualization when speaking\u201d <\/span>\u2014 just to quickly make the game feel alive. <\/p>\n<p>But what does that even mean? A waveform? Pulsing circle? Subtle glow? Full visualization? And what happens to the rest of the UI? Placeholder? Live transcription? Recording state? <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\"><\/p>\n<p><\/span> <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">I didn\u2019t decide. So the AI did.<\/span> (see green blinking button above)<\/span><\/p>\n<\/div><div class=\"fusion-text fusion-text-10 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:60px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">A developer would\u00b4ve said \u201cThis needs a proper ticket.\u201d <span style=\"background-color:var(--mandy-blue-500); color:var(--mandy-light-foreground-on-color-primary);\">Lovable just shipped an interpretation and filled the gap with SOMETHING.<\/span><\/span><\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-2 hover-type-none\"><img decoding=\"async\" width=\"1314\" height=\"164\" title=\"roter_zuvor\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271314%27%20height%3D%27164%27%20viewBox%3D%270%200%201314%20164%27%3E%3Crect%20width%3D%271314%27%20height%3D%27164%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/roter_zuvor.gif\" alt class=\"lazyload img-responsive wp-image-4929\"\/><\/span><\/div><div class=\"fusion-image-element\" style=\"--awb-margin-bottom:120px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-3 hover-type-none\"><img decoding=\"async\" width=\"1314\" height=\"164\" title=\"gru\u0308ner_blinkbutton\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271314%27%20height%3D%27164%27%20viewBox%3D%270%200%201314%20164%27%3E%3Crect%20width%3D%271314%27%20height%3D%27164%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/gruener_blinkbutton.gif\" alt class=\"lazyload img-responsive wp-image-4930\"\/><\/span><\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 02 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 02\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 Natural language works \u2014 until ambiguity starts.\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          The more open a task is (especially in UI Design), the more precise your input needs to be \u2014 otherwise AI fills the gaps.\n        <\/li>\n        <li>\n          Treat prompts like a design brief: define states, behavior, and UI impact. Don\u2019t leave decisions open.\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-text fusion-text-11 fusion-text-no-margin p2\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:120px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">Before moving into visual design, <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">I focused on one critical issue: voice input and output.<\/span> In this game, every word matters \u2014 so the system needed to be reliable enough for real gameplay. I tested how far I could push it \ud83d\udc47<\/span><\/p>\n<\/div><div class=\"lovable-chat\" style=\"background-color:#1B1B1B;\">\n\n  <!-- HEADER -->\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  <!-- CHAT START TIME -->\n  <div class=\"chat-time start-time\">09:41<\/div>\n\n  <!-- NEW ITERATION CHAT -->\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      There are still major issues with voice input\/output. The system generates phantom outputs:\n      \u2013 silence gets interpreted as actual words (like \u201cthank you\u201d or \u201cgoodbye\u201d)\n      \u2013 strange symbols or broken characters\n      \u2013 interpreted sounds like \u201c*kissing noises*\u201d, \u201che exhales deeply\u201d, or \u201cwhistling\u201d\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      We could reduce some of this by switching to push-to-talk instead of always-on listening\u2026 or by buffering words before confirming them\u2026 but I still need much higher accuracy.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      These are known limitations in speech recognition systems. Background noise, silence, or unclear input can lead to hallucinated or unintended transcripts.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      That\u2019s a problem. In this game, every word matters. I need a 100% reliable system \u2014 otherwise it creates frustration and breaks the gameplay. Can this be fully prevented?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Advanced systems like ElevenLabs Scribe v2 improve accuracy significantly (~95\u201398%) and include features like audio event detection and voice activity detection\u2026\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      We can further improve reliability with techniques like:\n      \u2013 Voice Activity Detection (ignore silence)\n      \u2013 Confidence filtering\n      \u2013 Minimum input thresholds\n      \u2013 Confirmation logic before accepting input\n      \u2013 Noise reduction\u2026\n      Push-to-talk can eliminate most phantom inputs\u2026 but 100% accuracy is not possible with any STT system.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Got it. So even with better systems, 100% accuracy isn\u2019t guaranteed. For now, I\u2019ll remove voice input for this game.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      But let\u2019s try a different approach \u2014 can we add a text-to-speech voice instead? Maybe something playful.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Sure \u2014 a voice output can be added. A playful voice is now configured.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      I don\u2019t hear anything.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Your ElevenLabs free-tier account has been restricted due to unusual activity. This can happen when using APIs through shared environments like cloud servers or proxies\u2026\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Alright, got it. Then let\u2019s remove voice features completely \u2014 no speech input, no voice output. Just a clean text-based input for both players.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Voice features removed. The game now relies entirely on text input for a more stable and predictable experience.\n    <\/div>\n  <\/div>\n\n<\/div><div class=\"fusion-text fusion-text-12 fusion-text-no-margin p2\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:120px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">At this point, I stopped chasing the perfect solution. The voice to text feature introduced too many external dependencies \u2014 and <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">free-tier limitations (e.g. ElevenLabs)<\/span> made it unreliable for my gameplay.<\/span><\/p>\n<\/div><div class=\"fusion-text fusion-text-13 fusion-text-no-margin p2\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">\u2702\ufe0f So I simplified the product: removed all voice features and <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">focused on a stable MVP that actually works.<\/span><\/span><\/p>\n<\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 03 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 03\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 Know Your API Limits Before Building\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          Free tiers often come with limitations that can break your product. Evaluate third-party constraints early \u2014 including quality, rate limits, and feature restrictions \u2014 before integrating them.\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-9 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:284px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.824%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.824%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" id=\"visual_layer\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-11 fusion-sep-none fusion-title-text fusion-title-size-two h2_title mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:60px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:32px;\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">\ud83d\udc49 Entering the Visual Layer<\/h2><\/div><div class=\"fusion-text fusion-text-14 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">The game logic was working well enough for now, so I shifted focus to visual exploration. <span style=\"background-color:var(--mandy-blue-500); color:var(--mandy-light-foreground-on-color-primary);\"><br \/>\nI wanted to understand how far a single \u2014 but precise \u2014 text prompt can control visual output.<\/span><\/span><\/p>\n<\/div><div class=\"fusion-text fusion-text-15 fusion-text-no-margin p2\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">This time, I refined the prompt first \u2014 <span style=\"background-color:var(--mandy-blue-500); color:var(--mandy-light-foreground-on-color-primary);\">using ChatGPT<\/span>  to clarify effect terminology and remove ambiguity before passing it on \ud83c\udfaf<\/span><\/p>\n<\/div><div\n  class=\"lovable-chat\"\n  aria-label=\"Lovable conversation about creating a mobile app background\"\n>\n\n  <!-- HEADER -->\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\"\n        src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/03\/lovable_logo.png\"\n        alt=\"Lovable\"\n      >\n    <\/div>\n  <\/div>\n\n  <!-- CHAT START TIME -->\n  <div class=\"chat-time start-time\">13:37<\/div>\n\n  <!-- NEW ITERATION CHAT -->\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Create a modern mobile app background with an interactive aurora gradient. Style: warm earthy stone colors inspired by terracotta, clay and sand.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Colors: #3B1F14, #6B3A22, #C96A2B, #E88A3D, #F2C078\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Design: soft mesh gradient with large blurred color blobs.\n      <br><br>\n      Interaction: when the user moves the mouse, a subtle spotlight \/ gradient glow follows the cursor and shifts the colors slightly.\n      <br><br>\n      The movement should feel smooth, organic and slow, like light moving over stone.\n      <br><br>\n      Add very subtle grain texture to make it feel natural and tactile.\n      <br><br>\n      Overall style: modern 2026 UI design, warm, playful, slightly primitive stone aesthetic.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Add subtle noise texture (3\u20135%).\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Enhance aurora background.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Noise texture set to ~4% opacity with a \u201cmix-blend-overlay\u201d blend mode \u2013 subtle and natural.\n    <\/div>\n  <\/div>\n\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-4 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1796\" height=\"1442\" title=\"Bildschirmfoto 2026-03-29 um 22.12.19\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-29-um-22.12.19.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-29-um-22.12.19.png\" alt class=\"lazyload img-responsive wp-image-4944\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271796%27%20height%3D%271442%27%20viewBox%3D%270%200%201796%201442%27%3E%3Crect%20width%3D%271796%27%20height%3D%271442%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-29-um-22.12.19-200x161.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-29-um-22.12.19-400x321.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-29-um-22.12.19-600x482.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-29-um-22.12.19-800x642.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-29-um-22.12.19-1200x963.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-29-um-22.12.19.png 1796w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-16 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:120px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">\ud83d\udc40 I took a closer look at the result and checked whether my defined <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">color values were actually used<\/span> \u2014 and they were. \ud83d\udc49 But not in a literal way. The AI adapted, softened, and blended them to create a more balanced and visually pleasing composition.<\/span><\/p>\n<\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 04 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 04\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 AI listens, executes, and tries to make things look right.\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          In a way, AI behaves like a good design partner \u2014 And that\u2019s powerful for exploration!\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-text fusion-text-17 fusion-text-no-margin p2\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:200px;--awb-margin-bottom:80px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">But what happens when I don\u2019t want interpretation \u2014 when I already have a clear design in mind? <span style=\"background-color:var(--mandy-blue-500); color:var(--mandy-light-foreground-on-color-primary);\"> Let\u2019s take it one step further \ud83d\udc47 <\/span><\/span><\/p>\n<\/div><div class=\"lovable-chat\">\n\n  <!-- HEADER -->\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  <!-- CHAT START TIME -->\n  <div class=\"chat-time start-time\">13:37<\/div>\n\n  <!-- CHAT CONTENT -->\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      <span style=\"background-color: var(--mandy-highlight-green); color: var(--mandy-light-foreground-primary);\">\n        The screenshots of the following Figma screens are the source of truth. Recreate the layout as closely as possible.\n     <\/span>\n      Do not introduce new styles, spacing, or components unless explicitly specified.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Please keep the aurora background effect.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      On screen one, player 1 enters a name. As you see, the active state has a yellow border. Button is disabled until a name has been entered.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      At the top, there are two avatar bubbles where player 1 selects their gender. The selected one is also highlighted with a yellow border.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      On screen two, player 1 has already entered their name. The primary button is now active, the input is filled and inactive.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      On the third screen, there is a rotating purple-yellow gradient outline while waiting for player 2.\n      <br>\n      The link needs to be copied and shared.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Redesign Home & Game screens\n      <br>\n      - Generate caveman character images\n      <br>\n      - Redesign Home screen per Figma\n      <br>\n      - Redesign waiting screen per Figma\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Rebuilt the screens based on your references.\n      <br>\n      - Home: Caveman avatars with a \u201cYou?\u201d \/ \u201cYou\u2019re it?\u201d toggle (orange ring = active), \u2018EINSILBI\u2019 title in Bungee Shade font, three rule cards, a warm name input field with an orange border + a purple \u201cStart New Game\u201d button\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      - Loading screen: Both characters side by side, player name in large block letters, rotating purple-orange border around the second avatar (indicating loading), large \u201cCopy and share link\u201d button\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Aurora background remains on both screens\n    <\/div>\n  <\/div>\n\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-5 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1994\" height=\"2560\" title=\"figma_screens02\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/figma_screens02-scaled.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/figma_screens02-scaled.png\" alt class=\"lazyload img-responsive wp-image-4951\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271994%27%20height%3D%272560%27%20viewBox%3D%270%200%201994%202560%27%3E%3Crect%20width%3D%271994%27%20height%3D%272560%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/figma_screens02-200x257.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/figma_screens02-400x514.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/figma_screens02-600x770.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/figma_screens02-800x1027.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/figma_screens02-1200x1541.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/figma_screens02-scaled.png 1994w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-18 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:80px;--awb-margin-bottom:80px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">Ok, not bad. Some logic was understood \u2014 like some basic structure and interaction states \u2014 <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">but even with visual references, I\u2019m forcing the AI to interpret rather than replicate.<\/span><\/span><\/p>\n<\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 05 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 05\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 The system cannot extract exact values from screenshots\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          Fonts, colors, spacing, and dimensions are interpreted \u2014 not read\n        <\/li>\n        <li>\n          Visual styles are translated into general categories (e.g. \u201cplayful\u201d, \u201cclean\u201d, \u201cmodern\u201d)\n        <\/li>\n        <li>\n          Custom design gets approximated into generic solutions\n        <\/li>\n        <li>\n          Works for simple layouts \u2014 breaks with distinctive design\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 06 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 06\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 When information is missing, AI fills in the gaps with probabilities\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          Missing details are silently filled in and will be recreated somehow\n        <\/li>\n        <li>\n          Precision requires explicitly defining what must NOT be guessed\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-10 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:328px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" id=\"pixelperfect\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-12 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features mandy-dark-foreground-primary\" style=\"--awb-text-color:#90dfb6;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">But what does a pixel-perfect and fast AI workflow actually look like?<\/h3><\/div><div class=\"fusion-text fusion-text-19 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:90px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">I wanted to understand what it actually takes to get a pixel-perfect result. So instead of guessing, <span style=\"background-color:var(--mandy-blue-500); color:var(--mandy-light-foreground-on-color-primary);\">I asked the AI directly what it needs to replicate designs accurately.<\/span> Below is a shortened version of that conversation\ud83d\udc47<\/span><\/p>\n<\/div><div class=\"lovable-chat\" style=\"background-color:#1B1B1B;\">\n\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  <!-- USER QUESTION -->\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      What\u2019s the <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">best way for me to hand over you my Figma designs if I want them to be implemented exactly as they are?<\/span> What\u2019s the perfect prompt for you to <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">ensure that the components are actually set up as a component system,<\/span> and that all variants of each component\u2014and really everything\u2014are implemented exactly as they are? What\u2019s the best way to do this?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Step 1 \u2014 Design Tokens:<br>\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">Provide colors, typography, spacing, and radius as screenshots<\/span><span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"> or values.<\/span>\n      Then ask: \u201cPlease define all design tokens in index.css and tailwind.config.ts.\u201d\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Step 2 \u2014 Components:<br>\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">Share one component at a time<\/span> \u2014 including all variants and states.\n      Ask: \u201cCreate this component with exactly these variants. <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">Follow the design pixel-perfect.\u201d<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Step 3 \u2014 Screens:<br>\n      Once components are ready, <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">provide full screens.<\/span>\n      Ask: \u201c<span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">Rebuild this screen pixel-perfect<\/span> using only the defined components.\u201d\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Important details to get accurate results:<br><br>\n\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">- One message = one component<\/span> <br> (don\u2019t send everything at once)<br>\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">- Always provide exact values<\/span> <br> (e.g. padding, radius, spacing, colors)<br>\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">- show all component states<\/span> <br> (hover, active, disabled)<br>\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">-Show responsive breakpoints<\/span> <br> (mobile, tablet, desktop)\n    <\/div>\n  <\/div>\n\n  <!-- USER QUESTION -->\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      I don\u2019t want to take the time to hand over every component and all the values individually. Do you know of any other ways to handover you all the values <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">as quickly as possible?<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Fastest option:<br>\n      <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">Upload a screenshot and say<br> \u201cRebuild this pixel-perfect.\u201d<br><br>\n      I can extract colors, spacing and components directly.<\/span> \ud83d\udc49 \ud83e\udda8\ud83d\udca8\ud83d\udca8\ud83d\udca8\ud83d\udca8 he can\u00b4t!\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Use Figma Dev Mode:<br>\n      Copy CSS values and provide them as text instead of measuring manually.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">Upload multiple screens at once:<\/span> \ud83d\udc7b\ud83d\ude48 <br>\n      I can derive a full design system and build all pages from them.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">Combine Figma link + screenshots:<br>\n      Provide your full design system and I\u2019ll generate components and screens.<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Shortcut:<br>\n      \u201cHere is my design. Just build it.\u201d<br>\n      <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">I\u2019ll ask if something is missing.<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- USER QUESTION -->\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Are there any Figma plugins that work well for handing over designs?\n    <\/div>\n  <\/div>\n\n  <!-- AI RESPONSE -->\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      <strong>Recommended Figma Plugins:<\/strong><br><br>\n\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><strong>1. Locofy.ai<\/strong><br><\/span>\n      \u2022 Export Figma \u2192 React + Tailwind<br>\n      \u2022 Supports components & variants<br><br>\n\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><strong>2. Builder.io (Figma to Code)<\/strong><br><\/span>\n      \u2022 Generates React\/Tailwind code<br>\n      \u2022 Free version available<br><br>\n\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><strong>3. Design Tokens Plugin<\/strong><br><\/span>\n      \u2022 Export colors, typography, spacing as JSON<br>\n      \u2022 Useful for structured systems<br><br>\n\n      <strong>4. Figma Dev Mode (Inspect)<\/strong><br>\n      \u2022 Copy exact CSS values<br>\n      \u2022 Most reliable for precision\n    <\/div>\n  <\/div>\n\n  <!-- USER -->\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      What\u2019s the difference between Builder.io and Locofy.ai?\n    <\/div>\n  <\/div>\n\n  <!-- AI -->\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Locofy \u2192 better for generating ready-to-use React code with variants.<br>\n      Builder.io \u2192 better if you need a visual editor \/ CMS.<br><br>\n\n      <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">Both generate code that isn\u2019t ideal for structured systems (no tokens, no reusable components).<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      If I give you Builder.io code, can you turn it into a proper component system \u2014\n      with reusable components, variants, and the ability to update changes globally?\n    <\/div>\n  <\/div>\n\n  <!-- AI -->\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">Yes \u2014 but Builder.io code needs transformation.<br><br><\/span>\n\n      It uses inline styles, separate components, and no real variant system.<br><br>\n\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">I extract:<br><\/span>\n      \u2022 Colors \u2192 design tokens<br>\n      \u2022 Spacing \u2192 Tailwind tokens<br>\n      \u2022 Components \u2192 structured system<br>\n      \u2022 Variants \u2192 unified props<br><br>\n\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">Then rebuild everything as reusable components.<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- AI -->\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Result:<br><br>\n\n      <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">One clean system where you can say:<br>\n      \u201cChange Button \u2192 secondary \u2192 gap 12px\u201d<br><br>\n\n      \u2192 updates everywhere.<\/span>\n    <\/div>\n  <\/div>\n\n<\/div><div class=\"fusion-text fusion-text-20 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:120px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\"><span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">My follow-up question wasn\u2019t clear enough<\/span> and shifted the focus toward speed, and that\u2019s where things started to break.<\/span><\/p>\n<\/div><div class=\"fusion-text fusion-text-21 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:120px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">Suddenly, the conversation shifted away from pixel-perfect results toward \u201cfast\u201d solutions. The AI suggested it could reconstruct a full design system from screenshots alone \u2014 something it previously required explicit values for. <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">At this point, promise and reality started to diverge.<\/span><\/span><\/p>\n<\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 07 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 07\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 Build systems step by step \u2014 and provide the token values in advance\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          AI works better when systems are built step by step, not all at once\n        <\/li>\n        <li>\n          Define and provide design tokens upfront (colors, typography, spacing, radius)\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 08 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 08\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 AI loses context quickly \u2014 clarity requires repetition\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          It reacts to the latest input, not your overall goal\n        <\/li>\n        <li>\n          Repeat constraints and system rules\n        <\/li>\n        <li>\n          Treat each prompt as standalone\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 09 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 09\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 AI answers are only as precise as the question behind them\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          What feels like \u201cwrong\u201d output is often a misalignment in communication\n        <\/li>\n        <li>\n          The goal can quickly shift \u2014 if you ask for speed, it will optimize for speed and forget accuracy.\n        <\/li>\n        <li>\n          It generates what is most likely, not what is correct\n        <\/li>\n        <li>\n          It can sound confident even when wrong\n        <\/li>\n        <li>\n          If you need factual accuracy, you have to explicitly demand it\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-text fusion-text-22 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:250px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\" id=\"figma_structure\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">So I went back to Figma and <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\">designed the app with implementation in mind:<\/span><\/span><\/p>\n<\/div><div class=\"fusion-text fusion-text-23 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-margin-top:60px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><ul style=\"color:var(--mandy-dark-foreground-secondary);\">\n<li><span style=\"color:var(--mandy-highlight-green);\">Clearly defined design tokens<\/span> (colors &amp; typography only \u2014 scoped for speed)<\/li>\n<li><span style=\"color:var(--mandy-highlight-green);\">Structured, reusable components<\/span> (variants included)<\/li>\n<li>Screens built with Auto Layout \u2014 <span style=\"color:var(--mandy-highlight-green);\">responsive by default<\/span><\/li>\n<li>Mobile-first approach with <span style=\"color:var(--mandy-highlight-green);\">explicit breakpoints<\/span><\/li>\n<li><span style=\"color:var(--mandy-highlight-green);\">Precise layout behavior<\/span> \u2014 no room for interpretation<\/li>\n<\/ul>\n<\/div><div class=\"fusion-text fusion-text-24 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">Then I used the <span style=\"color:var(--mandy-highlight-green);\"><em>builder.io<\/em> output as a blueprint<\/span> \u2014 just as recommended \u2014 to test what actually holds up in practice \ud83d\udc47<\/span><\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-6 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"2284\" height=\"1528\" title=\"structured component library\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-11.12.22-1.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-11.12.22-1.png\" alt class=\"lazyload img-responsive wp-image-5138\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272284%27%20height%3D%271528%27%20viewBox%3D%270%200%202284%201528%27%3E%3Crect%20width%3D%272284%27%20height%3D%271528%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-11.12.22-1-200x134.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-11.12.22-1-400x268.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-11.12.22-1-600x401.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-11.12.22-1-800x535.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-11.12.22-1-1200x803.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-11.12.22-1.png 2284w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-25 fusion-text-no-margin p3 mandy-dark-foreground-secondary\" style=\"--awb-font-size:20px;--awb-line-height:170%;--awb-margin-top:20px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>1. Structured component library: All components are clearly grouped and consistently organized<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-7 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1382\" height=\"480\" title=\"user_badge_component_variants\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.05.29.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.05.29.png\" alt class=\"lazyload img-responsive wp-image-4977\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271382%27%20height%3D%27480%27%20viewBox%3D%270%200%201382%20480%27%3E%3Crect%20width%3D%271382%27%20height%3D%27480%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.05.29-200x69.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.05.29-400x139.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.05.29-600x208.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.05.29-800x278.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.05.29-1200x417.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.05.29.png 1382w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-26 fusion-text-no-margin p3 mandy-dark-foreground-secondary\" style=\"--awb-font-size:20px;--awb-line-height:170%;--awb-margin-top:20px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>2. Consistent naming &amp; variant logic: Components follow a clear naming system and predictable variant structure<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-8 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1270\" height=\"484\" title=\"color and typo tokens\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.09.28.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.09.28.png\" alt class=\"lazyload img-responsive wp-image-4978\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271270%27%20height%3D%27484%27%20viewBox%3D%270%200%201270%20484%27%3E%3Crect%20width%3D%271270%27%20height%3D%27484%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.09.28-200x76.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.09.28-400x152.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.09.28-600x229.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.09.28-800x305.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.09.28-1200x457.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.09.28.png 1270w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-27 fusion-text-no-margin p3 mandy-dark-foreground-secondary\" style=\"--awb-font-size:20px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:20px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>3. Token-based design system: All styles are based on reusable design tokens (colors, spacing)<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-9 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"2560\" height=\"446\" title=\"responsivness und auto layout\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.17.05-scaled.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.17.05-scaled.png\" alt class=\"lazyload img-responsive wp-image-4980\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272560%27%20height%3D%27446%27%20viewBox%3D%270%200%202560%20446%27%3E%3Crect%20width%3D%272560%27%20height%3D%27446%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.17.05-200x35.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.17.05-400x70.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.17.05-600x104.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.17.05-800x139.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.17.05-1200x209.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.17.05-scaled.png 2560w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-28 fusion-text-no-margin p3 mandy-dark-foreground-secondary\" style=\"--awb-font-size:20px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:20px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>4. Auto Layout for real responsiveness: Every component is built with Auto Layout and adapts across sizes<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-10 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"2286\" height=\"1416\" title=\"dev mode figma\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.23.53.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.23.53.png\" alt class=\"lazyload img-responsive wp-image-4982\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272286%27%20height%3D%271416%27%20viewBox%3D%270%200%202286%201416%27%3E%3Crect%20width%3D%272286%27%20height%3D%271416%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.23.53-200x124.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.23.53-400x248.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.23.53-600x372.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.23.53-800x496.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.23.53-1200x743.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-30-um-21.23.53.png 2286w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-29 fusion-text-no-margin p3 mandy-dark-foreground-secondary\" style=\"--awb-font-size:20px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:20px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>5. Mobile-first &amp; responsive Screen-Design: with clearly defined breakpoints and behavior<\/p>\n<\/div><\/div><\/div><\/div><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-11 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:132px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" id=\"builder_io\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-30 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:60px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">My goal: \ud83c\udfaf I was still looking for the fastest possible way to hand over my designs. \ud83d\ude80 Instead of explaining everything in detail, <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><br \/>\nI wanted to see what could be automatically extracted from the Builder.io code.<\/span><\/span><\/p>\n<\/div><div class=\"fusion-text fusion-text-31 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\"><strong>I gave him:<\/strong><\/span><\/p>\n<ul style=\"color:var(--mandy-dark-foreground-secondary);\">\n<li><span style=\"color:var(--mandy-highlight-green);\">1 Builder.io link per breakpoint and state<\/span><\/li>\n<li><span style=\"color:var(--mandy-highlight-green);\">Visual references<\/span> of different breakpoints and states<\/li>\n<li>Avatar-images as <span style=\"color:var(--mandy-highlight-green);\">2xPNG<\/span><\/li>\n<li><span style=\"color:var(--mandy-highlight-green);\">Precise instructions:<\/span> <strong><em>A:<\/em><\/strong> to create a component and token system exactly like mine and <em><strong>B:<\/strong><\/em> to use Figma as a single source of truth<\/li>\n<li><span style=\"color:var(--mandy-highlight-green);\">Additional logic<\/span> information for each screen<\/li>\n<\/ul>\n<\/div><div class=\"fusion-text fusion-text-32 fusion-text-no-margin p2 mandy-dark-foreground-secondary\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>Lets see if my first structured, professional prompt for Screen 1 works good enough. \ud83d\udc47<\/p>\n<\/div><div class=\"lovable-chat\" style=\"background-color:#1B1B1B;\">\n\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row full\">\n    <div class=\"bubble large user\">\n\n      <strong>Refactor Approach<\/strong><br>\n      Let us refactor the app screen by screen and use these instructions as the foundation to build a proper component system.<br><br>\n\n      We start with <strong>Screen 01<\/strong>: the first player opens the app and starts a new game.\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Responsive Context<\/strong><br>\n      The app must be built mobile-first and work especially well on mobile devices and tablets.\nWe use the following breakpoints across the entire app:.<br><br>\n      \u2022 S: max 479px (small phones)<br>\n      \u2022 M: 480px \u2013 767px (large phones \/ small tablets)<br>\n      \u2022 L: 768px+ (tablets and above)\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Acceptance Criteria<\/strong><br>\n      \u2022 Avoid horizontal scrolling on mobile<br>\n      \u2022 When the keyboard opens, the input must stay visible and move up\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Approach<\/strong><br>\n      Introduce strict layout and component rules based on the provided Builder.io designs and code.<br><br>\n\n      These should be used as the source of truth for:<br>\n      \u2022 Layout behavior<br>\n      \u2022 Spacing<br>\n      \u2022 Component structure<br>\n      \u2022 Responsive behavior\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Important<\/strong><br>\n      \u2022 Do NOT rebuild the whole app<br>\n      \u2022 Refactor the existing screen<br>\n      \u2022 Replace current elements with reusable components\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Goal<\/strong><br>\n      Build a system where:<br>\n      \u2022 Components are clearly named<br>\n      \u2022 Variants exist (default, active, filled, etc.)<br>\n      \u2022 Components can be reused and modified later<br><br>\n\n      Example:<br>\n      \u201cChange component X\u201d \u2192 should work globally\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Component Validation (Critical)<\/strong><br>\n      The design was fully built in Figma with structured components and variants.\nThe Builder.io export should reflect this structure.<br><br>\n\n      Your task is to verify:<br>\n      \u2022 Can you detect component names?<br>\n      \u2022 Can you detect variants (state, size, etc.)?<br>\n      \u2022 Can you detect nested components?<br>\n      \u2022 Can you detect design tokens?<br><br>\n\n      If NOT:<br>\n      \u2022 explicitly tell me what is missing<br>\n      \u2022 tell me what you cannot read from the code<br>\n      \u2022 tell me what additional input you need\n<br>\n<br>\nEXAMPLE (IMPORTANT):<br> We have a component called:\nName_input<br>\nIt includes:<br>\n      \u2022 multiple states (default, active, filled)<br>\n      \u2022 multiple sizes (L, S&M)<br><br>\n      This component is used multiple times across this screen.<br>\nYour task:<br>\n\u2022 confirm whether you can detect this component<br>\n      \u2022 confirm whether you understand its variants<br>\n\u2022 confirm whether you can map it correctly into a reusable component<br><br>\n      If something is unclear \u2192 DO NOT GUESS \u2192 ask..<br>\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Input<\/strong><br>\n      Use the following Builder.io exports as the source of truth.\nEach screen includes layout, structure, and component information.<br><br>\n\n      <strong>L Breakpoint<\/strong><br>\n      \u2022 01_home_default\/L<br>\n      https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/r9fhin9xivdmmw4ssc2<br><br>\n\n      \u2022 01_L_active input<br>\n      https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/7i8kw1284jimmw4wqd4<br><br>\n\n      \u2022 01_L_enabled primary, active male, filled name<br>\n      https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/61psulvtwolmmw5ocpr<br><br>\n\n      <strong>M Breakpoint<\/strong><br>\n      \u2022 01_home_default\/M<br>\n      https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/i9g3t3prnxkmmw4t9g0<br><br>\n\n      \u2022 01_M_active input<br>\n      https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/1dmzfy0w76wmmw4xn5o<br><br>\n\n      \u2022 01_M_enabled primary, active male, filled name<br>\n      https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/zhe3ylqfgv8mmw4ykuy<br><br>\n\n      <strong>S Breakpoint<\/strong><br>\n      \u2022 01_S_active input<br>\n      https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/jpelhvr9m8jmmw4z8oj<br><br>\n\n      \u2022 01_S_enabled primary, active male, filled name<br>\n      https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/20cy9rp6ufzmmw4zmle\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Component Extraction<\/strong><br>\n      \u2022 Use the provided code as the source of truth<br>\n      \u2022 Extract components based on structure in the code<br>\n      \u2022 Keep naming consistent with what you find in the code<br><br>\nIMPORTANT:<br>\n      \u2022 If components are nested (component inside component), reflect that<br>\n      \u2022 Do NOT flatten the structure<br>\n      \u2022 Reuse components where possible<br>\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Variants<\/strong><br>\n      \u2022 Use the different states (default, active, filled, enabled, etc.) to build component variants\n<br>\n      \u2022 Do NOT create separate components for each state\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Keyboard & Device UI<\/strong><br>\n      \u2022 Ignore device UI (keyboard, status bar, frames)and do NOT implement them<br>\n      \u2022 The keyboard is always device-native<br><br>\n\n      Instead:<br>\n      \u2022 Ensure inputs scroll into view when focused <br>\n      \u2022 Prevent content from being hidden behind the keyboard\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Responsive Behavior<\/strong><br>\n      \u2022 Derive layout behavior from the provided code and designs\n<br>\n      \u2022 Do NOT guess<br>\n      \u2022 Ensure no horizontal scrolling\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>IMPORTANT:<\/strong><br>\n      If something is unclear or cannot be derived from the code:<br>\n      \u2022 explicitly tell me what is missing<br>\n      \u2022 or what you cannot confidently determine\n\n      <br><br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n      <strong>Goal of this Step<\/strong><br>\n      \u2022 Build component structure<br>\n      \u2022 Validate that components and variants are correctly understood<br>\n      \u2022 Make it reusable and extendable<br>\n      \u2022 Reflect the structure from the code as accurately as possible\n\n    <\/div>\n  <\/div>\n\n<\/div><div class=\"fusion-text fusion-text-33 fusion-text-no-margin p3\" style=\"--awb-font-size:20px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>Additional to the prompt: Avatars and screenshots: One shows Screen 1 at all breakpoints, and the other shows an example of the structure of the components with variants based on the InputFieldComponent.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-11 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1050\" height=\"336\" title=\"provided_images\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-18.10.36.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-18.10.36.png\" alt class=\"lazyload img-responsive wp-image-5041\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271050%27%20height%3D%27336%27%20viewBox%3D%270%200%201050%20336%27%3E%3Crect%20width%3D%271050%27%20height%3D%27336%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-18.10.36-200x64.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-18.10.36-400x128.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-18.10.36-600x192.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-18.10.36-800x256.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-18.10.36.png 1050w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1050px\" \/><\/span><\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-12 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"2476\" height=\"1674\" title=\"upload 01\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.33.23-1.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.33.23-1.png\" alt class=\"lazyload img-responsive wp-image-5082\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272476%27%20height%3D%271674%27%20viewBox%3D%270%200%202476%201674%27%3E%3Crect%20width%3D%272476%27%20height%3D%271674%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.33.23-1-200x135.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.33.23-1-400x270.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.33.23-1-600x406.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.33.23-1-800x541.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.33.23-1-1200x811.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.33.23-1.png 2476w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-13 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"2138\" height=\"606\" title=\"textInput comp structure\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-15.16.43.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-15.16.43.png\" alt class=\"lazyload img-responsive wp-image-5170\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272138%27%20height%3D%27606%27%20viewBox%3D%270%200%202138%20606%27%3E%3Crect%20width%3D%272138%27%20height%3D%27606%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-15.16.43-200x57.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-15.16.43-400x113.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-15.16.43-600x170.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-15.16.43-800x227.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-15.16.43-1200x340.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-15.16.43.png 2138w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-12 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:132px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-13 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features mandy-dark-foreground-primary\" style=\"--awb-text-color:#90dfb6;--awb-margin-top:120px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">\ud83e\uddfe Results<\/h3><\/div><div class=\"fusion-text fusion-text-34 fusion-text-no-margin p1 mandy-dark-foreground-secondary\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>\u270d\ufe0f What I intended to achieve<\/p>\n<ul>\n<li>Extract tokens, components, and layout 1:1 from Figma \/ Builder.io<\/li>\n<li>Build a clean, reusable component system<\/li>\n<li>Ensure pixel-perfect behavior across MY breakpoints<br \/>\n<strong>S:<\/strong> max 479px (small phones);<br \/>\n<strong>M:<\/strong> 480px \u2013 767px (large phones \/ small tablets);<br \/>\n<strong>L:<\/strong> 768px+ (tablets and above)<\/li>\n<\/ul>\n<\/div><div class=\"fusion-text fusion-text-35 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:120px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">With everything clearly defined \u2014 tokens, components, layout \u2014 this was the moment of truth. How much of the design would actually translate 1:1 into code? <span style=\"background-color:var(--mandy-blue-500); color:var(--mandy-light-foreground-on-color-primary);\"> To break this down, I inspected the generated code and compared it directly against the design\ud83d\udc47<\/span><\/span><\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-14 hover-type-none\"><img decoding=\"async\" width=\"2560\" height=\"1962\" title=\"analysing L results\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-453-scaled.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-453-scaled.png\" alt class=\"lazyload img-responsive wp-image-5059\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272560%27%20height%3D%271962%27%20viewBox%3D%270%200%202560%201962%27%3E%3Crect%20width%3D%272560%27%20height%3D%271962%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-453-200x153.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-453-400x307.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-453-600x460.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-453-800x613.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-453-1200x920.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-453-scaled.png 2560w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:100px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-15 hover-type-none\"><img decoding=\"async\" width=\"2560\" height=\"1220\" title=\"analysing M and S\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-454-scaled.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-454-scaled.png\" alt class=\"lazyload img-responsive wp-image-5060\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272560%27%20height%3D%271220%27%20viewBox%3D%270%200%202560%201220%27%3E%3Crect%20width%3D%272560%27%20height%3D%271220%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-454-200x95.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-454-400x191.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-454-600x286.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-454-800x381.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-454-1200x572.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Group-454-scaled.png 2560w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-36 fusion-text-no-margin p1 mandy-dark-foreground-secondary\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:80px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>A lot worked very well \ud83e\udd73<\/p>\n<ul>\n<li>\u2705 Component structure was correctly identified 1:1<\/li>\n<li>\u2705 Components and variants were recognized 1:1<\/li>\n<li>\u2705 Reusability was considered<\/li>\n<li>\u2705 Auto layout mostly worked 1:1<\/li>\n<li>\u2705 Layout behaved generally stable<\/li>\n<li>\u2705 Responsive structure was conceptually correct<\/li>\n<li>\u2705 Design values were detected<\/li>\n<li>\u2705 Colors were correctly extracted (HEX\/HSL)<\/li>\n<\/ul>\n<\/div><div class=\"fusion-title title fusion-title-14 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features mandy-highlight-green\" style=\"--awb-text-color:#90dfb6;--awb-margin-top:200px;--awb-margin-bottom:0px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">What didn\u2019t work \u2014<br \/>\nand why<\/h3><\/div><div class=\"fusion-title title fusion-title-15 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:120px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">1. Breakpoints were ignored \u2014<br \/>\nuntil explicitly enforced<\/h3><\/div><div class=\"fusion-text fusion-text-37 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\"><span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">\u201cUse the following breakpoints across the entire app:<\/span><br \/>S: max 479px (small phones);<br \/>M: 480px \u2013 767px (large phones \/ small tablets);<br \/>L: 768px+ (tablets and above)&#8221;<\/p>\n<p>\ud83d\udc49 <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">This was not defined as a strict system \u2014 so it was treated as flexible <\/span><br \/>\u2192 so my custom breakpoints (S \/ M \/ L) were NOT implemented<br \/>\u2192 instead, default Tailwind breakpoints were used (sm: 640px, md: 768px)<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><strong> \ud83d\udea7 I had to change the Prompt to:<\/strong><\/span><\/p>\n<p><span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><strong>\u2757BREAKPOINT SYSTEM MANDATORY<\/strong><br \/>\u2757 Use exactly these breakpoints: &#8230;<\/span><span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><br \/>\u2757 You MUST refer to them as: S, M, L<\/span><\/p>\n<p>\ud83d\udc49 This finally overrode Tailwind defaults and enforced my custom breakpoint system<\/span><\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:0px;--awb-margin-bottom:120px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-16 hover-type-none\" style=\"border-radius:30px;\"><img decoding=\"async\" width=\"1412\" height=\"468\" title=\"prompt1 vs prompt1 _ breakpoints\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-22.47.26-1.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-22.47.26-1.png\" alt class=\"lazyload img-responsive wp-image-5070\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271412%27%20height%3D%27468%27%20viewBox%3D%270%200%201412%20468%27%3E%3Crect%20width%3D%271412%27%20height%3D%27468%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-22.47.26-1-200x66.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-22.47.26-1-400x133.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-22.47.26-1-600x199.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-22.47.26-1-800x265.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-22.47.26-1-1200x398.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-22.47.26-1.png 1412w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-title title fusion-title-16 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:250px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\"><p>2. Figma Line-height \u201cauto\u201d<br \/>\nwas replaced by a default Tailwind value<\/p><\/h3><\/div><div class=\"fusion-text fusion-text-38 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:50px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">\ud83d\udc49 <strong><span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">Figma value &#8220;auto&#8221;<\/span><\/strong><span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\"> <\/span> \u2192 mapped to a default Tailwind value (1.5) instead of the actual computed line-height (~1.22)<\/p>\n<p><span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><strong> \ud83d\udea7 I had to replace all \u201cauto\u201d line-heights in Figma with explicit values <\/strong><\/span><br \/>\ud83d\udc49 This overrode Tailwind defaults and preserved the intended typography<\/span><\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:200px;--awb-max-width:700px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-17 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1366\" height=\"776\" title=\"Bildschirmfoto 2026-04-05 um 23.55.58\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.55.58.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.55.58.png\" alt class=\"lazyload img-responsive wp-image-5073\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271366%27%20height%3D%27776%27%20viewBox%3D%270%200%201366%20776%27%3E%3Crect%20width%3D%271366%27%20height%3D%27776%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.55.58-200x114.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.55.58-400x227.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.55.58-600x341.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.55.58-800x454.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.55.58-1200x682.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.55.58.png 1366w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-title title fusion-title-17 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features mandy-dark-foreground-primary\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:80px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">3. Figma Max-width<br \/>\nbroke centering<\/h3><\/div><div class=\"fusion-text fusion-text-39 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\">\ud83d\udc49 <span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"> In Figma, you can apply max-width to a centered &amp; filled element<\/span> without breaking alignment. \ud83d\udc49 <span style=\"background-color:var(--mandy-highlight-red); color:var(--mandy-light-foreground-on-color-primary);\">In CSS, applying max-width to the flex container breaks centering.<\/span><\/span><\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:60px;--awb-max-width:700px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-18 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1318\" height=\"268\" title=\"Bildschirmfoto 2026-04-05 um 23.10.49\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.10.49.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.10.49.png\" alt class=\"lazyload img-responsive wp-image-5078\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271318%27%20height%3D%27268%27%20viewBox%3D%270%200%201318%20268%27%3E%3Crect%20width%3D%271318%27%20height%3D%27268%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.10.49-200x41.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.10.49-400x81.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.10.49-600x122.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.10.49-800x163.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.10.49-1200x244.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-05-um-23.10.49.png 1318w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-40 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color:var(--mandy-dark-foreground-secondary);\"><span style=\"background-color:var(--mandy-highlight-green); color:var(--mandy-light-foreground-on-color-primary);\"><strong> \ud83d\udea7 I had to add a wrapper in Figma to match real CSS<\/strong><\/span><\/span><\/p>\n<ul style=\"color:var(--mandy-dark-foreground-secondary);\">\n<li>wrapper \u2192 full width + centered<\/li>\n<li>subline \u2192 max-width<\/li>\n<\/ul>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;--awb-max-width:700px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-19 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1644\" height=\"256\" title=\"Bildschirmfoto 2026-04-06 um 00.14.48\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.14.48.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.14.48.png\" alt class=\"lazyload img-responsive wp-image-5079\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271644%27%20height%3D%27256%27%20viewBox%3D%270%200%201644%20256%27%3E%3Crect%20width%3D%271644%27%20height%3D%27256%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.14.48-200x31.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.14.48-400x62.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.14.48-600x93.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.14.48-800x125.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.14.48-1200x187.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-00.14.48.png 1644w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-41 fusion-text-no-margin p1 mandy-dark-foreground-secondary\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:10px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>\ud83d\udc49 This aligns with how layout actually works in code<\/p>\n<\/div><div class=\"fusion-text fusion-text-42 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:80px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"background-color: #26de82; color: #1c1c1c;\">\u2757\ufe0f <strong>This works for text \u2014 not for full components<\/strong><\/span><\/p>\n<ul>\n<li>A text element can handle both fill and max-width.<\/li>\n<li>A component cannot. It defines its own layout<\/li>\n<\/ul>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:0px;--awb-margin-bottom:30px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-20 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1938\" height=\"726\" title=\"adding a wrapper was not enough\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.24.19.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.24.19.png\" alt class=\"lazyload img-responsive wp-image-5156\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271938%27%20height%3D%27726%27%20viewBox%3D%270%200%201938%20726%27%3E%3Crect%20width%3D%271938%27%20height%3D%27726%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.24.19-200x75.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.24.19-400x150.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.24.19-600x225.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.24.19-800x300.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.24.19-1200x450.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.24.19.png 1938w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-43 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"background-color: #26de82; color: #1c1c1c;\">\ud83d\udc49 Combining fill (stretch) + max-width on a component breaks alignment<br \/>\n\ud83d\udc49 A wrapper alone does NOT fix it<\/span><\/p>\n<p>I had to advice Lovable afterwards \ud83d\udc49 Replacing\u00a0 \u00a0<code data-start=\"978\" data-end=\"999\">align-self:stretch<\/code>\u00a0 with\u00a0 \u00a0<code data-start=\"1005\" data-end=\"1018\">width:100%<\/code>\u00a0 \u00a0was not enough \u2192 The system still enforced full-width behavior<i> <\/i>(w-full).\u00a0 \ud83d\udc49 Only removing the stretch behavior entirely fixed centering + max-width<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:0px;--awb-margin-bottom:60px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-21 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"2560\" height=\"1456\" title=\"maxWidth problem with figma components\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.45.50-scaled.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.45.50-scaled.png\" alt class=\"lazyload img-responsive wp-image-5155\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272560%27%20height%3D%271456%27%20viewBox%3D%270%200%202560%201456%27%3E%3Crect%20width%3D%272560%27%20height%3D%271456%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.45.50-200x114.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.45.50-400x228.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.45.50-600x341.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.45.50-800x455.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.45.50-1200x683.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-12.45.50-scaled.png 2560w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-title title fusion-title-18 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:250px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\" id=\"research\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">A few other issues with Figma<br \/>\nvs Reality came up: \ud83d\udc40<\/h3><\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:0px;--awb-margin-bottom:60px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-22 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1698\" height=\"1542\" title=\"figma layering and gradient issues\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.47.57.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.47.57.png\" alt class=\"lazyload img-responsive wp-image-5164\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271698%27%20height%3D%271542%27%20viewBox%3D%270%200%201698%201542%27%3E%3Crect%20width%3D%271698%27%20height%3D%271542%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.47.57-200x182.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.47.57-400x363.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.47.57-600x545.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.47.57-800x727.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.47.57-1200x1090.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.47.57.png 1698w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-title title fusion-title-19 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:60px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\" id=\"research\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">4. Figma layering<br \/>\nis not transferred to CSS z-index<\/h3><\/div><div class=\"fusion-text fusion-text-44 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>\ud83d\udc49 Figma uses visual stacking (layer order)<br data-start=\"302\" data-end=\"305\" \/>\ud83d\udc49 CSS uses explicit stacking (<code data-start=\"336\" data-end=\"345\">z-index<\/code> + positioning)<\/p>\n<p><strong><span style=\"background-color: #26de82; color: #1c1c1c;\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/1f6a7.svg\" alt=\"\ud83d\udea7\" \/> I then had to manually set the z-index in Lovable.<\/span><\/strong><\/p>\n<\/div><div class=\"fusion-title title fusion-title-20 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:120px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\" id=\"research\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">5. Figma-gradient-strokes<br \/>\ndon\u2019t translate directly to CSS<\/h3><\/div><div class=\"fusion-text fusion-text-45 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>\ud83d\udc49 In Figma, strokes can use gradients<br \/>\n\ud83d\udc49 In CSS, borders are typically solid \u2014 gradient borders are not native<\/p>\n<p>\ud83d\udc49 The gradient stroke was not reproduced as a real border<br data-start=\"787\" data-end=\"790\" \/>\u2192 because CSS has no simple equivalent<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"background-color: #26de82; color: #1c1c1c;\"><strong> \ud83d\udea7 I had to explicitly instruct Lovable to simulate the gradient stroke using layered backgrounds<\/strong><\/span><\/p>\n<p><strong data-start=\"1174\" data-end=\"1269\"><code data-start=\"328\" data-end=\"345\">background-clip <\/code><\/strong>was required to keep the center solid \u2014 so only the outer edge appears as a gradient border<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:120px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-23 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1204\" height=\"420\" title=\"border gradient workaround\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.56.51.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.56.51.png\" alt class=\"lazyload img-responsive wp-image-5166\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271204%27%20height%3D%27420%27%20viewBox%3D%270%200%201204%20420%27%3E%3Crect%20width%3D%271204%27%20height%3D%27420%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.56.51-200x70.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.56.51-400x140.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.56.51-600x209.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.56.51-800x279.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.56.51-1200x419.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-14.56.51.png 1204w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 10 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 10\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 Figma \u2260 Real CSS Constraints\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          Figma values like \u201cauto\u201d (e.g. line-height) do not translate reliably and often get mapped to incorrect defaults in code.\n        <\/li>\n        <li>\n          What visually works in Figma can break in real CSS layouts.\n        <\/li>\n        <li>\n          CSS requires structural separation, while Figma allows simplified setups that don\u2019t exist in implementation.\n        <\/li>\n        <li>\n          Generated code must be actively corrected.\n        <\/li>\n        <li>\n          Figma uses visual rendering, while CSS relies on structural rules \u2014 complex effects like layering and gradients often require manual correction.\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-title title fusion-title-21 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:200px;--awb-margin-bottom:0px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\" id=\"research\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">6. Visual styling was added<br \/>\n(blur \/ transparency)<\/h3><\/div><div class=\"fusion-text fusion-text-46 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:20px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>I prompted: &#8220;If something is unclear \u2192 DO NOT GUESS \u2192 ask&#8230; &#8221; &amp; &#8220;&#8230;use the following Builder.io exports as the source of truth&#8221; <span style=\"color: #1c1c1c;\"><span style=\"background-color: #ff4e59;\">\ud83d\udc49 Even with these instructions, the AI still interpreted the design<\/span><\/span><\/p>\n<p>\ud83d\udc49 <span style=\"color: #1c1c1c;\"><span style=\"background-color: #ff4e59;\">I wasn\u2019t strict enough in defining its role and behavior<\/span><\/span> \ud83d\udc49 That implies design improvement freedom. So Lovable added opacity, even though it wasn&#8217;t present in the Figma design.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"background-color: #26de82; color: #1c1c1c;\"><strong> \ud83d\udea7 I had to change the prompt to<\/strong><\/span><\/p>\n<p><span style=\"background-color: #26de82; color: #1c1c1c;\">\u201c<strong>CRITICAL WORKING MODE<\/strong>:\u201d<\/span><br \/>\n\u2757<span style=\"background-color: #26de82; color: #1c1c1c;\">\u201cYou are an expert Frontend Developer\u201d<\/span><br \/>\n\u2757<span style=\"background-color: #26de82; color: #1c1c1c;\">\u201cYou are NOT designing\u201d<\/span><br \/>\n\u2757<span style=\"background-color: #26de82; color: #1c1c1c;\">\u201cYou are NOT interpreting.\u201d<\/span><br \/>\n\u2757<span style=\"background-color: #26de82; color: #1c1c1c;\">\u201cYou are EXTRACTING a system from the provided Builder.io code.\u201d<\/span><br \/>\n\u2757<span style=\"background-color: #26de82; color: #1c1c1c;\">\u201cEvery decision must come from the builder.io-code.\u201d<\/span><br \/>\n\u2757<span style=\"background-color: #26de82; color: #1c1c1c;\">\u201cDo NOT recreate or reinterpret.\u201d<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>\ud83d\udc49 This shuts down creative behavior.<br \/>\n<strong>Auto message from Lovable:<\/strong><br \/>\n\u274c UserBadge opacity-70 \/ scale \u2192<br \/>\n\u2705 Removed (not part of the design)<\/p>\n<\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 11 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 11\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 AI Does Not Follow Intent \u2014 Only Instructions\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          AI executes exactly what is specified \u2014 and needs clear boundaries.\n        <\/li>\n        <li>\n          Explicit prohibitions are required to prevent drift from the intended logic.\n        <\/li>\n        <li>\n          Precision in instructions turns unpredictable output into controlled, reliable behavior.\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-title title fusion-title-22 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:200px;--awb-margin-bottom:0px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\" id=\"research\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">7. DOM didn\u2019t show<br \/>\nmy Figma components<\/h3><\/div><div class=\"fusion-text fusion-text-47 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:20px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>After Prompt 1 and 2, I initially thought no components were created \u2013 even though Lovable said he had done so \ud83d\udc49 Because I couldn\u00b4t see them in DOM. But the issue wasn\u2019t the implementation \u2014 <span style=\"color: #1c1c1c;\"><span style=\"background-color: #ff4e59;\">it was visibility.<\/span><\/span><\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:60px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-24 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"610\" height=\"272\" title=\"react component structure in DOM\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.02.47.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.02.47.png\" alt class=\"lazyload img-responsive wp-image-5050\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27610%27%20height%3D%27272%27%20viewBox%3D%270%200%20610%20272%27%3E%3Crect%20width%3D%27610%27%20height%3D%27272%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.02.47-200x89.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.02.47-400x178.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.02.47-600x268.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.02.47.png 610w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 610px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-48 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>Lovable builds <span style=\"background-color: #27df83; color: #1c1c1c;\">React Components.<\/span> React \u201cbreaks down\u201d your components into standard HTML during rendering. This makes it impossible to inspect a component using the inspector tool.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"background-color: #26de82; color: #1c1c1c;\"><strong> \ud83d\udea7 I had to change the Prompt to:<\/strong><\/span><\/p>\n<p>\u2757<span style=\"background-color: #27df83; color: #1c1c1c;\">Each component MUST include a visible identifier in the DOM:\u2028\u2192 data-component=&#8221;ComponentName&#8221;<\/span><\/p>\n<p>\ud83d\udc49 Now my components are visible in DOM, too.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-25 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"608\" height=\"315\" title=\"Bildschirmfoto 2026-04-02 um 21.03.09\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.03.09.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.03.09.png\" alt class=\"lazyload img-responsive wp-image-5051\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27608%27%20height%3D%27315%27%20viewBox%3D%270%200%20608%20315%27%3E%3Crect%20width%3D%27608%27%20height%3D%27315%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.03.09-200x104.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.03.09-400x207.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.03.09-600x311.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-02-um-21.03.09.png 608w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 608px\" \/><\/span><\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 12 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 12\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 React Components Are Invisible in the DOM by Default\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          Lovable builds React components, but they do not appear in the DOM as component names. They exist in the JavaScript code and render as regular HTML elements such as divs.\n        <\/li>\n        <li>\n          Only after explicitly adding <code>data-component<\/code> in Prompt 3 did the component structure become visible, making the architecture inspectable and verifiable.\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-title title fusion-title-23 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#d9d9d9;--awb-margin-top:200px;--awb-margin-bottom:0px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:40px;\" id=\"research\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">8. Color tokens:<br \/>\nfrom missing \u2192 to wrong \u2192 to correct<\/h3><\/div><div class=\"fusion-text fusion-text-49 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:60px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>\u26a0\ufe0f In Prompt 1 I forgot writing anything about Tokens:<br \/>\n<span style=\"color: #1c1c1c;\"><span style=\"background-color: #ff4e59;\">No token instructions.<\/span><\/span><br \/>\n\ud83d\udc49 Result: The model created its own token system (cave-*) based on HEX values from the builder.io-Code.<\/p>\n<p>&nbsp;<\/p>\n<p>\u26a0\ufe0f In Prompt 2 I wrote:<br \/>\n\u201cUse ONLY existing color and typography tokens <span style=\"color: #1c1c1c;\"><span style=\"background-color: #ff4e59;\">from Figma<\/span><\/span>\u201d<br \/>\n\ud83d\udc49 The model reused its previously created tokens, because <em>Builder.io<\/em> was defined as the single source of truth, while <em>Figma<\/em> was not accessible.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"background-color: #26de82; color: #1c1c1c;\"><strong> <img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/1f6a7.svg\" alt=\"\ud83d\udea7\" \/> I had to change the Prompt to:<\/strong><\/span><\/p>\n<p><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/2705.svg\" alt=\"\u2705\" \/> Prompt 3:<\/p>\n<p><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">1. Source of truth was consistent and unambiguous<br \/>\n<\/span><\/span>\u2757\ufe0fBuilder.io exports are the single source of truth for:<\/p>\n<ul>\n<li>&#8230;<\/li>\n<li>color token<\/li>\n<li>typography token<\/li>\n<\/ul>\n<p data-start=\"440\" data-end=\"484\">\ud83d\udc49 No conflicting reference to Figma anymore<\/p>\n<p data-start=\"440\" data-end=\"484\"><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">2. Strict execution mode<br \/>\n<\/span><\/span><\/p>\n<p>\u2757\ufe0fYou are NOT designing.<br \/>\n<img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/2757.svg\" alt=\"\u2757\ufe0f\" \/>You are NOT interpreting.<br \/>\n<img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/2757.svg\" alt=\"\u2757\ufe0f\" \/>You are BUILDING.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">3. Strict token usage rules<\/span><\/span><\/p>\n<ul>\n<li>You MUST always use color tokens in components<\/li>\n<li>Never use hex values directly in components<\/li>\n<li><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">Use EXACT token names from Builder.io code (no renaming)<\/span><\/span><\/li>\n<li>If the token EXISTS \u2192 use it exactly as defined<\/li>\n<li>If the token DOES NOT EXIST \u2192 add it to the token system<\/li>\n<li>Do NOT replace missing tokens with similar ones<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">3. Tokens were fully specified via list <\/span><\/span><br \/>\n<img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/2757.svg\" alt=\"\u2757\ufe0f\" \/>COLORS: gelb: #F98D09; rot: #FF4E59 &#8230;<\/p>\n<p><img decoding=\"async\" class=\"lazyload emoji\" style=\"letter-spacing: 0.36px;\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/1f449.svg\" alt=\"\ud83d\udc49\" \/><span style=\"letter-spacing: 0.36px; background-color: rgba(0, 0, 0, 0);\"> The model kept its old tokens as aliases to avoid breaking existing code \u2014 but the active system now uses the correct Figma token names.<\/span><\/p>\n<\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 13 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 13\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 Builder.io Code\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          I validated this in a fresh Lovable project: even without defining tokens manually, the model correctly extracted all color tokens from the Builder.io code \u2014 as long as the prompt explicitly required token-based styling and a token list.\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><div class=\"fusion-text fusion-text-50 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:40px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\"> Here is my nearly perfect final prompt \ud83d\udc47<\/span><\/span><\/p>\n<\/div><div class=\"lovable-chat\">\n\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/mandywebsite-cpws3tmldc.live-website.com\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-time start-time\">14:32<\/div>\n\n\n\n<div class=\"chat-row full\">\n  <div class=\"bubble large user\">\n\n    Refactor this existing app into a strict, reusable design system.<br><br>\n\n    We work screen by screen.<br><br>\n\n    Builder.io exports are the single source of truth for:<br><br>\n\n    \u2022 layout<br>\n    \u2022 structure<br>\n    \u2022 hierarchy<br>\n    \u2022 color token<br>\n    \u2022 typography token<br><br>\n\n    You are NOT designing.<br>\n    You are NOT interpreting.<br>\n    You are BUILDING.<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>STEP 1 \u2014 TOKENS (MANDATORY FIRST)<\/strong><br><br>\n\n    You MUST define ALL tokens BEFORE building components.<br><br>\n\n    <strong>COLORS:<\/strong><br><br>\n\n    \u2022 braun_bg_2: #522C18<br>\n    \u2022 rot: #FF4E59<br>\n    \u2022 braun_logo_bg: #77462B<br>\n    \u2022 braun_bg_1: #402212<br>\n    \u2022 white: #EEDFD7<br>\n    \u2022 gelb: #F98D09<br>\n    \u2022 beige: #B1826A<br>\n    \u2022 schwarz: #000000<br>\n    \u2022 braun_wait: rgba(64,34,18,0.8)<br>\n    \u2022 lila: #8A38F5<br>\n    \u2022 beige_transparent: rgba(173,163,158,0.1)<br>\n    \u2022 beige_copytext: #CFB9AE<br>\n    \u2022 beige_placeholder_text: #8F7263<br>\n    \u2022 gr\u00fcn: #34C759<br>\n    \u2022 gelb_star: #DEB236<br>\n    \u2022 lila_hover: #6A2ABD<br>\n    \u2022 gr\u00fcn_hover: #20AC43<br>\n    \u2022 lila_transparent: rgba(106,42,189,0.2)<br>\n    \u2022 lila_transparent_hover: rgba(106,42,189,0.4)<br><br>\n\n    <strong>TYPOGRAPHY:<\/strong><br><br>\n\n    <strong>Display:<\/strong><br>\n    \u2022 XXL: 48px<br>\n    \u2022 XL: 40px<br>\n    \u2022 L: 32px \/ 34px<br>\n    \u2022 M: 24px<br>\n    \u2022 S: 20px<br>\n    \u2022 XS: 17px<br>\n    \u2022 XXS: 14px<br><br>\n\n    <strong>Text:<\/strong><br>\n    \u2022 Body: 16px \/ 150%<br>\n    \u2022 L: 24px \/ 150%<br>\n    \u2022 M: 20px \/ 150%<br>\n    \u2022 S: 14px \/ 150%<br><br>\n\n    <strong>Bold:<\/strong><br>\n    \u2022 L: 20px \/ 150%<br>\n    \u2022 M: 16px \/ 150%<br>\n    \u2022 S: 14px \/ 150%<br><br>\n\n    <strong>RULES FOR TOKENS:<\/strong><br><br>\n\n    \u2022 Create tokens in:<br>\n    \u2192 index.css<br>\n    \u2192 tailwind.config.ts<br><br>\n\n    \u2022 NEVER use raw values in components<br>\n    \u2022 ONLY use tokens<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>GOAL:<\/strong><br><br>\n\n    \u2022 Pixel-perfect implementation<br>\n    \u2022 EXACT component structure from design<br>\n    \u2022 ALL components must be real React components<br><br>\n\n    Detection is NOT enough:<br>\n    \u2192 every detected component MUST be implemented<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>COMPONENT RULES:<\/strong><br><br>\n\n    \u2022 Use EXACT names from code<br>\n    \u2022 DO NOT rename<br>\n    \u2022 Reuse components<br>\n    \u2022 Variants via props<br><br>\n\n     <strong>Example:<\/strong><br><br>\n    Button variant=\"primary\" state=\"active\" size=\"L\" <br><br>\n\n    \u2022 Nested components MUST be extracted<br>\n    \u2022 NO duplicate components<br><br>\n\n    Each component MUST include:<br>\n    \u2022 data-component=\"ComponentName\"<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>BREAKPOINTS:<\/strong><br><br>\n\n    \u2022 S: max 479px<br>\n    \u2022 M: 480\u2013767px<br>\n    \u2022 L: 768px+<br><br>\n\n    \u2022 Use S \/ M \/ L naming in code<br><br>\n\n    \u2022 NO guessing<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>LAYOUT RULES:<\/strong><br><br>\n\n    \u2022 EXACT alignment from design<br>\n    \u2022 NO default centering<br>\n    \u2022 Respect horizontal AND vertical alignment<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>RESPONSIVE RULES:<\/strong><br><br>\n\n    \u2022 NO horizontal scrolling on mobile<br>\n    \u2022 Input must stay visible when keyboard opens<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>VALIDATION STEP (MANDATORY):<\/strong><br><br>\n\n    Before building, answer:<br><br>\n\n    \u2022 Detected components<br>\n    \u2022 Detected variants<br>\n    \u2022 Used tokens<br>\n    \u2022 Missing \/ unclear parts<br><br>\n\n    If something is unclear:<br>\n    \u2192 STOP and ask<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>OUTPUT:<\/strong><br><br>\n\n    \u2022 index.css (tokens)<br>\n    \u2022 tailwind.config.ts<br>\n    \u2022 components\/ui\/*<br>\n    \u2022 screen implementation<br><br>\n\n    Also provide:<br><br>\n\n    \u2022 component list<br>\n    \u2022 variants per component<br>\n    \u2022 used tokens<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>INPUT:<\/strong><br><br>\n\n    <strong>L BREAKPOINT:<\/strong><br><br>\n\n    \u2022 01_L_home default<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/jk7s3zvyn2imndpssmy<br><br>\n\n    \u2022 01_L_active input<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/n533cdy5qlmndpuf6j<br><br>\n\n    \u2022 01_L_enabled primary, active male, filled name<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/gcobr6j5wkimndpuuwj<br><br>\n\n    <strong>M BREAKPOINT:<\/strong><br><br>\n\n    \u2022 01_M_home default<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/6xkqy6kusnjmndpvsy3<br><br>\n\n    \u2022 01_M_active input<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/ii2w0btp2gsmndpwbyx<br><br>\n\n    \u2022 01_M_enabled primary, active male, filled name<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/5b7vdr2g21xmndpwqmn<br><br>\n\n    <strong>S BREAKPOINT:<\/strong><br><br>\n\n    \u2022 01_S_home default<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/ezs1ezjnruamndpx55u<br><br>\n\n    \u2022 01_S_active input<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/q5ngaa7xlnlmndpxmmu<br><br>\n\n    \u2022 01_S_enabled primary, active male, filled name<br>\n    https:\/\/api.builder.io\/api\/v1\/file\/assets\/TEMP\/z8nnu1yu90imndpy61e<br><br>\n\n  <\/div>\n<\/div>\n\n\n<\/div><\/div><\/div><\/div><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-13 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:132px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-24 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#90dfb6;--awb-margin-top:200px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\" id=\"small_changes\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">How to ask for small changes?<\/h3><\/div><div class=\"fusion-text fusion-text-51 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>I wanted him to change some max-width values in one component and wrote:<\/p>\n<p>&#8220;<span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">You are<\/span><\/span> an expert front-end developer. I want to change the max width of the headline in &#8220;WhatsUp-Component&#8221;<\/p>\n<p>1. <span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">Look at <\/span><\/span> the &#8216;WhatsUp&#8217; component in our project.<br \/>\n2. <span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">Change max width ofHeadline in &#8220;WhatsUp&#8221;-component-L to 450px.<\/span><\/span><br \/>\n3. Change max width of Headline in &#8220;WhatsUp&#8221;-component-M to 400px.<br \/>\n4. Change max width of Headline in &#8220;WhatsUp&#8221;-component-S to 300px.&#8221;<\/p>\n<p><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">Planning:<\/span><\/span> \ud83d\udc49 Before you start: if something is unclear: \u27a1\ufe0f STOP and ask.<br \/>\n<span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">Validation:<\/span><\/span> \ud83d\udc49 Let me know afterward exactly what you did<\/p>\n<p>\ud83d\udc49 this worked perfectly!<\/p>\n<\/div><div class=\"fusion-title title fusion-title-25 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#90dfb6;--awb-margin-top:100px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\" id=\"instructions_md\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">How do I make the system stick \u2014 without repeating everything?<\/h3><\/div><div class=\"fusion-text fusion-text-52 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:60px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>After finally getting a clean design system (tokens, components, structure), the next challenge was obvious \ud83d\udc49 How can I lock these rules in, so I don\u2019t have to repeat them in every prompt? <span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">\u2014 similar to Cursor Rules? <\/span><\/span> The solution was to externalize the system.<\/p>\n<\/div><div class=\"fusion-text fusion-text-53 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:40px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p data-start=\"343\" data-end=\"372\"><strong>I introduce three core files:<\/strong><\/p>\n<ul>\n<li><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">instructions.md<\/span><\/span>\u2192 global rules and behavior<\/li>\n<li><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">component_system.md<\/span><\/span> \u2192 components, variants, updates<\/li>\n<li><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">game_rules.md<\/span><\/span> \u2192 screen-specific logic<\/li>\n<\/ul>\n<p>\ud83d\udca1 The idea is to shift from prompt-heavy instructions to a system-driven workflow. \ud83d\udc47<\/p>\n<\/div><div class=\"lovable-chat\">\n\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/mandywebsite-cpws3tmldc.live-website.com\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  \n\n\n<div class=\"chat-row full\">\n  <div class=\"bubble large user\">\n\n    You must set up a structured rule system AND immediately apply it to the entire app.<br><br>\n\n    This is NOT only documentation. This is ALSO implementation.<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>CORE TASK<\/strong><br><br>\n\n   <span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\"> \u2022 Create these 3 files:<br><br>\n\n    \u2022 instructions.md<br>\n    \u2022 component_system.md<br>\n    \u2022 game_rules.md<br><br> <\/span><\/span>\n\n    \u2022 Apply ALL rules immediately to the current app<br><br>\n\n    \u2022 Refactor the app to match:<br><br>\n\n    \u2022 tokens<br>\n    \u2022 layout rules<br>\n    \u2022 responsive rules<br>\n    \u2022 component logic<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>FILE 1: instructions.md<\/strong><br><br>\n\n    <strong>Global Instructions<\/strong><br><br>\n\n    \u2022 Apply to ALL screens<br>\n    \u2022 Must ALWAYS be followed<br><br>\n\n    <strong>General Behavior<\/strong><br><br>\n\n    \u2022 \u2757\ufe0fBuilder.io exports are the single source of truth for:<br><br>\n\n    \u2022 layout<br>\n    \u2022 structure<br>\n    \u2022 hierarchy<br>\n    \u2022 color tokens<br>\n    \u2022 typography tokens<br><br>\n\n    \u2022 \u2757\ufe0fYou are NOT designing<br><br>\n\n    \u2022 \u2757\ufe0fYou are NOT interpreting<br><br>\n\n    \u2022 \u2757\ufe0fYou are BUILDING<br><br>\n\n    \u2022 Do NOT guess<br><br>\n\n    \u2022 If unclear \u2192 ask<br><br>\n\n    \u2022 If not derivable from builder.io code \u2192 say it clearly<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>Component System (CRITICAL)<\/strong><br><br>\n\n    <strong>General Rules<\/strong><br><br>\n\n    \u2022 Always build reusable components<br>\n    \u2022 Never create duplicates<br>\n    \u2022 Always reuse existing components<br>\n    \u2022 Decisions based on names, not visuals<br>\n    \u2022 Use EXACT naming from builder.io code<br><br>\n\n    <strong>Component Detection (STRICT)<\/strong><br><br>\n\n    \u2022 Extract component names from builder.io code<br>\n    \u2022 Compare with existing components<br><br>\n\n    Rules:<br><br>\n\n    \u2022 Name matches \u2192 SAME component<br>\n    \u2022 Name does not exist \u2192 NEW component<br>\n    \u2022 No guessing based on visuals<br>\n    \u2022 Only use explicit naming<br><br>\n\n    <strong>Variants vs Updates<\/strong><br><br>\n\n    \u2022 Existing component + new variant \u2192 ADD<br>\n    \u2022 New component \u2192 CREATE<br><br>\n\n    <strong>Variant Detection<\/strong><br><br>\n\n    \u2022 Derived from:<br><br>\n\n    \u2022 state<br>\n    \u2022 size<br>\n    \u2022 naming in builder.io code<br><br>\n\n    Rules:<br><br>\n\n    \u2022 Existing \u2192 UPDATE<br>\n    \u2022 New \u2192 ADD<br>\n    \u2022 Never invent<br><br>\n\n    <strong>Global Updates (STRICT)<\/strong><br><br>\n\n    \u2022 Always global<br>\n    \u2022 Never local overrides<br>\n    \u2022 Never duplicate instead of updating<br><br>\n\n    <strong>Reporting (MANDATORY)<\/strong><br><br>\n\n    \u2022 Updated components<br>\n    \u2022 Added variants<br>\n    \u2022 New components<br><br>\n\n    <strong>Component Structure<\/strong><br><br>\n\n    \u2022 Extract from builder.io code<br>\n    \u2022 Respect nesting<br>\n    \u2022 Do NOT flatten<br>\n    \u2022 Match EXACT structure<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>TOKENS (MANDATORY \u2014 FIRST STEP)<\/strong><br><br>\n\n    <strong>\u2757\ufe0fSTEP 1 \u2014 TOKENS (MANDATORY FIRST)<\/strong><br><br>\n\n    \u2022 You MUST define ALL tokens BEFORE building components<br>\n    \u2022 Tokens must be extracted from builder.io code<br>\n    \u2022 Tokens are NOT optional<br><br>\n\n    <strong>Token Rules<\/strong><br><br>\n\n    \u2022 \u2757\ufe0fNEVER use raw values in components<br><br>\n\n    \u2022 \u2757\ufe0fONLY use tokens<br><br>\n\n    \u2022 No hex values<br>\n    \u2022 No px values<br>\n    \u2022 No raw font sizes<br>\n    \u2022 No raw spacing<br><br>\n\n    \u2022 Use EXACT token naming from builder.io code<br>\n    \u2022 Do NOT rename tokens<br><br>\n\n    <strong>Implementation<\/strong><br><br>\n\n    \u2022 index.css \u2192 token definitions (source of truth)<br>\n    \u2022 tailwind.config.ts \u2192 token usage mapping<br><br>\n\n    <strong>Color Tokens<\/strong><br><br>\n\n    \u2022 braun_bg_1 \u2192 #402212<br>\n    \u2022 braun_bg_2 \u2192 #522C18<br>\n    \u2022 braun_logo_bg \u2192 #77462B<br>\n    \u2022 white \u2192 #EEDFD7<br>\n    \u2022 schwarz \u2192 #000000<br>\n    \u2022 gelb \u2192 #F98D09<br>\n    \u2022 gelb_star \u2192 #DEB236<br>\n    \u2022 lila \u2192 #8A38F5<br>\n    \u2022 lila_hover \u2192 #6A2ABD<br>\n    \u2022 gr\u00fcn \u2192 #34C759<br>\n    \u2022 gr\u00fcn_hover \u2192 #20AC43<br>\n    \u2022 beige \u2192 #B1826A<br>\n    \u2022 beige_copytext \u2192 #CFB9AE<br>\n    \u2022 beige_placeholder_text \u2192 #8F7263<br>\n    \u2022 beige_transparent \u2192 rgba(173,163,158,0.1)<br>\n    \u2022 lila_transparent \u2192 rgba(106,42,189,0.2)<br>\n    \u2022 lila_transparent_hover \u2192 rgba(106,42,189,0.4)<br>\n    \u2022 braun_wait \u2192 rgba(64,34,18,0.8)<br><br>\n\n    <strong>Gradient Tokens<\/strong><br><br>\n\n    \u2022 --gelb_lila: linear-gradient(180deg, #F98D09 0%, #8A38F5 100%)<br>\n    \u2022 --gradient_einsilbi: linear-gradient(180deg, #C1637F 11.06%, #8A38F5 100%)<br>\n    \u2022 --gradient_button: linear-gradient(90deg, var(--lila) 0%, #9646FF 100%)<br>\n    \u2022 --gradient_button_hover: linear-gradient(90deg, var(--lila_hover) 0%, #7333C8 100%)<br>\n    \u2022 --gradient_button_gruen_hover: linear-gradient(91deg, var(--gr\u00fcn_hover) 0.86%, #3DB75C 98.97%)<br>\n    \u2022 --gradient_button_gruen: linear-gradient(91deg, var(--gr\u00fcn) -3.81%, #63D37F 110.31%)<br><br>\n\n    <strong>Typo Tokens<\/strong><br><br>\n\n    <strong>Display:<\/strong><br>\n    \u2022 XXL \u2192 48\/56<br>\n    \u2022 XL \u2192 40\/42<br>\n    \u2022 L \u2192 32\/34<br>\n    \u2022 M \u2192 24\/27<br>\n    \u2022 S \u2192 20\/25<br>\n    \u2022 XS \u2192 17\/21<br>\n    \u2022 XXS \u2192 14\/17<br><br>\n\n    <strong>Text:<\/strong><br>\n    \u2022 Body \u2192 16\/150<br>\n    \u2022 L \u2192 24\/150<br>\n    \u2022 M \u2192 20\/150<br>\n    \u2022 S \u2192 14\/150<br><br>\n\n    <strong>Text Bold:<\/strong><br>\n    \u2022 L \u2192 20\/150<br>\n    \u2022 M \u2192 16\/150<br>\n    \u2022 S \u2192 14\/150<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>Responsive & Layout<\/strong><br><br>\n\n    <strong>Breakpoints<\/strong><br><br>\n\n    \u2022 S: max 479px<br>\n    \u2022 M: 480\u2013767px<br>\n    \u2022 L: 768px+<br><br>\n\n    <strong>Rules<\/strong><br><br>\n\n    \u2022 No horizontal scroll on mobile<br>\n    \u2022 Layout adapts to viewport<br>\n    \u2022 No height break<br><br>\n\n    <strong>Global Behavior (CRITICAL)<\/strong><br><br>\n\n    \u2022 Portrait only (no landscape)<br>\n    \u2022 No horizontal scroll<br>\n    \u2022 Keyboard:<br><br>\n\n    \u2022 visual only<br>\n    \u2022 layout shifts<br>\n    \u2022 input visible<br><br>\n\n    \u2022 Background:<br><br>\n\n    \u2022 braun_bg_1<br>\n    \u2022 applied globally<br>\n    \u2022 no white gaps<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>File Management<\/strong><br><br>\n\n    <strong>game_rules.md<\/strong><br><br>\n\n    \u2022 Add \/ update<br>\n    \u2022 No duplicates<br>\n    \u2022 Structured<br><br>\n\n    <strong>component_system.md<\/strong><br><br>\n\n    \u2022 Track:<br><br>\n\n    \u2022 components<br>\n    \u2022 variants<br>\n    \u2022 updates<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>Working Process<\/strong><br><br>\n\n    For every screen:<br><br>\n\n    1. Analyze builder.io code<br>\n    2. Extract tokens<br>\n    3. Define tokens (index.css + tailwind.config.ts)<br>\n    4. Extract components<br>\n    5. Implement components<br>\n    6. Apply:<br><br>\n\n    \u2022 update \/ variant \/ new<br><br>\n\n    7. Validate:<br><br>\n\n    \u2022 naming<br>\n    \u2022 variants<br>\n    \u2022 structure<br><br>\n\n    8. Apply responsive behavior<br>\n    9. No raw values<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>Implementation Rules<\/strong><br><br>\n\n    <strong>Components<\/strong><br><br>\n\n    \u2022 Exact naming<br>\n    \u2022 Reuse always<br>\n    \u2022 Variants via props<br>\n    \u2022 No duplicates<br>\n    \u2022 Extract nested<br>\n    \u2022 Extend, never recreate<br>\n    \u2022 Add:<br><br>\n\n    \u2022 data-component=\"ComponentName\"<br><br>\n\n    <strong>Tokens<\/strong><br><br>\n\n    \u2022 Only tokens<br>\n    \u2022 No raw values<br>\n    \u2022 No inline raw styles<br><br>\n\n    <strong>Breakpoints<\/strong><br><br>\n\n    \u2022 S \/ M \/ L exact<br>\n    \u2022 Must match builder.io code<br><br>\n\n    <strong>Layout<\/strong><br><br>\n\n    \u2022 No assumptions<br>\n    \u2022 Match design exactly<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>Validation (MANDATORY)<\/strong><br><br>\n\n    \u2022 Components correct<br>\n    \u2022 Variants correct<br>\n    \u2022 Structure correct<br><br>\n\n    If not:<br><br>\n\n    \u2022 state missing<br>\n    \u2022 state unclear<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>FILE 2: component_system.md<\/strong><br><br>\n\n    \u2022 Component: [Name]<br>\n    \u2022 Variants:<br><br>\n\n    \u2022 size<br>\n    \u2022 state<br><br>\n\n    \u2022 Notes<br>\n    \u2022 Updates:<br><br>\n\n    \u2022 UPDATE: description<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>FILE 3: game_rules.md<\/strong><br><br>\n\n    \u2022 SCREEN [NUMBER] \u2014 [NAME]<br>\n    \u2022 Rule:<br><br>\n\n    \u2022 Logic<br>\n    \u2022 UI Behavior<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>IMMEDIATE REFACTOR TASK<\/strong><br><br>\n\n    \u2022 Replace ALL colors with tokens<br>\n    \u2022 Replace ALL typography with tokens<br>\n    \u2022 Remove ALL raw values<br>\n    \u2022 Fix layout (scroll, keyboard, portrait)<br>\n    \u2022 Apply global background<br>\n    \u2022 Update components (naming, variants, reuse)<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>FINAL RULE<\/strong><br><br>\n\n    \u2022 Always use these files<br>\n    \u2022 Always update them<br>\n    \u2022 Always enforce them<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    bitte f\u00fcge das hier noch sinnvoll ein.. keine dopplungen \u270c\ufe0f<br><br>\n\n    bitte plane vorher wie es schaffst, keine einzige anweisung zu vergessen!. alle meine anweisungen sollen zu 100% im text vorkommen. ich brauche einen einzigen copierbaren text f\u00fcr Lovable AI.<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>Typography Token Visibility (MANDATORY)<\/strong><br><br>\n\n    \u2022 Ensure all components reflect the typography tokens defined in builder.io code<br>\n    \u2022 Do NOT modify unrelated styles while doing this<br><br>\n\n    <strong>DOM Visibility<\/strong><br><br>\n\n    For EVERY component using typography:<br><br>\n\n    \u2022 Add:<br>\n    \u2022 data-typo-token=\"[type]-[size]\"<br><br>\n\n    Examples:<br><br>\n\n    \u2022 display-xl<br>\n    \u2022 text-m<br>\n    \u2022 text-bold-s<br><br>\n\n    <strong>Rules<\/strong><br><br>\n\n    \u2022 The attribute must match the token used in the component<br>\n    \u2022 This is for visibility only (no style changes)<br>\n    \u2022 Do NOT replace or modify color classes<br>\n    \u2022 Do NOT modify existing styling logic<br><br>\n\n    <strong>Validation<\/strong><br><br>\n\n    \u2022 Typography tokens match builder.io code<br>\n    \u2022 No outdated values remain<br>\n    \u2022 DOM attributes are correctly applied<br>\n    \u2022 No color styles are affected<br><br>\n\n    <strong>Report<\/strong><br><br>\n\n    \u2022 Components updated with data-typo-token<br>\n    \u2022 Any mismatches found<br><br>\n\n  <\/div>\n<\/div>\n<\/div><div class=\"fusion-text fusion-text-54 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:60px;--awb-margin-bottom:10px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>The following files \ud83d\udc47 are now stored in lovable, which I can reference in any future prompt.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:60px;--awb-margin-bottom:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-26 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1832\" height=\"1710\" title=\"lovable instructions.md\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.30.48.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.30.48.png\" alt class=\"lazyload img-responsive wp-image-5114\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271832%27%20height%3D%271710%27%20viewBox%3D%270%200%201832%201710%27%3E%3Crect%20width%3D%271832%27%20height%3D%271710%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.30.48-200x187.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.30.48-400x373.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.30.48-600x560.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.30.48-800x747.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.30.48-1200x1120.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.30.48.png 1832w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-27 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1842\" height=\"1710\" title=\"game_rules.md\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.35.20.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.35.20.png\" alt class=\"lazyload img-responsive wp-image-5116\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271842%27%20height%3D%271710%27%20viewBox%3D%270%200%201842%201710%27%3E%3Crect%20width%3D%271842%27%20height%3D%271710%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.35.20-200x186.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.35.20-400x371.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.35.20-600x557.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.35.20-800x743.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.35.20-1200x1114.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-14.35.20.png 1842w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-28 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1712\" height=\"1712\" title=\"component-system.md\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-15.10.27.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-15.10.27.png\" alt class=\"lazyload img-responsive wp-image-5119\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271712%27%20height%3D%271712%27%20viewBox%3D%270%200%201712%201712%27%3E%3Crect%20width%3D%271712%27%20height%3D%271712%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-15.10.27-200x200.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-15.10.27-400x400.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-15.10.27-600x600.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-15.10.27-800x800.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-15.10.27-1200x1200.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-06-um-15.10.27.png 1712w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-55 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:120px;--awb-margin-bottom:0px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>\ud83c\udfaf From here on, each new prompt simply references these files and tells the AI to:<\/p>\n<p><span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">\u2192 read them again<br \/>\n\u2192 follow them strictly<br \/>\n\u2192 update them if needed<\/span><\/span><\/p>\n<p>Now the question is:<br \/>\n\ud83d\udc49 Is this enough to make the system stable over time?<\/p>\n<\/div><div class=\"lovable-chat\">\n\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/mandywebsite-cpws3tmldc.live-website.com\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  \n\n\n<div class=\"chat-row full\">\n  <div class=\"bubble large user\">\n\n    \u2022 You are implementing a new screen based on Builder.io code.<br>\n    \u2022 (single source of truth)<br><br>\n\n    \u2022 You MUST strictly follow:<br>\n    \u00a0\u00a0\u2022 instructions.md (read it again before implementing)!<br>\n    \u00a0\u00a0\u2022 Read instructions.md carefully<br>\n    \u00a0\u00a0\u2022 Follow ALL rules from instructions.md<br>\n    \u00a0\u00a0\u2022 Apply all rules to this screen<br><br>\n\n    <strong>Validation:<\/strong><br><br>\n\n    \u2022 Update component_system.md and game_rules.md<br>\n    \u2022 Tell me what you did.<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>SCREEN 02 \u2014 Player 1 invite a friend<\/strong><br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>CONTEXT<\/strong><br><br>\n\n    \u2022 Who is the user: Player 1 (already entered name + selected sex in Screen 1)<br>\n    \u2022 What is happening: Player 1 wants to invite Player 2 via link<br>\n    \u2022 Goal of this screen: Share invite link and wait for Player 2 to join<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>GAME RULES<\/strong><br><br>\n\n    \u2022 Player 1 comes from Screen 1 via \"Spiel Neu Los\"<br>\n    \u2022 Hero Header uses state: \"Wait\"<br>\n    \u2022 the right UserBadge MUST show opposite sex-variant of Player 1<br>\n    \u2022 the right UserBadge rotates continuously (360\u00b0 loop) until Player 2 joins<br><br>\n\n    <strong>Link kopieren<\/strong><br><br>\n\n    \u2022 Copies invite link<br>\n    \u2022 Shows success message (top-left)<br>\n    \u2022 Message disappears after 2 seconds<br><br>\n\n    <strong>Freund einladen<\/strong><br><br>\n\n    \u2022 Opens native share dialog (iOS + Android)<br>\n    \u2022 Shares invite link<br><br>\n\n    <strong>Navigation<\/strong><br><br>\n\n    \u2022 Invite link leads Player 2 to SCREEN 03<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>BUTTON STATES (HOVER)<\/strong><br><br>\n\n    \u2022 Primary + Secondary buttons must have hover states (all breakpoints)<br><br>\n\n    <strong>M&L Secondary<\/strong><br>\n    {\"absoluteHtml\":[{\"id\":\"e4bvilcw4awmnnaw2ns\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/e4bvilcw4awmnnaw2ns\",\"fileName\":\".figma-design-Buttons.figma.html\"}]}<br><br>\n\n    <strong>S Secondary<\/strong><br>\n    {\"absoluteHtml\":[{\"id\":\"crikxqcc5momnnb2rhl\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/crikxqcc5momnnb2rhl\",\"fileName\":\".figma-design-Buttons.figma.html\"}]}<br><br>\n\n    <strong>M&L Primary<\/strong><br>\n    {\"absoluteHtml\":[{\"id\":\"dsftzqnpsunmnnaxkls\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/dsftzqnpsunmnnaxkls\",\"fileName\":\".figma-design-Buttons.figma.html\"}]}<br><br>\n\n    <strong>S Primary<\/strong><br>\n    {\"absoluteHtml\":[{\"id\":\"ppazlmwr61fmnnb1pz1\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/ppazlmwr61fmnnb1pz1\",\"fileName\":\".figma-design-Buttons.figma.html\"}]}<br><br>\n\n    <br>\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013<br><br>\n\n    <strong>BUILDER.IO CODE<\/strong><br><br>\n\n    <strong>Breakpoint S<\/strong><br><br>\n\n    \u2022 02_freund_einladen_S<br>\n    {\"absoluteHtml\":[{\"id\":\"8s4ee9ck01gmnncmo5w\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/8s4ee9ck01gmnncmo5w\",\"fileName\":\".figma-design-02_freund_einladen_S.figma.html\"}]}<br><br>\n\n    \u2022 02_S_player clicked \"link kopieren\"<br>\n    {\"absoluteHtml\":[{\"id\":\"h42gtcwgl6mnncn5eq\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/h42gtcwgl6mnncn5eq\",\"fileName\":\".figma-design-02_S_player clicked \\\"link kopieren\\\".figma.html\"}]}<br><br>\n\n    <br>\n\n    <strong>Breakpoint M<\/strong><br><br>\n\n    \u2022 02_freund_einladen_M<br>\n    {\"absoluteHtml\":[{\"id\":\"rr84s3vdsjhmnnclnwh\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/rr84s3vdsjhmnnclnwh\",\"fileName\":\".figma-design-02_freund_einladen_M.figma.html\"}]}<br><br>\n\n    \u2022 02_M_ player clicked \"link kopieren\"<br>\n    {\"absoluteHtml\":[{\"id\":\"hsmerg8qfsumnncm4d9\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/hsmerg8qfsumnncm4d9\",\"fileName\":\".figma-design-02_M_ player clicked \\\"link kopieren\\\".figma.html\"}]}<br><br>\n\n    <br>\n\n    <strong>Breakpoint L<\/strong><br><br>\n\n    \u2022 02_freund_einladen_L<br>\n    {\"absoluteHtml\":[{\"id\":\"hfri96lb7u9mnnckp6f\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/hfri96lb7u9mnnckp6f\",\"fileName\":\".figma-design-02_freund_einladen_L.figma.html\"}]}<br><br>\n\n    \u2022 02_L_ player clicked \"link kopieren\"<br>\n    {\"absoluteHtml\":[{\"id\":\"diutwfumll4mnncl8af\",\"url\":\"\/api\/v1\/file\/assets\/TEMP\/diutwfumll4mnncl8af\",\"fileName\":\".figma-design-02_L_ player clicked \\\"link kopieren\\\".figma.html\"}]}\n\n  <\/div>\n<\/div>\n\n\n<\/div><div class=\"fusion-title title fusion-title-26 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#90dfb6;--awb-margin-top:200px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\" id=\"small_changes\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">How to Enforce Global Changes<\/h3><\/div><div class=\"fusion-text fusion-text-56 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>I wanted him to change the UserBadge Component due the border gradient and layer issue. This was my perfectely working Prompt\u00a0 \ud83d\udc47<\/p>\n<\/div><div class=\"lovable-chat\">\n\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/mandywebsite-cpws3tmldc.live-website.com\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  \n\n\n<div class=\"chat-row full\">\n  <div class=\"bubble large user\">\n\n    You are modifying the component: UserBadge<br><br>\n\n    You MUST strictly follow instructions.md<br><br>\n\n\u2022 You\u00b4re a CSS pro.<br>\n\u2022 If anything is unclear or you can\u00b4t find the color token, please let me know before you start building!\n\n<br><br>\n\n    <strong>GLOBAL COMPONENT CHANGE (CRITICAL)<\/strong><br>\n    \u2022 Update the component: UserBadge<br>\n    \u2022 Apply this change to the variant:<br>\n    \u00a0\u00a0\u2022 state: wait<br>\n    \u2022 This change MUST affect ALL usages of this component across the entire app<br><br>\n\n    <strong>VISUAL STRUCTURE (MANDATORY)<\/strong><br>\n    \u2022 The UserBadge (state: wait) MUST be built using 2 separate layers:<br><br>\n\n    \u2022 1. OUTER LAYER (BORDER)<br>\n    \u00a0\u00a0\u2022 MUST use gradient token:<br>\n    \u00a0\u00a0\u00a0\u00a0\u2022 var(--gelb_lila)<br>\n    \u00a0\u00a0\u2022 MUST be implemented as border via background (border-box)<br>\n    \u00a0\u00a0\u2022 MUST remain fully visible and saturated<br><br>\n\n    \u2022 2. INNER LAYER (CONTENT)<br>\n    \u00a0\u00a0\u2022 Contains:<br>\n    \u00a0\u00a0\u00a0\u00a0\u2022 avatar image<br>\n    \u00a0\u00a0\u00a0\u00a0\u2022 brown overlay:<br>\n    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2022 hsla(var(--braun-wait) \/ 0.8)<br>\n    \u00a0\u00a0\u2022 MUST be a separate inner element<br>\n    \u00a0\u00a0\u2022 MUST NOT affect the border<br><br>\n\n    <strong>STRICT RULES<\/strong><br>\n    \u2022 The gradient border MUST NOT be dimmed, blended or affected by any overlay<br>\n    \u2022 The overlay MUST NOT be applied on the same element as the gradient<br>\n    \u2022 The gradient MUST NOT be merged with any other background layer<br><br>\n\n    <strong>FORBIDDEN<\/strong><br>\n    \u2022 Do NOT apply overlay and gradient on the same element<br>\n    \u2022 Do NOT reduce opacity of the gradient<br>\n    \u2022 Do NOT simulate the border using a single background<br><br>\n\n    <strong>IMPLEMENTATION REQUIREMENT<\/strong><br>\n    \u2022 Use layered structure:<br><br>\n\n    \u2022 Outer container:<br>\n    \u00a0\u00a0\u2022 background: var(--gelb_lila) border-box<br><br>\n\n    \u2022 Inner element:<br>\n    \u00a0\u00a0\u2022 avatar<br>\n    \u00a0\u00a0\u2022 overlay<br><br>\n\n    <strong>VALIDATION<\/strong><br>\n    \u2022 Update component_system.md<br>\n    \u2022 Ensure ALL instances of UserBadge (state: wait) use this structure<br>\n    \u2022 No duplicated or overridden versions allowed<br>\n    \u2022 Tell me what you changed\n\n  <\/div>\n<\/div>\n\n\n<\/div><div class=\"fusion-title title fusion-title-27 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#90dfb6;--awb-margin-top:200px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\" id=\"small_changes\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">How to hand over complex components<\/h3><\/div><div class=\"fusion-text fusion-text-57 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>While implementing the first game chat screen, it became clear that the player badge at the top\u2014the most complex component in the entire game\u2014was not implemented correctly.<\/p>\n<\/div><div class=\"fusion-text fusion-text-58 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>Important structural <span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">details and variant logic were not interpreted properly via the builder.io code.<\/span><\/span><\/p>\n<p>\ud83d\udc47 See the result below.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-29 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1756\" height=\"852\" title=\"complex components\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.18.12.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.18.12.png\" alt class=\"lazyload img-responsive wp-image-5176\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271756%27%20height%3D%27852%27%20viewBox%3D%270%200%201756%20852%27%3E%3Crect%20width%3D%271756%27%20height%3D%27852%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.18.12-200x97.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.18.12-400x194.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.18.12-600x291.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.18.12-800x388.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.18.12-1200x582.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.18.12.png 1756w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-59 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><strong>The FIX:<\/strong><br \/>\nSource: <span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">single Builder.io Links per variant <\/span> <\/span><br \/>\nVariants: Other: 3 Variants: 1. Role: (guess\/explain) 2. Size (M&amp;L\/S) 3. State (Default\/Club_active\/Club_strike) &#8211;&gt; role:explain can use all states from State ((Default\/Club_active\/Club_strike); role:guess uses only the default state<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-30 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"2332\" height=\"554\" title=\"builder.io link differences\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.28.56.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.28.56.png\" alt class=\"lazyload img-responsive wp-image-5178\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272332%27%20height%3D%27554%27%20viewBox%3D%270%200%202332%20554%27%3E%3Crect%20width%3D%272332%27%20height%3D%27554%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.28.56-200x48.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.28.56-400x95.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.28.56-600x143.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.28.56-800x190.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.28.56-1200x285.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-16.28.56.png 2332w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-60 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p><b>\ud83d\udc49<\/b>\u00a0<span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\"> Here, the only additional issue that needs to be resolved is the well-known problem with the Z-index<\/span><\/span><\/p>\n<\/div><section class=\"outcomes-wrap\" id=\"outcomesWrap\">\n\n  <div class=\"outcomes-cards\" id=\"outcomesCards\">\n\n    <!-- LEARNING 14 \u2014 BLUE -->\n    <article class=\"outcome-card outcome-card--blue\">\n\n      <div class=\"outcome-card__pills\">\n        <span\n          class=\"mandy-pill mandy-pill--light-blue notranslate\"\n          translate=\"no\"\n        >\n          Learning 14\n        <\/span>\n      <\/div>\n\n      <h3 class=\"outcome-card__title\">\n        \ud83d\udc49 Builder.io Code Works Best per Component\n      <\/h3>\n\n      <ul class=\"outcome-card__bullets\">\n        <li>\n          Full-screen inputs are useful for speed, but complex components require isolated, detailed input to be interpreted correctly.\n        <\/li>\n        <li>\n          For complex components on a screen, pass Builder.io Code per component rather than per screen.\n        <\/li>\n      <\/ul>\n\n    <\/article>\n\n  <\/div>\n\n<\/section><\/div><\/div><\/div><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-14 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-28 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#90dfb6;--awb-margin-top:200px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\" id=\"small_changes\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">How to force him to use already implemented variants<\/h3><\/div><div class=\"fusion-text fusion-text-61 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>When working with already implemented components, it\u2019s not enough to define variants\u2014you must explicitly enforce that the correct variant is rendered in each state.<br \/>\n\ud83d\udc47 this prompt part additional to the builder.io code of the whole screen was not enough<\/p>\n<p>\ud83d\udfe1 STATE 1 \u2014 warten_auf_spieler2<br \/>\nPlayerBadge behavior&#8230;<br \/>\nstate: default &#8212; &#8220;userBadge&#8221;: wait<\/p>\n<p>WAIT behavior<br \/>\n&#8220;userBadge&#8221;: wait (Player_02) MUST:<\/p>\n<ul>\n<li>rotate 360\u00b0<\/li>\n<li>smooth animation<\/li>\n<li>loop continuously<\/li>\n<li>until Player_02 joins<\/li>\n<\/ul>\n<\/div><div class=\"fusion-text fusion-text-62 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>After (Fix):<br \/>\n<span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">I added a strict state-to-UI binding:<\/span><\/span><br \/>\n\u201cIn state X, component Y MUST render variant Z. This is required and must be visible.<\/p>\n<p>\ud83d\udc47 Only now it has used the \u201cwait\u201d variant of the \u201cuserBadge\u201d component, which was already known. <\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;--awb-max-width:1000px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-31 hover-type-none\" style=\"border-radius:20px;\"><img decoding=\"async\" width=\"1792\" height=\"442\" title=\"Bildschirmfoto 2026-04-09 um 17.16.38\" src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-17.16.38.png\" data-orig-src=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-17.16.38.png\" alt class=\"lazyload img-responsive wp-image-5181\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271792%27%20height%3D%27442%27%20viewBox%3D%270%200%201792%20442%27%3E%3Crect%20width%3D%271792%27%20height%3D%27442%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-17.16.38-200x49.png 200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-17.16.38-400x99.png 400w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-17.16.38-600x148.png 600w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-17.16.38-800x197.png 800w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-17.16.38-1200x296.png 1200w, https:\/\/mandyullmann.com\/wp-content\/uploads\/2026\/04\/Bildschirmfoto-2026-04-09-um-17.16.38.png 1792w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 1200px\" \/><\/span><\/div><\/div><\/div><\/div><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-15 fusion_builder_column_inner_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-29 fusion-sep-none fusion-title-text fusion-title-size-three h3_title_features\" style=\"--awb-text-color:#90dfb6;--awb-margin-top:200px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:48px;\" id=\"small_changes\"><h3 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Raleway&quot;;font-style:normal;font-weight:600;margin:0;font-size:1em;line-height:150%;\">When you think the AI \u201clies\u201d to you \u2014 and it\u2019s actually your fault<\/h3><\/div><div class=\"fusion-text fusion-text-63 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>At some point in this process, I kept feeling like the AI was straight up lying to me. <span style=\"color: #1c1c1c;\"><span style=\"background-color: #26de82;\">It said something was fixed \u2014 and the DOM clearly showed it wasn\u2019t.<\/span><\/span><\/p>\n<\/div><div class=\"fusion-text fusion-text-64 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>But looking closer, there was always a reason. Every \u201cwrong\u201d output actually followed a rule I had defined earlier.<\/p>\n<p>\ud83d\udc49 It didn\u2019t ignore my instructions.<br \/>\n\ud83d\udc49 It followed them more strictly than I expected.<\/p>\n<\/div><div class=\"fusion-text fusion-text-65 fusion-text-no-margin p1\" style=\"--awb-font-size:32px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:60px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>One sentence broke my system (and made the AI ignore me): It turned out, a single \u201cMUST\u201d in my instructions quietly overruled everything I said.<\/p>\n<\/div><div class=\"fusion-text fusion-text-66 fusion-text-no-margin p1\" style=\"--awb-font-size:24px;--awb-line-height:170%;--awb-text-color:#d9d9d9;--awb-margin-top:0px;--awb-margin-bottom:20px;--awb-text-font-family:&quot;Raleway&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>While reviewing a new component, we noticed that the typotoken did not match the figma\/builder.io code. See the conversation below \ud83d\udc47<\/p>\n<\/div><div class=\"lovable-chat\">\n\n  <!-- HEADER -->\n  <div class=\"chat-header\">\n    <div class=\"logo\">\n      <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/mandywebsite-cpws3tmldc.live-website.com\/wp-content\/uploads\/2026\/03\/lovable_logo.png\" alt=\"Lovable\">\n    <\/div>\n  <\/div>\n\n  <!-- CHAT START TIME -->\n\n\n  <!-- CHAT CONTENT -->\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      - look at our \"bubble\" component. <br>\n- Find these 2 variants: \"emoji\" and \"emoji wort\"<br>\n- tell me which color token in different sizes are currently implemented\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n        Typograpy (all Sizes): <br><br> \nS (<480px): typo-bold-l\t20px\/150%\/700<br><br>  \nM (\u2265 480px)\ttypo-bold-xl 24px\/150%\/700<br> <br> \nL (\u2265 768px)\ttypo-bold-xl 24px\/150%\/700\n    <\/div>\n  <\/div>\n  \n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n     Okay, that\u00b4s absolutely right! But as you can see in the screenshot, you\u00b4re currently using <br><br>\n- \u201ctypo-bold-l\u201d for sizes M&L. <br><br>\nThat`s wrong. You need to use \u201ctypo-bold-xl\u201d for sizes M and L. Change that for both versions (\u2018Emoji\u2019 and \u201cEmoji-Word\u201d).\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Small apps usually stay within the free tier.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Okay \u2014 let\u2019s build a 2-player PWA version with a Lovable Cloud Backend.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Game rules: 2 players join via a link, one starts the game and invites the other. Then both are in a live chat.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      One player gets a word and has to explain it using only one-syllable words.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n      Everything happens live in the chat, you can type or even speak, and the other person sees single words as bubbles in chat instantly.\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\n    If Player 1 uses a word with more than one syllable, the system should highlight that word. The other player can then award a penalty point by swinging the club, and Player 1 loses a point. A new word appears, and the round continues as long as the timer is still running. \n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\nIf the word is guessed correctly, the guesser gets one point and the explainer gets three points. Here, too, a new word appears for the explainer as long as time hasn\u2019t run out. The goal is to score as many points as possible over the course of four rounds. Both players take turns explaining and guessing. \n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      For that, I\u00b4ll need your ElevenLabs API key. Do you already have one, or should I show you how to get one?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row right\">\n    <div class=\"bubble\">\nHigh accuracy when speaking into the mic and ensuring that the right word is actually recognized is absolutely crucial in this game. But do we really need ElevenLabs for a simple speech-to-text feature? Is it free?\n    <\/div>\n  <\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n  Yes, for higher accuracy with ElevenLabs Scribe, you need an API key.\n\nThe difference:\n\nWeb Speech API (free): ..\nElevenLabs Scribe (API key required): ...\nFor a word game where every word must be recognized correctly, the higher accuracy makes sense.\n    <\/div>\n  <\/div>\n\n <div class=\"chat-row right\">\n    <div class=\"bubble\">\nOK, here\u00b4s the API key for speech-to-text and also for sound effects for later.\n    <\/div>\n  <\/div>\n\n\n <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      Got it. Building the full game now.\n    <\/div>\n  <\/div>\n\n  <!-- TIME BREAK -->\n  <div class=\"chat-time\">11:44<\/div>\n\n  <div class=\"chat-row left\">\n    <div class=\"text ai\">\n      <strong>Game ready:<\/strong> Real-time, scoring, timer and word validation included.\n    <\/div>\n  <\/div>\n\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":5198,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"portfolio_category":[67,49,72,65,69,66],"portfolio_skills":[],"portfolio_tags":[33,32,31],"class_list":["post-4886","avada_portfolio","type-avada_portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio_category-ai-assisted-development","portfolio_category-design-system","portfolio_category-design-to-code","portfolio_category-frontend-html-css","portfolio_category-mobile-web-app","portfolio_category-prompt-engineering","portfolio_tags-alles-klar","portfolio_tags-jo","portfolio_tags-test"],"_links":{"self":[{"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/avada_portfolio\/4886","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/avada_portfolio"}],"about":[{"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/types\/avada_portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/comments?post=4886"}],"version-history":[{"count":421,"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/avada_portfolio\/4886\/revisions"}],"predecessor-version":[{"id":7288,"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/avada_portfolio\/4886\/revisions\/7288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/media\/5198"}],"wp:attachment":[{"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/media?parent=4886"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/portfolio_category?post=4886"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/portfolio_skills?post=4886"},{"taxonomy":"portfolio_tags","embeddable":true,"href":"https:\/\/mandyullmann.com\/de\/wp-json\/wp\/v2\/portfolio_tags?post=4886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}