Design & Specify Exercises

Fill in the blanks to test your knowledge.

1

A user story follows the format: "As a ___, I want to ___, so that ___"

// User story template
const userStory = {
role: "As a ", // who is the user?
goal: "I want to ", // what do they want to do?
benefit: "so that ", // why do they want it?
};
2

Acceptance criteria in a user story are written using ___ scenarios (Given/When/Then format)

// Gherkin scenario

: a logged-in user is on the checkout page

When: they click "Place Order"

Then: an order confirmation email is sent

And: the cart is cleared

3

In SDD, a ___ document describes the full technical design of a feature before development begins

// Spec-Driven Development: document types

// 1. User Story — the requirement

// 2. Use Case — the actor-system interaction

// 3. Document — the technical implementation design

// 4. Task List — the atomic work units for the AI agent

4

A wireframe shows the ___ layout of a screen without colors, fonts, or final imagery

// Fidelity spectrum
const fidelityLevels = {
sketch: "rough boxes, no detail",
wireframe: " layout, grayscale, placeholder text",
mockup: "visual design, real fonts, brand colors",
prototype: "interactive, clickable, simulates real app",
};
5

An ___ is a large body of work that contains multiple related user stories

// Agile hierarchy
const agileHierarchy = {
theme: "Strategic goal (e.g., Improve Checkout Experience)",
: "Large feature (e.g., Guest Checkout)",
userStory: "Single capability (e.g., Pay without account)",
task: "Developer task (e.g., Add email input field)",
};
6

In a use case, the ___ is the person or external system that interacts with the system

// Use case components
const useCase = {
title: "Process Payment",
: "Customer", // who or what initiates the use case
preconditions: ["Cart is not empty", "User is logged in"],
mainFlow: ["1. Customer clicks checkout", "2. System displays payment form"],
exceptions: ["Payment declined — retry or cancel"],
};
7

Vibe coding describes using AI to generate code from ___ language descriptions rather than writing detailed specifications first

// Vibe coding workflow
const vibeCoding = {
approach: " language prompt",
example: "build me a todo app with dark mode",
strengths: ["Fast prototyping", "Low barrier to entry"],
weaknesses: ["Less predictable", "Hard to maintain at scale"],
};
8

EARS stands for Easy Approach to Requirements ___, a structured format for writing unambiguous software requirements

// EARS requirement templates

// Ubiquitous: "The system shall "

// Event-driven: "WHEN [trigger] THE system shall "

// Unwanted: "IF [condition] THEN the system shall "

// Example

const requirement = "WHEN a user submits the login form WITH valid credentials, THE system shall redirect to the dashboard within 500ms";

9

A steering file (like CLAUDE.md or .kiro/steering/) persists project ___ across AI coding sessions so the AI stays aligned with your codebase rules

// Steering file contents example

// .kiro/steering/tech.md

## Tech Stack

- Vite + React + TypeScript

- Tailwind CSS (utility classes only)

- Supabase for database and auth

## Rules

- Never use purple color

- Always use 8px spacing system

- Components max 200 lines

10

In SDD, the development workflow generates atomic task lists that AI agents execute one ___ at a time

// SDD task breakdown
const sddTasks = [
{ id: 1, type: "", description: "Create UserProfile component skeleton" },
{ id: 2, type: "", description: "Add profile form fields with validation" },
{ id: 3, type: "", description: "Wire up Supabase profile update mutation" },
{ id: 4, type: "test", description: "Write unit tests for profile validation" },
];