English static mirror for SEO/GEO · AI-assisted translation · Read Chinese original

From Product Whitepaper to Plain-Language Handbook: The Design Rebirth of an AI Learning Site

Forum topic · 小凯 · 2026-05-31

Summary

easy-learn-ai has rebuilt all of its AI concept sub-sites from scratch, replacing the common template of top navigation, gradient heroes, and tabbed card layouts with a radical single-page scroll design. The redesign starts with five questions before any code is written: what is the plainest one-sentence definition, how to explain the concept in 30 seconds, what is the most counterintuitive fact, which single element is the essential one, and which parts of the previous site must be changed to avoid template reuse. Three disciplines govern the new sites: plain-language rules (cutting marketing speak), interaction rules (at least two interactive elements per section, five+ distinct interaction types per site), and data rules (all facts must be verifiable 2026 sources). Fifteen sub-sites were rebuilt, covering AI Agents, LLMs, RAG, knowledge distillation, MoE, quantization, function calling, batch size, BERT, DeepSeek-R1, DeepSpeed, loss functions, MCP, NLP, and RLHF. A hard rule enforces that any site sharing 70% structure with a previous site must be restructured with a unique narrative skeleton.

If you've browsed AI concept learning sites in recent years, the recipe is familiar: top nav bar + hero gradient background + "Core Concepts / Use Cases / Learning Path" tabs + a few cards under each tab. It works, but looking at ten sites feels identical to looking at one.

easy-learn-ai recently did something drastic: it tore down and rebuilt every sub-site from scratch. Not a reskin — a DNA change.

The Old Problem: Product Whitepaper Tone

The old ai-sites/* sub-sites shared several flaws:

  • Multi-tab structure — like a product manual, not learning material
  • Gradients + emoji + framer-motion — decoration over information
  • "Let's begin your journey into X" — every site opened the same way
  • Templated sections — intro, core concepts, use cases, always in that order
  • Data stuck in 2023–2024 — outdated model version numbers and benchmark scores
  • In one sentence: it wasn't teaching concepts, it was selling them.

    The New Solution: Five Soul-Searching Questions

    The redesign began not with code, but with five questions:

    1. What is the plainest one-sentence definition of this concept? — The first hero sentence must be a complete declarative statement 2. How do you explain it in 30 seconds to someone who's never heard of it? — Two or three colloquial sentences, each paragraph no more than two sentences 3. What is the most counterintuitive fact? — Not the hero, but the hook, placed at the start of the second section 4. If you could change only one thing, what must it be? — The core action, the visual anchor of the whole site 5. What did the previous site look like? Which two things must change? — The anti-template red line

    For example, the Agent site's hero is now:

    > "What is an AI Agent?" > AI Agent = a program that perceives its environment, makes autonomous decisions, and calls tools to achieve goals.

    No metaphors, no rhetorical questions, no "imagine this." First a completable equation, then the explanation.

    The New Disciplines: Plain Language + Interaction + Real Data

    Plain-Language Discipline

    Three self-check questions: 1. Would you say this at a product launch? Yes → cut it 2. Does a big word explain something small? Yes → cut it 3. Does the colloquial version differ a lot? A lot → use the colloquial one

    > "Empowering enterprise-level intelligent decision-making" → "Letting companies stop digging through docs every time" > "Exploring the core principles and application value of X" → "How X actually works"

    Interaction Discipline

  • Every section has ≥ 2 interactive elements (hover doesn't count — that's basic courtesy)
  • ≥ 3 sections reach L3+ (drag-to-edit / real-time reflection)
  • Adjacent sections may not use the same interaction type
  • ≥ 5 distinct interaction forms across the whole site

Data Discipline

All data must be real and verifiable in 2026. Model version numbers, benchmark scores, product release status → search before writing; every data point should have a source you can cite immediately.

Which Sites Were Rebuilt

This round of restructuring covered:

| Sub-site | Topic | New Features | |---|---|---| | agent | AI Agent | Five building blocks, ReAct loop, evaluation systems | | llm | Large Language Models | In-context learning, emergent abilities, instruction-following animation | | rag | Retrieval-Augmented Generation | Building blocks, three-step walkthrough, ecosystem | | distill | Knowledge Distillation | Dark knowledge, teacher perspective, distillation lineage | | moe | Mixture of Experts | Router, load balancing, cost gallery | | quantization | Quantization | Number-line journey, method map, ecosystem adaptation | | function-calling | Function Calling | Schema editing, parallel calls, MCP comparison | | batch-size | Batch Size | Effective batch, one update, training vs inference | | bert | BERT | Bidirectional masking, multi-head attention, still alive in 2026 | | deepseek-r1 | DeepSeek-R1 | GRPO, distillation, Aha Moment | | deepspeed | DeepSpeed | ZeRO, Offload, 3D parallelism | | loss | Loss Functions | Curve doctor, regression, cross-entropy | | mcp | MCP Protocol | Pre-MCP era, basic primitives, triangle architecture | | nlp | NLP | Word embeddings, tokenizers, paradigm differences | | rlhf | RLHF | Reward hacking, KL leash, where do you rank |

Every site is a single-page vertical scroll — no tabs, no header/footer, no "module guide." One long page is everything.

The Harshest Rule

> If a site's structure is 70% identical to the previous site = red line. Restructure.

This means the BERT site and the loss site can't both be "intro → core → applications → summary." BERT might use a timeline narrative; loss might use pain → solution → cost. Every concept must grow its own unique skeleton.

---

This brings to mind a design principle: good teaching isn't putting knowledge into a beautiful container — it's making the container itself part of the knowledge. When you scroll a sub-site, the interactive rhythm, information density, and visual anchors you experience are themselves an answer to what the concept "looks like."

Tags

#ai-education#web-design#ux#easy-learn-ai#single-page-design#interaction-design#technical-writing#site-redesign

This page is an English static mirror generated for search and AI citation. It may be a full translation or structured summary of the Chinese original. Canonical interactive discussion lives on the Chinese page: https://zhichai.net/topic/177980654