What are the rules for building an AI learning experience?

A developer must follow a master checklist for all design and interaction rules.

This ensures consistency and quality across all AI learning experiences. The checklist covers layout, branding, interaction, hints, education, navigation, effects, and data.

A developer must follow specific rules for layout. The entire screen should be visible without scrolling. All heights must be calculated before writing CSS. Sizes should use exact pixels for different screen sizes. Card containers must hide extra content. Branding rules require using the approved color scheme. Colors must be accessible for colorblind users. Shadows, corners, and lines must be consistent. Text contrast must pass accessibility checks. Button font sizes must also be accessible. Interaction rules define how users engage with puzzles. Users get two attempts per puzzle. After two mistakes, the correct answer is shown. There is a one-second pause before feedback. A 'Next' button advances the user. Positive feedback follows correct answers. Educational lessons are given after two wrong answers. A 'Show me how' option is always available. Puzzles must be mathematically correct. Hints must match visual elements. Only three specific sounds are used. Text-to-speech uses a specific rate and source. Hints must be clear and teach something. They are tied to many states, not just puzzles. Hints follow a five-layer pattern to connect with the user. They should relate to a child's world. Grid games use coordinate indexing for hints. Errors are highlighted visually. Different hints are given for repeated failures. Hints must match visual positions or colors exactly. Educational philosophy focuses on concepts first. The interaction itself should teach the concept. Every state is a learning opportunity. The goal is to prepare students for advanced learning. Each interaction should evaluate, train, and teach. A cumulative reflection at the end helps users learn. Navigation rules state that 'Restart' resumes progress, not starts over. Mistakes do not clear the error; hints guide the user. A header arrow goes to the previous stage. Refreshing the page starts a new round for testing. Users can skip any round. The end of all rounds provides a summary and a 'play again' option. Games have 15-25 rounds. Feedback covers all possible errors across rounds. A progress bar is always visible. Effects include appropriate sounds and hover effects. Motion is used in 'show me more' features. The board state must always be clear. Action hints are always visible. Buttons for empty states must be handled. Data architecture uses data-driven arrays for visual games. Algorithmic generators create math and logic games. The system works without a server or database, using a single HTML file. Refreshing clears memory and starts at Stage 1. Wrong answers clear after 600ms, and the puzzle resets.

A developer is creating a new math game. The developer checks the master checklist. The developer ensures the game uses the correct brand colors. The developer also makes sure hints teach a concept, rather than just giving the answer. The developer verifies that the game has a 'Next' button to advance, not auto-advance. This ensures the game follows all established design and interaction standards.

More from the same record, pulled by shared topic — not written new for this page.

A developer must follow a master checklist for all design and interaction rules. This ensures consistency and quality across all AI learning experiences. The checklist covers layout, branding, interaction, hints, education, navigation, effects, and data.