Context Engineering for Designers

This article explains that achieving satisfying UI design results with AI tools such as Claude requires more than entering a prompt. Design decisions and context must be supplied as documented data that the model can read.

1. Limitations of AI Models (LLMs 101)

• LLMs are closer to advanced autocomplete. Without prior context, they fill gaps through probabilistic next-token prediction and produce poor results.
• Design decisions and judgment criteria established by the team must be conveyed as context the AI can understand to close the remaining 80–20% gap in the desired result.

2. Documenting Design Decisions

• Most design decisions remain implicit knowledge or are made ad hoc during reviews rather than being properly documented.
• Because LLMs operate on readable language, design principles and interaction rules should be written in Markdown, while quantitative token values such as spacing, color, and typography should be organized in structured formats such as TOML, YAML, and JSON.

3. Structuring and Managing Context Files

• Context files should remain small and clearly separated so the AI does not lose the thread or make errors. Examples include `principles.md`, `card.md`, and `tokens.toml`.
• Principle: When a design decision appears at least twice, immediately extract it into a structured context document and maintain it there.

4. Improving One-Shot Design Quality

• When thoughtful metadata is provided, an AI agent can understand the intent and generate a strong UI result in a single pass without requiring a lengthy prompt.