📋 Table of Contents

• 🎙️ Introduction — Integrating AI as an Aid, Not a Shortcut
• 🎭 Atelier Design Prompts
• 🧰 Technical Learning Prompts
• 💬 Reflective / Critical Coding Prompts
• 🧾 Documentation & Publication Prompts
• 🧬 Generative Creativity Prompts
• 🧑‍🏫 Meta-Pedagogical Prompts
• 🤖 You + AI Collaboration Prompts
• 🧩 Remix Manifesto

🎧 Atelier Prompt Collection — Modern Web Development

Rubén Vega Balbás (UDIT)
Web Atelier 2025–26 — Critical Coding Edition
License: CC BY-SA 4.0

🎙️ Introduction — Integrating AI as an Aid, Not a Shortcut

The atelier is not a factory. It’s a lab of rhythm, reflection, and resistance.
We code here not to automate but to articulate — to give form to thought,
to sketch an interface that breathes meaning.

AI joins us not as a ghostwriter, but as a beat partner —
helping us extend the reach of our reflection, never replacing our voice.
This collection of prompts comes from that space — the dialogic rhythm
between human insight and machine suggestion, where syntax becomes poetry
and every div has a reason to exist.

See full methodology:
https://ruvebal.github.io/web-atelier-udit/methodology/en/

🎭 Atelier Design Prompts

Purpose: Generate new lessons, exercises, and educational rhythms inside the atelier.

• New Atelier Lesson →
  “Create a Markdown lesson in my atelier format: exploration → reflection → conceptualization → production → exhibition.
  The topic is [insert theme]. Keep the same structure and tone as modern-web-development-guide.md.”

• Module Extension →
  “Add a new module expanding the SPA atelier toward animation, data visualization, or typography systems.”

• Atelier Iteration →
  “Refactor the guide into a Level II version for advanced students — add dynamic routing, theme architecture, and optimization.”

• Reflection Worksheet →
  “Generate open-ended questions connecting code practice with design ethics and critical coding ideas.”

🧰 Technical Learning Prompts

Purpose: Produce clear, hands-on materials for modern web development topics.

• Concept Mini-Guide →
  “Write a short Markdown lesson explaining [concept], with one example, one reflection question, and one design insight.”

• Code Scaffolding →
  “Generate a minimal file scaffold for [feature or component] following the portfolio-spa/ structure.”

• Accessibility Deep Dive →
  “Turn the Accessibility section into a focused guide with examples of aria roles, focus management, and keyboard patterns.”

• Theme Exercise →
  “Design a short challenge where students extend their configuration to invent their own visual identity.”

💬 Reflective / Critical Coding Prompts

Purpose: Connect technical work with cultural and ethical awareness.

• Critical Reflection →
  “Ask students to analyze their portfolio’s code from aesthetic, ethical, and inclusive perspectives.”

• Design as Discourse →
  “Compose a 400-word essay linking the SPA project to critical making and pedagogy of freedom.”

• Code Critique Template →
  “Create a peer-review rubric with sections for clarity, rhythm, structure, and accessibility.
  End with: What story does your interface tell?”

🧾 Documentation & Publication Prompts

Purpose: Help students document and publish their creative process.

• Student Project README →
  “Create a template for project repos: title, concept statement, screenshots, setup, reflection.”

• Atelier Book Chapter →
  “Turn the guide into a reflective essay for a collective publication on Critical Coding Atelier.”

• Course Index Page →
  “Generate an index listing all atelier lessons with poetic one-line summaries.”

🧬 Generative Creativity Prompts

Purpose: Bridge code and art, logic and improvisation.

• Web Poetry Generator →
  “Create an exercise using modern CSS and JS to render poetic text dynamically — on scroll, click, or time.”

• Generative Layout Workshop →
  “Design a workshop to explore randomness, motion, and structure through modern CSS utilities.”

• Critical Coding Manifesto →
  “Write a one-page manifesto mixing rhythm, design ethics, and code consciousness.”

🧑‍🏫 Meta-Pedagogical Prompts

Purpose: Support educators and mentors in evolving their atelier practice.

• Session Planner →
  “Generate a 2-hour atelier class plan with warm-up, demo, build, critique, reflection.”

• Semester Map →
  “Design a semester flow integrating responsive design, SPA architecture, and generative art.”

• Future Directions →
  “Plan a continuation course exploring data-driven or 3D web — always through the atelier lens.”

🤖 You + AI Collaboration Prompts

Purpose: Keep AI as your studio partner, never the director.

• AI Dialogue Prompt →
  “You are my co-mentor. Help me ideate a new web learning module rooted in critical coding, blending code, reflection, and artistry.”

• AI Reflection Prompt →
  “Ask AI to generate a meta-reflection about the student’s code decisions, focusing on process and intent rather than perfection.”

🧩 Remix Manifesto

“Code is not a product — it’s a conversation.”

The atelier is a rhythm of minds — human and machine, student and teacher, syntax and spirit.
We write to understand, to remix, to reimagine.

You are invited to expand these prompts, fork them, break them, rewrite them in your own cadence.
The only rule: Stay critical. Stay lyrical. Stay awake.