Your First Workflow
What you'll learn
~15 min- Execute a plan-then-build workflow using browser chat and a CLI tool together
- Write planning prompts, feedback prompts, and review prompts
- Understand the Think-Plan-Build-Verify-Refine cycle
- Preview what a CLI tool session looks like before you install one
You will walk through a complete plan-then-build workflow — using browser chat (web-based AI assistants like ChatGPT, Claude, or Gemini) to plan and previewing how a CLI tool would execute it.
You will not install or run a CLI tool in this lesson. CLI tool setup happens in Module 6. This lesson shows you the workflow pattern so you understand the rhythm before you start building for real.
Why this matters
Real AI work is not about one tool. It is about a workflow — a repeatable pattern where you use the right tool at the right moment. Professionals who get the most out of AI do not just chat or just build. They alternate between planning and building in a rhythm that produces better results, faster.
This lesson teaches you that rhythm before you install a single CLI tool.
Mental model: architect + contractor
In Lesson 1, you met the advisor. Now meet the full team:
- Browser chat is your architect. It helps you think through the design, identify requirements, and make decisions before any work begins.
- CLI tools are your contractor. They walk into your project, take measurements, and do the actual construction.
The best houses are not built by architects alone (they never touch a hammer) or by contractors alone (they need blueprints). They are built by both working together. That is your AI workflow.
Full worked example: building a publications page
Let’s walk through a real scenario from start to finish. A biology professor wants a simple webpage that displays their lab’s recent publications.
Step 1 — Browser chat: plan the project
Open your browser chat and paste this prompt:
I’m a biology professor and I need a simple webpage that displays my lab’s recent publications. I want each entry to show the title, authors, journal, year, and a link to the PDF. What’s a good approach? I want it to be easy to update. Give me a specific plan with 3-5 steps.
What you get back: The AI suggests using a static site or a simple HTML page, recommends a clean layout, and outlines the steps to build it. It might suggest using a JSON or CSV file for the data so it is easy to update.
Notice what just happened: you went from a vague idea (“I need a publications page”) to a concrete plan with specific steps. That is what the architect does.
Step 2 — Browser chat: get feedback on the plan
Paste this follow-up in the same conversation:
Here’s what I’m thinking based on your suggestions: a single HTML page with a CSS stylesheet, and the publications stored in a JSON file that I can update. Before I build this, what am I missing? What about accessibility? What about making it look professional with minimal effort?
What you get back: The AI reviews your approach, suggests semantic HTML for accessibility, recommends a simple CSS framework or a clean typography approach, and might flag things like mobile responsiveness or printer-friendly styles.
You now have a reviewed plan. The architect has checked the blueprints.
Step 3 — Preview: what a CLI tool would do
This is where the contractor steps in. You will not run this yet (CLI tools are set up in Module 6), but here is what a CLI session would look like. Use the terminal simulator below to explore the generated files — click on file names to view their contents, and look at how the prompt produced a complete set of working files:
What just happened: In a real CLI session, you would type one prompt and the tool would often generate a working first draft of all four files — index.html, styles.css, publications.json, and app.js — in seconds. It reads your project folder, creates files that work together, and you can review the result immediately. You still check the output, test it, and refine as needed — but the heavy lifting is done.
The app.js file uses fetch('publications.json'), which requires a local web server to work. Opening index.html directly via file:// in your browser will likely cause a loading error. A quick fix is to run python -m http.server in the project folder and open http://localhost:8000 — or ask your AI CLI tool to add a dev server when you build real projects.
If you run this workflow with a real CLI tool later and it produces a different file structure or approach, that is completely normal. Different AI models make different design choices. The important thing is the workflow pattern — plan, build, review — not the exact files generated.
Step 4 — Browser chat: review what was built
After the CLI tool builds the page, you go back to browser chat. Paste the generated code so the AI can give specific feedback:
I just built my publications page. Here is the code:
[PASTE YOUR HTML, CSS, AND JS CODE HERE]
What should I improve? Are there any accessibility issues?
What you get back: The AI reviews the actual code and suggests improvements — for example, using semantic HTML elements more effectively, adding a skip-to-content link, improving color contrast, or adding structured data markup for search engines. Prefer semantic HTML first; add ARIA attributes only when native HTML semantics are insufficient.
Then you would take those suggestions back to the CLI tool and say “add these improvements.” The cycle continues.
The workflow pattern
What you just walked through is a repeatable pattern:
- Think — What do I want to build? (You, on your own)
- Plan — How should I build it? (Browser chat)
- Build — Make it happen. (CLI tool)
- Verify — Does it work? Is it good? (You + browser chat)
- Refine — What should improve? (Browser chat, then CLI tool)
This cycle — Think, Plan, Build, Verify, Refine — is how professionals use AI. It is not about one magical prompt. It is about iterating between thinking and building.
You will almost never get it perfect on the first pass. That is normal. The power of this workflow is that each loop makes the result better. Plan a little, build a little, check, adjust. Each cycle takes minutes, not hours.
When to loop back: refinement prompts
Here are prompts that restart the cycle at different points:
Back to planning (browser chat):
“The page works, but it looks plain. What design changes would make it look more professional without being complicated?”
Back to building (CLI tool):
“Add a search bar at the top that filters publications by title or author as the user types.”
Back to reviewing (browser chat):
“I added search functionality. Is there a better UX pattern for filtering a list of academic publications?”
Each of these prompts moves you forward. The key is knowing which tool to reach for at each step.
Try it yourself
Pick one of these scenarios and try the Plan and Review steps in your browser chat right now. Save the Build prompts for Module 6 once your CLI tool is installed.
🧬In Your Field: Biotechclick to expand
Biotech workflow example:
- Plan (browser chat): “I need to build a tool that takes a FASTA file of protein sequences and calculates molecular weights. What libraries should I use? What edge cases should I handle?”
- Build (CLI tool — save for Module 6): “Create a Python script that reads sequences.fasta, calculates molecular weight for each sequence using Biopython, and outputs a CSV with sequence ID and weight.”
- Review (browser chat): “Here’s my approach for calculating molecular weights. Am I handling post-translational modifications correctly? What about non-standard amino acids?”
Note: Start with standard amino acids. Post-translational modifications and non-standard amino acids are advanced extensions you can explore later.
📊In Your Field: MIS / Businessclick to expand
Business workflow example:
- Plan (browser chat): “I need a dashboard that shows quarterly revenue, customer acquisition cost, and churn rate. What visualizations work best? What KPIs should I include beyond these three?”
- Build (CLI tool — save for Module 6): “Read sales_data.xlsx and create a dashboard page with a bar chart for revenue by quarter, a line chart for CAC trend, and a gauge for current churn rate.”
- Review (browser chat): “Here’s my dashboard layout. Does the data story make sense? Am I missing any metrics that an executive would want to see?”
🏛️In Your Field: Government / State Devclick to expand
Government dev workflow example:
- Plan (browser chat): “I’m building an internal case management tool. What are the key data models I need? What security considerations apply for PII handling?”
- Build (CLI tool — save for Module 6): “Scaffold a Node.js app with Express, a PostgreSQL schema for cases, contacts, and documents, and basic CRUD API endpoints with input validation.”
- Review (browser chat): “Here’s my database schema and API design. Does it follow government data handling best practices? Am I missing any audit trail requirements?”
When things go wrong
When Things Go Wrong
Use the Symptom → Evidence → Request pattern: describe what you see, paste the error, then ask for a fix.
Key takeaways
- The best workflow combines both tools: plan with browser chat, build with CLI, refine with both.
- Think, Plan, Build, Verify, Refine — this five-step cycle is how professionals use AI daily.
- Use the planning tool and the building tool together. Neither works as well alone as they do in combination.
- Iteration is normal. You will loop through the cycle multiple times. Each pass makes the result better.
- You are ready. In Module 6, you will install your first CLI tool and run this workflow for real.
You have a vague idea for a project. What's the best first step?
After a CLI tool builds your project, what should you do next?
In the publications page example, why did we use browser chat BEFORE the CLI tool?