Flowcode: An AI-Powered Programming Environment for Scaffolding Iteration in Creative Computing Education

Synthesis: Building upon found examples is a popular way people learn to code, especially in creative coding communities where sharing projects and remixing are common practices. But effectively doing so requires being able to 1) understand how existing code works, and 2) extend it by writing code that implements your own ideas, practices that can be challenging for new creative coders. We explored how to support these two processes through the design of Flowcode, a creative coding programming environment that integrates a flowchart for visualizing code structure and a chat interface tailored to support learning to code over vibe coding. We share how we iterated on the design of Flowcode over two studies with new creative coders, reflecting on the roles Visualization and friction may play in enabling productive AI-use in computing education.

Flowcode pairs a code-structure flowchart with a learning-oriented (not vibe-coding) chat to help novice creative coders understand and extend found examples; two studies show visualization and productive friction can steer AI use toward learning rather than bypass.

This work connects to core knowledge base themes: Scaffolding Generative AI Feedback Loop Active Learning Student Experience. It highlights how generative-AI tooling is reshaping both what learners do and how educators structure support, reinforcing the need for design that preserves authentic engagement rather than enabling shallow bypass.

What this means for practice

• Instructors. Break generated explanations into gated steps instead of one scrollable block: 8 of 9 lab-study users progressed through the step-by-step explanations, and P7 contrasted a single step as "just long enough" against the "walls of text" from ChatGPT.
• Instructors. Remove affordances that let learners paste generated code unread — dropping the copy-to-clipboard button and the automatic insertion of fill-in-the-blank code made participants more intentional about the code they kept.
• Designers. Pair an LLM-generated flowchart that links features to code lines with the chat panel: participants' feedback on the flowchart was promising, while interactions with explanations often amounted to scrolling straight to the code.
• Designers. Plan for model failure in the fill-in-the-blank design: in the workshop, 2 of 7 participants never triggered the bug while one saw 24 prompts return complete code, and once a user hit it the behavior persisted across most subsequent responses.
• Instructors. Treat remixing as two taught skills, understanding found code and extending it, since successful participants mixed direct edits with AI support and one finished by adding a third card with no LLM help at all.

Limitations

• Two studies with 16 participants in total — a workshop with 7 new creative coders and a lab study with 9 — with no comparison condition.
• The AI features were generated by a single model (GPT-4o), so the scaffolded behavior may not represent other LLMs.
• The analysis focused on how learners remixed a single project, even though three participants (P1, P5, P7) navigated between CodePen starters.
• Interaction was observed over a short iteration period of 40 minutes, and part of one participant's screen recording was missing.

Citation

Tseng, Seoror, Adda, Factor, Darabi, Matschke, Fu, Lin, Maram & Sinha (2026). Flowcode: An AI-Powered Programming Environment for Scaffolding Iteration in Creative Computing Education. arXiv preprint.