Vibe-coded website prototype for a community program pairing background-checked young adults (Guides) with seniors (Explorers) for patient tech help. I wrote the design brief (senior-first accessibility, safety on both sides), then built it with Claude, v0, GitHub, and Vercel.

🚀 Live site: https://digitalguidesneighborsnetwork.vercel.app |

🤖 Code: github.com/dariadaniellegiraud-ux/digitalguidesneighborsnetwork

→ This is a design prototype. Profiles and testimonials are sample content, and the program has not launched.

Initial Process and Design Thinking

→ Started as purely an iPhone research and vibe code project for Handshake AI. Preliminary tasks started with the research for a lite design system concentrating on senior WCAG-informed (Web Content Accessibility Guidelines) needs. After several passes and updates to the Brief, I was able to get a decent prototype. This prototype was then deployed to Vercel, the code saved to GitHub, and submitted to Handshake. As the iterations continued, I gave more thought to the users and personas for this community service app. My thinking process moved beyond design (prototype) toward safety, security, and incentives for the users to solve both pain points and business model needs and concerns.

My questions were as follows:

1. What benefits would students receive other than volunteer hours?

2. How can I add (as a business/ service) incentives for the seniors, other than learning new tech skills?

3. Can the app /company improve and ensure safety for seniors?

4. Should the safety of the young tech guides be considered and how?

5. Can we (the stakeholders) provide this security and how? Should we look into the broader community and partnerships to provide incentives, discounts, and community building initiatives?

6. What are the WCAG senior app specs and best practices to ensure seniors can easily view our products and services? What approach to branding, design systems specs, usage, and fonts?

7. What is there to consider that I have left out in my new learning curve?

   
   

Lessons Learned

1. Design Tokens and Creative (Doc) Briefs: I learned the hard way to always "Engineer" the prompts in such a way to minimize risks such as token costs and usage based on writing and designing AI prompt scripts. In the hands of AI, they do not consider pricing or usage and thus cannot be allowed to simply write a brief for your project.

2. Create a Framework that considers broader and basic risks to the project scope.

3. Reverse Engineer Outcomes in the preliminary stages of Vibe Coding design when at all possible, to mitigate risks, costs, time constraints, and ensure best practices framework.

📲 iPhone Screenshots of Preliminary Tasks and Outcomes

Preliminary tasks and outcomes: built and tracked on my iPhone

I worked through the first stages on my phone, grouping each round of changes so I could compare them:

• Design and copy iterations: I used Claude AI to refine the color palette (checking contrast against accessibility guidelines), the headline copy, and the tone of voice.

• Voice and prompting: I talked through ideas and turned them into a written design brief, then ran it through v0 to prototype and revise the page.

• Deployment: I published the site to Vercel, saved the code to GitHub, and submitted the finished prototype to the Handshake AI Showcase, where it earned an AI project builder badge.