Pixel Pal : Your Design Companion

From brand palettes to pixel-perfect responsiveness, Pixel Pal is the AI secret weapon for every web creator.

Comment

Inspiration

  • What inspired us was seeing people our age have the courage to create startups, but also recognizing the potential downsides they can face. Passion should be a leading factor. We felt that when financial situations can slow someone down, especially those eager to start their own business, making a free extension to help with design for these companies could be great.

What it does

Our Ai-Powered Chrome extension acts a design companion for your websites, providing feedback on digital accessibility (WCAG), design principles, and user workflows (how users navigate the website)

We implemented three separate agents: our design agent, accessibility agent, and web analysis agent. It provides a live solution, creating an affordable Chrome extension. Download it, and it will give you live feedback on areas for improving your design. It's a design companion utilized by developers, designers, students, and many more. As a user designs their idea, this extension ensures that the design adheres to accessibility standards, design principles and requirements, and any specific goal or idea the user is aiming to achieve. Because this solution is implemented as an extension, it allows the user to automatically extract branding guidelines from existing websites, helping designers get inspiration, guidelines from deployed personal portfolios, and analyze competitor branding. This ensures that the user receives the best feedback on their design as fast as possible.

How we built it

Pixel Pal was built on two key components:

  • It was built on a combination of web languages such as Python, JavaScript, HTML, and CSS.
  • Google's Gemini AI helped us refine our code for continuous improvement and was a great help in detecting and fixing any bugs.

Challenges we ran into

  • We struggled intertwining all three agents with each other.
  • We had duplicate lines of code.
  • We struggled merging code due to working on different laptops.

Accomplishments that we're proud of

  • Being able to functionally display the extension on all websites.
  • Making it accessible on Mac and Windows

What we learned

  • We learned that merging on Visual Studio Code through GitHub is confusing and messy.
  • We learned how to restart instead of quitting.
  • Due to this being our first hackathon, we learned how to step out of our comfort zone and collaborate with new people.
  • We learned to ask for help from mentors.

What's next for Pixel Pal : Your Design Companion

  • VideoStudio Code Extension
  • Users can stay on track by establishing their preferred style and accessibility requirements right at the start of the design. Allowing Pixel Pal to provide guidance towards the final product.
  • Eventually, it will be accessible and used for the creation of video games, movies, animations, and digital media.
Share this project:

Updates