Prompt UI Academy

Inspiration

Many people can picture the interface they want but cannot name the component, interaction, or motion pattern precisely enough for an AI coding agent. Requests such as “make it smoother” or “add that popup” force the agent to guess.

Prompt UI Academy treats UI vocabulary as a practical form of AI literacy. It teaches learners how to replace vague requests with named components, observable states, measurable motion, and structured constraints.

What it does

Prompt UI Academy is a bilingual, interactive learning experience. It includes a structured learning path covering UI terminology, motion language, and actionable prompt construction; a visual dictionary for patterns such as Modal Dialog, Toast, Tooltip, Tabs, Toggle, Accordion, and Skeleton Screen; a motion playground for Fade, Slide, Spring, Stagger, duration, and easing; scenario-based quizzes with immediate explanations; and a deterministic Prompt Lab that compares vague and precise instructions and updates a simulated preview.

The full learning experience remains usable without an account. Guest progress stays in the learner’s browser by default. Optional sign-in with Google or email code can merge existing local progress into a private cloud record and sync mastered terms, lesson checkpoints, quiz results, and Prompt Lab activity across devices.

How GPT-5.6 and Codex were used

The project began while I was away from my desk. I described the idea to GPT-5.6 in ChatGPT Work mode from my phone, and that remote session produced the first working prototype.

Codex then helped restructure the original single-page prototype into focused routes, add Simplified Chinese and English, fix visual issues with regression tests, configure deployment, and establish a pull-request-based development workflow through AGENTS.md.

For the cloud-progress feature, I used a structured planning workflow before implementation. Codex asked targeted decision questions until the MVP specification was clear: guest-first learning, optional sign-in, private progress, local-to-cloud merging, and per-item reconciliation across devices. Codex then implemented the feature through pull request #9.

The Codex built-in browser and annotation workflow were especially valuable. I could test the live preview, attach feedback directly to specific interface elements, and provide continuous context through precise UI locations and surrounding screenshots. Automated Codex review identified actionable concurrency issues involving pending writes and account deletion. Those findings were fixed and covered by regression tests before the pull request was approved and merged into main.

I retained control of the product direction, feature scope, testing decisions, and final approval while GPT-5.6 and Codex accelerated architecture, implementation, review, and release.

Technical implementation

The application uses Next.js, React, TypeScript, Tailwind CSS, Appwrite Cloud Auth and TablesDB, Vercel, Vinext, Cloudflare Worker tooling, and GitHub Actions. CI verifies linting, production builds, and automated tests. The merged cloud-progress implementation keeps Appwrite API keys server-only and authenticates progress routes with short-lived Appwrite JWTs.

The Prompt Lab is intentionally deterministic and browser-local. It does not call an OpenAI model at runtime or present its preview as model-generated output.

Impact

Prompt UI Academy helps students, non-designers, and early-career builders communicate more effectively with AI coding agents. Its learning objective is specific: help learners convert ambiguous visual ideas into precise, reviewable UI instructions with less trial and error.

Links

Live application: https://prompt-ui-academy.vercel.app Public repository: https://github.com/PeterShanxin/prompt-ui-academy Cloud-progress pull request: https://github.com/PeterShanxin/prompt-ui-academy/pull/9 License: MIT

Built With

• appwrite-cloud
• cloudflare-workers
• codex
• github-actions
• gpt-5.6
• next.js
• react
• tailwind-css
• typescript
• vercel
• vinext