01 / Map
DESIGN.md
compact system map
resource index
on-demand links
A small index keeps the system discoverable without loading every detail.
Give your coding agent a complete interface system it can inspect.
DESIGN.md gives Codex, Claude, and other coding agents a compact map of the system. Its links return the full code-level reference only when needed, so the context window stays focused.
02 / Retrieve
foundations/typography
components/button
blocks/account-layout
A link returns the full code-level reference only when the current implementation needs it.
03 / Build
import { Button }
state: loading
layout: intrinsic
source: adapted
Inspectable context stays available while the agent writes and revises the code.
Long prompts explain the task. They do not preserve the system.
A long prompt can describe the feature. It cannot keep every interface decision nearby for the rest of the build. When context is flattened into one message, the agent has to rediscover or invent the system each time.
InterfaceKit uses progressive disclosure: a compact system map first, then full code-level references only when the agent requests them. The context window stays focused on the current task.
One prompt becomes noisy
Loading foundations, component rules, page structure, edge cases, and implementation notes at once wastes context on details the current task may not need.
Static references stop too early
A screenshot or brief can point at the outcome without exposing the states, responsive behavior, relationships, and source behind it.
Unlinked decisions get reinvented
When the system cannot be retrieved again, each new task gives the agent another chance to invent a different answer.
Small map. Full references on demand.
Add DESIGN.md to the coding workflow
Give Codex, Claude, or another coding agent one compact, portable map of the interface system.
Let the agent discover what is available
The file indexes foundations, components, blocks, flows, and code without loading every reference into context.
Retrieve the exact reference
The agent follows a focused link and receives the full Markdown and code-level detail needed for the current task.
Implement, review, and adapt
Use the retrieved decisions and inspectable source while keeping the final implementation under your control.
Structured enough to retrieve. Complete enough to build from.
The agent starts with a lightweight index, retrieves the focused source it needs just in time, and leaves unrelated detail outside the context window.
Foundations and tokens
Retrieve color, typography, spacing, borders, and layout decisions before composing the interface.
Components and variants
Inspect the building block together with its states, behavior, responsive rules, and authored examples.
Blocks and complete flows
Move beyond isolated primitives and understand how the system composes into real product surfaces.
Authored code and Markdown
Use readable resources and code you can inspect, reuse, and adapt inside the implementation.
Don’t ship another forgettable app.
Give your agent structured interface references from products that set the standard, then turn them into something unmistakably yours.