Tutorials

• 1: First Steps: From Spec to First Code
• 2: Building a Simple REST API Endpoint from an Interface Spec
• 3: Creating a React Component from a UI/Functional Spec
• 4: Generating Database Schema and CRUD Operations from a Data Model Spec
• 5: Writing Unit Tests Based on Acceptance Criteria
• 6: Evolving Code as Specs Evolve
• 7: Cross-Spec Challenge: Multi-Spec Integration

1 - First Steps: From Spec to First Code

Key Points:

• Introduction to LLMs and their role in coding
• Setting up your development environment
• Selecting the right spec chunks
• Basic prompt crafting
• Managing output iterations
• Hands-on exercise: Generating a simple function from a specification

Assets:

• 📄 Starter Spec Template (Markdown)
• 📄 Prompt Template: “Draft a React component from this spec…”
• 📄 Prompt Engineering Flowchart (Spec ➔ Prompt ➔ Output ➔ Test)

2 - Building a Simple REST API Endpoint from an Interface Spec

Key Points:

• Understanding business requirements specifications
• Breaking down requirements into actionable tasks
• Using LLMs to generate initial code drafts
• Analyzing the Interface/API Specification to identify key elements (endpoints, methods, request/response formats).
• Mapping requirements to code components
• Crafting the initial prompt to request the API endpoint code, providing necessary context (language, framework, spec details).
• Iterative prompting to add details like input validation, basic error handling, and database interaction placeholders.
• Integrating the generated code into a minimal project structure.
• Basic manual testing or using a simple script to verify the endpoint’s response structure.

Assets:

• Example Interface/API Specification snippet (Markdown or simple text format).
• Prompt Template: “Generate API Endpoint from Spec” (Reusable Markdown template).
• Example LLM interaction flow (showing initial prompt, refinement prompts, and responses).
• Code Snippets: Generated endpoint code, minimal application setup code.
• Callout (Inline Tip): “Common Pitfall: Over-reliance on the first LLM output. Always expect to iterate and refine based on the spec.”
• Callout (Inline Note): “Tip: Be explicit about the desired libraries and framework versions in your prompt.”

3 - Creating a React Component from a UI/Functional Spec

Key Points:

• Translating visual descriptions and functional requirements from the spec into prompt requirements (component name, props, state, behavior, styling).
• Specifying desired libraries (React) and styling framework (Tailwind CSS) explicitly.
• Prompting for component structure, handling state/props as defined in the spec.
• Refining generated JSX and applying/correcting Tailwind classes based on the spec’s visual requirements.
• Integrating the component into a sample React application and verifying its appearance and basic functionality.

Assets:

• Example UI/Functional Specification snippet (could include text descriptions, simple wireframe ASCII art, or reference to a diagram).
• Prompt Template: “Generate React Component from Spec” (Reusable Markdown template).
• Example LLM interaction flow.
• Code Snippets: Generated React component code (JSX with Tailwind classes).
• Callout (Inline Tip): “Tip: For complex UI, break it down into smaller components and generate them individually.”
• Callout (Inline Warning): “Warning: LLMs might not perfectly replicate complex layouts from text descriptions alone. Visual review is essential.”

4 - Generating Database Schema and CRUD Operations from a Data Model Spec

Key Points:

• Identifying entities, attributes, relationships, and data types from the spec.
• Representing data relationships (one-to-one, one-to-many, many-to-many) clearly in prompts.
• Prompting for SQL schema definitions or ORM model classes.
• Generating basic functions for Create, Read, Update, and Delete operations for one or more entities.
• Choosing between generating raw SQL or ORM code based on project needs and prompting accordingly.

Assets:

• Example Data Model snippet from an SRS or a dedicated Data Specification.
• Prompt Template: “Generate Database Schema/CRUD from Spec” (Reusable Markdown template).
• Example LLM interaction flow.
• Code Snippets: Generated SQL schema, generated ORM models, generated CRUD function stubs.
• Callout (Inline Warning): “Warning: Always review generated schema definitions and raw SQL for potential security vulnerabilities (e.g., lack of proper escaping, injection risks).”
• Callout (Inline Note): “Note: LLMs are good at generating standard CRUD patterns, but complex query logic often requires significant human guidance or writing.”

5 - Writing Unit Tests Based on Acceptance Criteria

Key Points:

• Understanding how Acceptance Criteria translate into test cases (Given-When-Then).
• Providing the LLM with the code to be tested and the relevant User Story/Acceptance Criteria.
• Prompting for specific test functions or methods covering each criterion.
• Refining generated test code, adding necessary setup/teardown, and ensuring assertions are correct.
• Running the generated tests and verifying their correctness and coverage against the criteria.

Assets:

• Example User Story and Acceptance Criteria.
• Example code snippet (e.g., a function or class) to be tested.
• Prompt Template: “Generate Unit Tests from Acceptance Criteria” (Reusable Markdown template).
• Example LLM interaction flow.
• Code Snippets: Generated unit test code.
• Callout (Inline Tip): “Tip: Provide the LLM with the signature or interface of the code being tested for better results.”
• Callout (Inline Note): “Note: LLMs can generate test structures and ideas based on criteria, but human expertise is vital for ensuring comprehensive test coverage and correct assertions.”

6 - Evolving Code as Specs Evolve

Key Points:

• Version control practices
• Updating LLM prompts with deltas
• Regression testing LLM changes

Assets:

• 📄 Prompt Template: “Update existing code to reflect these changes…”
• ⚡ Callout: Warning about code drift

7 - Cross-Spec Challenge: Multi-Spec Integration

Key Points:

• Reconciling different spec types
• Layering prompts
• Managing ambiguity

Assets:

• 📄 Example PRD + System Design Spec
• 📄 Diagram: “Spec Flow Merging”