Polymorph UI: The Strategic UX Engine

• 

• 

• 

• 

• 

Inspiration

Technical documentation is usually written to be precise, but precision does not always mean accessible.

A learner can read the same paragraph several times, keep returning to an earlier section, pause over unfamiliar terminology, or struggle with the same knowledge check. Meanwhile, most learning platforms continue presenting the same material in the same format.

We knew there had to be a better approach.

That led us to one important question:

What if a learning interface could recognize when its current approach is not working and responsibly change how it teaches?

We created Polymorph UI with neurodivergent learners in mind, especially learners who benefit from less visual clutter, clearer pacing, progressive guidance, and multiple ways to understand the same concept.

Polymorph UI does not diagnose learners or pretend to know what they are thinking or feeling. Instead, it responds to observable interaction patterns and keeps learners in control of the support they receive.

This idea reflects the curb-cut effect: when we design thoughtfully for accessibility, we often create a better experience for everybody. Neurodivergent learners may be our starting point, but any student can become overwhelmed while learning something complex.

What it does

Polymorph UI is an adaptive documentation reader that transforms complex technical content into a clearer and more focused learning experience when interaction patterns suggest possible learning friction.

For our demonstration, we created a technical lesson about HTTP rate-limit headers. This lesson serves as a working example of a broader adaptive engine that could eventually support different subjects, reading activities, and learning environments.

The system observes a limited, privacy-conscious set of signals, including:

• Repeatedly selecting or revisiting the same passage
• Moving back and forth between sections
• Hovering over unfamiliar technical terms for an extended period
• Remaining inactive during a lesson
• Repeatedly answering a knowledge check incorrectly
• Successfully recovering after receiving support

We treat these signals only as possible evidence of learning friction. Polymorph UI does not attempt to infer a learner's disability, emotional state, diagnosis, or level of intelligence.

When enough friction signals appear, the platform can activate a Focus Mission that:

• Reduces visual clutter and temporarily removes secondary navigation
• Isolates one concept instead of displaying the entire workspace
• Provides a plain-language explanation grounded in the original lesson
• Breaks a complex idea into smaller, manageable steps
• Combines written explanations with visual sequences
• Offers progressive support through Hint → Visual → Explanation
• Includes a Reading Comfort mode with softer contrast and increased spacing
• Explains why the interface changed through transparent reason codes

Learners still have choices. They can allow adaptations to happen automatically after receiving a notice, require the platform to ask for permission first, or keep adaptations entirely manual.

Once the learner demonstrates understanding, Polymorph UI recognizes that recovery, communicates that momentum has been restored, and returns the learner to the original workspace and reading position.

The goal is not to do the work for the learner. The goal is to help them get unstuck and keep going.

How we built it

Polymorph UI uses a governance-first adaptive architecture.

A client-side telemetry layer records only a limited set of interaction events. It does not collect raw keystrokes, diagnose learners, or attempt to determine their medical or emotional condition.

These events are summarized into structured learning-friction evidence and sent to a server-side adaptation route.

The GPT-5.6 planning path is guided by three questions:

1. What might the observable signals be telling us?
2. What is the instructional tension between supporting the learner and preserving the learning opportunity?
3. What controlled adaptation would provide the greatest educational value right now?

Our original concept allowed AI to rewrite React and Tailwind components while the application was running. That idea would have created a dramatic transformation, but unrestricted runtime code generation also introduced unnecessary security, reliability, and testing risks.

We chose a more responsible approach.

Instead of executing unrestricted generated code, GPT-5.6 returns a structured Adaptation Plan containing information such as:

• Friction state
• Layout preset
• Visual-density level
• Guidance mode
• Hint depth
• Recommended next action
• Explanation and reason codes

Zod validates the plan before the frontend maps it to a registry of approved React components. This gives us a dynamic interface without allowing unrestricted AI-generated code to run inside the browser.

If the model path is unavailable or returns an invalid response, a deterministic fallback uses the same Adaptation Plan contract. This keeps the learning experience safe and functional instead of allowing it to fail completely.

We built Polymorph UI with Next.js, React, strict TypeScript, Tailwind CSS, Zod, the OpenAI API, GPT-5.6, Vitest, Playwright, and Vercel.

Codex supported our development process from beginning to end. We used it for:

• Requirements analysis
• Architecture decisions
• GitHub issue planning
• Application scaffolding
• Telemetry processing
• The structured adaptation endpoint
• Frontend integration
• Testing and debugging
• Project documentation

GPT-5.6 was used during implementation through Codex and as the reasoning layer behind structured adaptation planning.

Challenges we ran into

Our biggest challenge was balancing a bold adaptive experience with the reliability required for a live hackathon demonstration.

The original vision allowed AI to rewrite React and Tailwind components during runtime. The concept was exciting, but it introduced security, consistency, and testing risks that did not serve our learners or our MVP.

So, we made the responsible pivot.

We redesigned the system so GPT-5.6 selects from approved and validated interface capabilities. This allowed us to preserve the visible transformation while making the experience safer, more explainable, and easier to test.

Another major challenge was language. We wanted to identify possible learning friction without making unsupported assumptions about a learner's attention, emotions, disability, or mental state.

We addressed that challenge by:

• Limiting the system to observable interaction patterns
• Using neutral and respectful language
• Providing transparent reason codes
• Giving learners control over adaptations
• Avoiding emotional, cognitive, and medical diagnoses

We also had to be disciplined about scope. Instead of trying to build several unfinished learning experiences, we focused on one polished technical-reading journey that demonstrates the larger adaptive engine.

The current lesson is a reference implementation. We are not claiming that Polymorph UI has already been validated across every subject, disability, or learning environment.

Accomplishments that we're proud of

We are proud that Polymorph UI does more than shorten or summarize difficult text. It can change the structure, pacing, and presentation of a learning experience while still giving the learner room to think, practice, and recover.

We developed:

• A controlled alternative to unrestricted runtime interface generation
• A structured and validated Adaptation Plan
• Privacy-conscious telemetry boundaries
• Explainable reason codes for interface transformations
• Learner-controlled adaptation preferences
• Progressive support that does not immediately reveal the answer
• Reading Comfort controls for cognitive accessibility
• Recovery logic that restores the original learning workspace
• Deterministic fallback behavior for reliability
• Automated unit and end-to-end coverage of the primary learning journey

What makes us especially proud is that accessibility is not treated as an afterthought. It is part of the actual intelligence of the product.

What we learned

We learned that adaptive AI should not simply give learners more information. Sometimes, more information is exactly what is overwhelming them in the first place.

The better question is:

What kind of support does this learner need right now?

A responsible adaptive system should select the appropriate level of support, explain why that support was chosen, and avoid removing the productive challenge that helps learning happen.

We also learned that governance can make a product stronger. Restricting the model to approved and validated interface capabilities made Polymorph UI safer and more technically credible without taking away the impact of the transformation.

Most importantly, we learned that accessibility does not have to live inside a static settings page. It can become a responsive part of the learning experience while still respecting learner autonomy.

What's next for Polymorph UI

This MVP demonstrates one adaptive technical-reading journey, but the larger vision reaches much further.

Our next steps include:

• Supporting additional lessons, subjects, and documentation formats
• Extending the adaptation engine into coding workspaces and IDEs
• Adding more learner-selected presentation and pacing preferences
• Creating teacher dashboards with aggregated, privacy-preserving friction patterns
• Supporting additional languages and reading levels
• Expanding interactive visual explanations
• Conducting formal accessibility testing with students and educators
• Evaluating whether adaptations improve comprehension and retention over time

Our long-term vision is an educational interface that does not force every learner through the same experience in the same way.

Polymorph UI meets learners where they are, gives them the right level of support, and helps them regain momentum without taking the learning away from them.

Built With

• api
• codex
• css
• gpt-5.6
• library
• next.js
• openai
• playwright
• react
• tailwind
• testing
• typescript
• vercel
• vitest
• zod