PIXIE
VIBE CODING A DESIGN TOOL
Pixie is an AI motion-design too that stands in for a real product page I designed and built, replaced here for privacy reasons.
Vibe Coding · Computer Science Skills · ADA Compliance · HTML / CSS
THE SPACE
I needed to pitch a design tool deep dive for an internship, I replaced the logistics for this case study due to privacy compliances. This tool is named "Pixie" and while it is fabricated for my portfolio, it mirrors my process for the real shipment.
RESULT
I needed to pitch a design tool deep dive for an internship, I replaced the logistics for this case study due to privacy compliances. This tool is named "Pixie" and while it is fabricated for my portfolio, it mirrors my process for the real shipment.
PROCESS
1. Initial prompt
The first pass got the structure and type system right, but the content was still placeholder text, generic project names, generic descriptions. A layout is only half the work; the next pass was about giving it something real to say.
2. Adding The Case Study Content and Compliances
With real content in place, I switched from directing content to auditing quality. Most AI-generated interfaces look finished before they're actually accessible, so before calling this done, I ran it against WCAG 2.1 AA.
Two failures stood out immediately: there was no visible focus state anywhere on the page, so a keyboard-only user would have no idea what was selected. And the accent color, while visually striking, measured roughly 3.4:1 against the background, short of the 4.5:1 minimum required for normal text.
Both are the kind of thing that looks fine at a glance and fails the moment someone who actually needs it tries to use it.
4. Putting My Skills to Work
Prompting a tool to "fix accessibility" tells you something about my judgment, knowing what to check for. It doesn't prove I can actually write the fix. So the next step happened outside Figma Make entirely: I opened the exported code and made the change by hand. A darker accent value used specifically for text, a :focus-visible outline rule that wasn't in the original export, and a prefers-reduced-motion query wrapping the hero animation. Small changes, but the difference between a page that looks accessible and one that actually is.
/* BEFORE — Figma Make's first pass */
:root {
--accent: #FF3B1F;
}
.case-tag {
color: var(--accent); /* fails WCAG AA: ~3.4:1 contrast on white */}
/* AFTER — hand-corrected */
:root {
--accent: #FF3B1F; /* kept for decorative use: borders, dots */ --accent-text: #CC2E13; /* new: darker variant for any actual text */ }
}
.case-tag {
color: var(--accent-text); /* fails WCAG AA: ~3.4:1 contrast on white */}
Keyboard focus states
/* BEFORE — no focus styling existed anywhere in the export*/
a, button {
text-decoration: none;
}
/* AFTER — added by hand
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 2px;
}
Reduced Motion Support
/* BEFORE — animation always runs, no exception */
.hero h1 {
animation: rise 0.85s cubic-bezier(.16,1,.3,1) forwards;
}
/* AFTER — respects the OS-level accessibility setting */
.hero h1 {
animation: rise 0.85s cubic-bezier(.16,1,.3,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
.hero h1, .hero p, .hero-meta {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
FINAL PRODUCT
This is where it landed. Every version above fed into this one, the structure from the first brief, the real content from the second pass, the accessibility fixes caught twice, and the visual identity pushed further once the fundamentals were solid. Nothing here is the output of a single prompt.That's the part I don't think a prompt replaces, and it's the part I most wanted this process to show.
