Output Spec

Output Spec is the final piece of a well structured prompt that spells out the precise technical requirements for whatever the AI spits out. It covers everything from pixel dimensions and file formats to code frameworks specific component variants state handling export settings and even naming conventions. This is the section that makes sure your output is not just conceptually correct but technically usable in the exact context you need it for. It functions exactly like the bottom of a freelancer brief where you list the delivery format the resolution the color mode and the folder structure. In the prompt engineering article this is the fifth critical part that prevents you from getting beautiful concepts in the wrong aspect ratio or code that uses Bootstrap when your project is on Tailwind. Without a strong output spec you will find yourself repeatedly telling the model to try again but this time make it square or this time use TypeScript. Nothing kills momentum faster than falling in love with an AI image only to realize it is the wrong size for your landing page hero.

What it is not is a repeat of the creative direction or a place to add last minute ideas that you forgot in the references section. It is not the spot for subjective requests like make it pop or give me options. Those produce nothing useful. Output Spec is not loose or interpretive. It uses numbers hex codes file names and exact tool references. It is not an excuse to write a novel. Keep it concise but complete. It is not something you add after the fact when the output is wrong. By then you have already burned tokens and time. Designers who consistently forget this part end up treating the AI like a bad intern who never reads the full brief and then wastes three hours fixing basic shit that should have been specified up front.

Here is a concrete example pulled from image work for a fintech client last month. The full prompt had a role for an editorial illustrator with ten years at Wired. Context was a hero for an article on financial transparency for Series B founders. Constraints banned every cliche from money bags to charts. References pointed to the bold color blocking of Paul Rand mixed with the editorial restraint of NYT graphics from 2018. Then came the output spec. Output Spec 1200 pixels by 630 pixels strict 2 to 1 ratio PNG format no text of any kind inside the raster transparent background for easy placement over gradients filename in kebab case hero transparency v3 dot png delivered at 72 DPI under 150kb file size. The output required zero edits and went live on the site the same day. The designer who used the vague version spent an afternoon in Photoshop fixing proportions on three different generations and still ended up with compression artifacts.

Another concrete example targets UI prototyping inside v0 for a dashboard project. The product mimics the clean interfaces Stripe debuted in their 2022 billing overhaul. After the role context constraints against gradients and references to Linear app spacing from their 2023 redesign the output spec read as follows. Output Spec production ready React code with TypeScript strict mode Tailwind CSS classes exclusively from our design system shadcn ui primitives only dark theme with background color zero eight zero four zero four accent f f six four three four fully responsive with mobile first approach and exact breakpoints at 640 768 and 1024 pixels include all hover focus disabled and loading states provide Storybook CSF file with controls for every prop and a separate utils file for any shared logic. The code integrated into the repo with only minor token swaps. The vague prompt had produced a mess of inline styles broken mobile views and missing focus rings that took four hours to repair.

For coding agents using Claude 3.5 the output spec makes or breaks the handoff. Asking for a complete card component with multiple variants the spec said Output Spec full TypeScript implementation based on our existing Button dot tsx file structure use Radix primitives for all interactive behavior support four states default hover active disabled respect all design tokens from our 2024 system update include comprehensive Jest tests achieving 95 percent coverage export Storybook stories demonstrating every combination file must be named Card dot tsx and live in the components surface folder with JSDoc comments on every prop. The component passed code review on first submission. Without this spec the AI delivered a basic div based card with hard coded colors no tests and spacing that ignored our four pixel scale.

One final concrete example covers asset generation for a cross platform campaign. The output spec was Output Spec generate assets in five sizes matching our media queries from the 2024 brand book SVG PNG and WebP formats for each with perfectly organized Figma style layer names following the pattern element state size color JSON index file that references every asset with suggested copy and SEO alt text all files zipped with folder structure matching our CDN conventions no raster artifacts on the vectors. This single addition replaced what used to be a two day manual export process with a one prompt deliverable that the entire marketing team could use immediately.

You use an output spec every single time the AI output has to fit into an existing pipeline without friction. That means client deliverables production codebases marketing asset libraries or any handoff to developers. You lean on it hardest when working with specialized tools like Cursor for code Lovable for apps or Midjourney for brand visuals. The more mature your design system becomes the more critical the output spec grows because it must reference your specific tokens your exact component API and your established patterns. Teams that copy paste a standard output spec block into every prompt report cutting their AI iteration time by more than half and stop treating the model like a flaky junior.

You do not use a heavy output spec during the earliest stages of exploration or when the goal is pure visual brainstorming. Heavy specs at that stage can limit the model too much and prevent happy accidents that spark new directions. You can skip most of it when showing rough concepts to your creative director or when using the AI to generate discussion starters rather than final deliverables. That said even in loose modes a light output spec such as all concepts in landscape orientation prevents apples to oranges comparisons. The guiding principle is this. If the output needs to be consumed by someone else or dropped into another tool use the output spec. If it is purely for your own eyes in the moment you have more flexibility.

Output Spec is what separates designers who fight with AI from designers who make it do exactly what they want on the first try.