Design Doc is a skill published by agensi that takes visual references, screenshots, and high-level brand goals and converts them into a rigorous design.md specification file. The output is intended to give AI coding agents a stable, enforceable design system document rather than letting them produce inconsistent or generic UI styles during frontend code generation.
The generated document covers four areas documented in the skill. Visual Principles encode enforceable rules such as Progressive Disclosure and Visual Information Density. System Definition captures hierarchical color roles, typography scales, and spacing rhythms. Component Behaviors specify rules for surface treatments, interactive state feedback (hover, active, disabled states), and motion logic. Anti-Patterns provide explicit instructions on what the agent must not do, preventing the introduction of generic filler styling.
The skill is positioned as a prerequisite step before moving into UX flow definition or multi-phase coding tasks. Instead of relying on shallow prompt instructions like “make it look like a SaaS product,” the skill extracts the underlying logic of a design language — including interface metaphor and grid behavior — so that every page or component generated afterward feels coherent with the rest of the product. It produces a single design.md artifact that downstream agents or coding tasks can reference throughout a project.