Copilot as My Implementer — From Stitch HTML to React Components After the Stitch phase, there were five HTML reference files sitting in . Each one showed what a page should look like — clean design, good contrast, well-structured layout. But the actual JSLipi frontend is a React app with Tailwind CSS and a global SCSS theme file. There was a gap between the static HTML reference and the running application. Closing that gap is exactly where GitHub Copilot earns its place in this workflow. The Reference Files as Design Specs The files in were treated the same way a developer would treat a design spec from a designer: Each file contained the full HTML structure and CSS for one page. Colors were expressed as hex values or CSS variables. Spacing used explicit px or rem values. The class naming was Stitch's own — not Tailwind, not BEM — just descriptive class names like , , . This is the raw material that Copilot was given. How Copilot Was Used The approach was simple: open Copilot Chat in VS Code, reference the HTML file, and describe what needed to happen. For example, to update the theme variables in : > "Reference . Update the CSS custom properties in to match the colors used in this design. Maintain both dark and light mode variable sets." Copilot read the HTML file, extracted the color values, and updated the file with mapped CSS variables: The visual intent from Stitch's design transferred directly into the app's theme system. Updating Tailwind Classes in Components After the theme variables were in place, the component JSX needed to be updated so the Tailwind classes matched the new design. For the blog card component, the prompt was: > "Reference . Update the blog card component in to match the card structure in this design. Use Tailwind classes where possible, and reference CSS variables from for color values." Copilot mapped the HTML card structure to component JSX, replacing hardcoded colors like with theme-aware classes like , and updating spacing, border-radius, and shadow classes to match what Stitch had expressed in the design. This is the kind of work that would otherwise take hours of manual comparison — reading the HTML, looking at the component, figuring out the mapping, making the change, refreshing the browser, noticing something is off, repeating. With Copilot doing the first-pass translation, the cycle compressed significantly. What Copilot Actually Changed Across the full implementation, Copilot touched three categories of changes: Category What Changed ---------- ------------- Theme variables — color palette, bg, text, border, accent values for both modes Tailwind classes Component files — spacing, bg, text, border, shadow classes updated to match Stitch reference JSX structure Some components were restructured — section ordering, added wrapper divs, updated heading hierarchy Copilot was not given free rein to rewrite everything. Each session was focused: one file, one reference, one clear instruction. This kept the changes reviewable. Every suggestion from Copilot was checked against the reference HTML before accepting. The Honest Part Copilot's output needed review. Not every Tailwind class mapping was right. A few times, Copilot generated classes that did not exist in the project's Tailwind config. Occasionally, it interpreted a spacing value from the HTML too literally and produced pixel-for-pixel matches that looked wrong in context. The developer's job in this workflow is still active. Copilot is fast at translation work, but the judgment calls — "this looks right but feels slightly off in dark mode", "this card shadow is too heavy on mobile" — those are human decisions. The productivity gain is real. The cognitive load of reading HTML and manually converting it to JSX and Tailwind is just tedious work. Copilot handles that tedium well. The actual design thinking — knowing when something looks right — remains yours. ✅ Summary The Stitch HTML files in were used as direct design references for Copilot. Through focused prompts referencing specific HTML files, Copilot updated theme variables, translated Tailwind class choices across components, and restructured JSX to match the Stitch layouts. The result was a systematic, reviewable implementation process where Stitch handled design thinking and Copilot handled the translation work.