Brownie Unit Website
Freelance Project - 2026
I designed and developed a website for 12th Bangor Brownies to help encourage girls to join, showcase the activities they can partake in and help parents with registration information.
To design the website, I used Figma Make to explore design concepts, refine the layout and visual identity as well as manually updating the copy to create a playful, welcoming experience inspired by the Girlguiding Brownies brand.
I then developed the website in VS Code, using Figma MCP to support design-to-code implementation and GitHub Copilot to assist with development. Throughout this process I also considerated SEO and AEO and these can be used to help local parents find relevant information.
This project allowed me to explore how AI-assisted tools can accelerate the journey from design concept to functional website while maintaining a focus on usability, accessibility and design quality.
The Design Process
The brief was to create a one to two page website which showcased 12th Bangor Brownies, highlighting the activities and experiences available to girls and providing parents with essential information in a clear, welcoming and engaging format.
This included introducing the unit, showcasing photographs of activities, answering common questions and explaining how to join.
To organise the content, I developed a sitemap to structure the information into sections, creating a straightforward user journey that guides parents from discovering the unit to understanding what Brownies offers and how to register their daughter.
For the websites visual design and branding, I followed the official Girlguiding Brownie brand guidelines, incorporating playful typography, bright colours and engaging imagery to create a fun, child-friendly identity, while remaining accessible and easy to use across devices.
Once I had established these requirements, I developed a detailed prompt for Figma Make to generate an initial design concept. This allowed me to use AI to explore the layout and visual direction while ensuring the design aligned with the project's objectives and user needs.
Following the initial prompt and AI design generation, I continued to refine my concept by iteratively prompting Figma Make to bring the website closer to the project requirements. I focused on improving spacing and padding to create a more balanced layout and consistency throughout, strengthening visual hierarchy to guide users through the content and refining typography to improve readability and consistency.
I also manually adjusted the layout and positioning of items to create a clearer content structure, making sure key information and calls to action were easy to identify. I continuously evaluated each section to ensure it aligned with the requirements and made any adjustments needed to usability, accessibility and visual consistency while maintaining the playful identity of the Brownies brand.
In order to ensure I maintained a consistent, friendly tone of voice throughout the website, I reviewed and refined the website’s copy including headings, subheadings, body text and calls to action. Alongside this I also used ChatGPT to review and incorporate SEO and AEO principles by refining the copy, naturally integrating relevant local keywords and structuring content around common questions parents may ask. This helped ensure the content remained engaging and accessible while making key information easier for search engines and AI-powered answer tools to understand.
The Creation Process
Once the designs were finalised in Figma, I moved into VS Code to develop the website using HTML and CSS. I used Figma MCP to bring my designs into the development workflow, alongside GitHub Copilot to generate code and make refinements through natural-language prompts.
Using the Figma Model Content Protocol (MCP) within VS code, I could connect my designs to the development environment, enabling me to select and transfer specific Figma designs and elements as a reference for generating the corresponding HTML and CSS. This is really useful as it helped me to bridge the gap between the visual design and its implementation.
Alongside this, I used GitHub Copilot within VS Code to support the development process, as I could use natural-language prompts to refine the generated code and make adjustments whenever the implemented design did not fully match my original design.
This allowed me to iterate on layouts, spacing and styling, progressively bringing the coded website closer to my Figma designs. Combining these AI-assisted tools helped streamline the transition from design to development while giving me greater insight into how visual decisions translate into code.
While AI tools are a great asset and help accelerate the development process, they could not also replicate my original designs accurately or resolve every issue I had. I therefore manually reviewed and refined by HTML and CSS code to address any inconsistencies which occurred such as broken image and icon links, incorrect colours and improve precise spacing and padding
This iterative process allowed me to identify where AI-generated code fell short, troubleshoot issues and make targeted improvements to bring the final website closer to my Figma designs. It reinforced the importance of combining AI-assisted development with hands-on coding, critical evaluation and attention to detail to achieve a high-quality result.
The Final Product
The final website closely reflects my original Figma designs, bringing the playful visual identity of 12th Bangor Brownies to life through bold typography, vibrant colours, engaging photography and distinctive decorative elements. The responsive layout, clear navigation and prominent calls to action create a welcoming experience, helping parents understand what Brownies offers and how to register their daughter.
I found this project really valuable as I expanded my skillset beyond UX and visual design into website development. It helped me to gain hands-on experience using AI-assisted tools including Figma MCP and GitHub Copilot to translate my designs into code, while strengthening my HTML and CSS knowledge through manual refinements and troubleshooting.
I also learned and explored how SEO and AEO principles can improve content structure and discoverability. Most importantly, I learned that while AI can accelerate the design-to-development process, achieving a polished result still requires critical thinking, attention to detail and a strong understanding of the original design.
I have gained confidence in taking a concept from initial design through to a functional website, combining existing design skills with new technical capabilities.