AI-Generated Frontend: How Much Do Design Constraints Matter?

3 hr ago0 views

This article compares two AI coding assistant outputs for the same online image-slicing tool—one generated without design constraints, one with a structured constraint set—and shows that both work functionally, while nearly the entire gap shows up in professional polish. It walks through requirement breakdown, side-by-side prompt design, and the key implementation details behind a reliable pixel-level tool (coordinate conversion, high-DPI canvas rendering, 3×3 neighborhood color picking, and annotation export). Readers get a reusable five-part prompt template, advice on turning constraints into a versioned project rule file, and notes on deploying the tool at zero cost.

Same requirement for an online image-slicing tool, handed to an AI coding assistant—how far apart can the two resulting interfaces really be? The short answer: both run and behave the same functionally, and almost the entire gap shows up in “professional polish.” In the unconstrained version, control sizes are uneven, colors are picked at random, and interaction feedback is missing. Once design constraints are added, the interface shows clear visual consistency. What actually drives the difference isn’t the tool itself, but whether the prompt translates the vague goal of “professional polish” into executable engineering constraints.

Below, using a five-part prompt as an example, we walk through the whole process from requirement breakdown to zero-cost launch.

1. Requirement breakdown: what does this tool actually need?

Functional scope. Draw the boundaries first to keep the model from “freely improvising”:

Image loading: support local file selection, drag-and-drop, and clipboard paste; the image is processed only in browser memory and never uploaded to a server;
View control: fit-to-window or show at original pixels, with a zoom range of 25%–800%;
Original-pixel grid: overlay a pixel grid at an adjustable step;
Pixel annotation: show the coordinate and color value under the cursor, with a magnifier for picking color;
Annotation export: region coordinates and dimensions, color palette, and a design manifest (JSON);
Image export: output any region as PNG or JPEG at 1x/2x/3x.

Technology choices. A single HTML file with inline CSS and vanilla JavaScript is enough to run—no build tools—so it’s easy to paste into any environment and deliver. The drawing layer uses the browser’s native Canvas interface, pixel reads use getImageData, and data conversion uses the File interface and the Blob API.

Hidden difficulties. These four details aren’t stated in the requirements, but the model has to handle them:

Coordinate conversion: the cursor position is in CSS pixels, while color picking uses original image pixels, so the two must be converted according to the current zoom level;
High-DPI rendering: when the Canvas drawing buffer (width/height) doesn’t match the CSS display size (style), lines and text turn blurry—you need to multiply by devicePixelRatio and normalize with ctx.scale;
Pixel color picking: anti-aliased edges blend colors, so you should take the most frequent color within a 3×3 neighborhood rather than a simple average;
Memory usage for large images: encoding an image as a Data URL consumes extra memory of roughly one-third of the original size, so you should use URL.createObjectURL and call URL.revokeObjectURL to free it when replacing or closing the image.

Acceptance criteria. Break “professional polish” into checkable items:

All colors, spacing, corner radii, and font sizes come from design tokens;
Hover, focus, disabled, loading, empty state, and error prompts are all covered;
On small screens, the sidebar collapses into a bottom panel;
Text-to-background contrast is at least 4.5:1 (per WCAG 2.0 Level AA), and core operations can be completed entirely by keyboard;
No console errors.

All of the above is exactly what “design constraints” means in the prompts that follow.

2. Two prompt versions: same requirement, two contexts

The shared part states the product positioning, user roles, feature list, and technical constraints, identical in both versions.

The unconstrained version ends with a single sentence: “The interface should be beautiful and professional, with a modern style.”

The constrained version adds four blocks on top of that:

Design tokens: define spacing, font sizes, corner radii, shadows, and colors centrally with CSS custom properties;
Layout principles: a three-column structure with a top toolbar, a canvas on the left, and an inspector on the right, switching to a stacked layout when the breakpoint is at or below 900px;
Component spec: buttons in three tiers (primary/secondary/icon) with a uniform height and corner radius; numbers in a monospace font and right-aligned, with input fields keeping the native number stepper;
Self-check list: the acceptance criteria above in text form, to be verified item by item before delivery.

Key code sample: design tokens

:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --radius-sm:4px; --radius-md:8px; --radius-pill:999px;
  --color-bg:#f5f7fa; --color-surface:#ffffff; --color-border:#e4e7ec;
  --color-text:#1f2329; --color-text-muted:#5a6270;
  --color-accent:#2457e6; --color-accent-hover:#1b47c2;
  --shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  --font-num:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* All components reference tokens only; hard-coded pixels and color values are forbidden */
.checker__readout{font:14px/20px var(--font-num);color:var(--color-text-muted);}
.btn--primary{height:32px;padding:0 var(--space-4);border-radius:var(--radius-sm);
  background:var(--color-accent);color:#fff;}
.btn--primary:hover{background:var(--color-accent-hover);}

Delivery format is specified as separate files (index.html, styles.css, app.js), with key functions commented and a self-check results table attached at the end.

This approach is essentially context engineering. Every rule in the prompt corresponds to a constraint on the model at generation time.

3. Key implementation: write the rules clearly in the prompt, and the code holds up to detail

Coordinate conversion and grid drawing. Conversion happens in two steps: first subtract the canvas’s page offset (getBoundingClientRect) from the pointer position, then convert to image coordinates by the zoom ratio, and finally round to the nearest integer.

function toImagePoint(e){
  const r = canvas.getBoundingClientRect();
  return {
    x: Math.round((e.clientX - r.left) / r.width  * img.naturalWidth),
    y: Math.round((e.clientY - r.top ) / r.height * img.naturalHeight)
  };
}
function render(){
  const dpr = window.devicePixelRatio || 1;
  if (canvas.width !== Math.round(img.naturalWidth * dpr)) {
    canvas.width  = Math.round(img.naturalWidth  * dpr);
    canvas.height = Math.round(img.naturalHeight * dpr);
  }
  ctx.setTransform(1, 0, 0, 1, 0, 0);          // Reset the transform each frame to avoid stacking scales
  ctx.scale(dpr, dpr);                         // From here on, draw using the image's original pixel coordinates
  ctx.drawImage(img, 0, 0);
  if (gridOn) drawGrid(ctx, img.naturalWidth, img.naturalHeight, step);
}
// Stroke a 1px solid line at integer + 0.5 coordinates to avoid
// the fuzziness caused by browser anti-aliasing on grid lines
function drawGrid(c, w, h, s){
  if (s < 4) return;                             // Skip automatically at very small zoom to prevent moiré
  c.save();
  c.lineWidth = 1;
  c.strokeStyle = 'rgba(15,23,42,.25)';
  c.beginPath();
  for (let x = 0.5; x <= w; x += s){ c.moveTo(x, 0); c.lineTo(x, h); }
  for (let y = 0.5; y <= h; y += s){ c.moveTo(0, y); c.lineTo(w, y); }
  c.stroke();
  c.restore();
}

Eyedropper color picking and region annotation. The magnifier reads the neighborhood of the cursor and takes the most frequent color as the picked result. During box selection, Shift+wheel adjusts the selection by 1 pixel to make pixel-level annotation truly controllable.

const modeCount = new Map();
function pickColor(x, y){                        // Mode of the 3×3 neighborhood
  const x0 = Math.min(Math.max(x - 1, 0), img.naturalWidth  - 3);
  const y0 = Math.min(Math.max(y - 1, 0), img.naturalHeight - 3);
  const d = ctx.getImageData(x0, y0, 3, 3).data;
  modeCount.clear();
  let best = 0, bestN = 0;
  for (let i = 0; i < d.length; i += 4){
    const key = ((d[i] << 16) | (d[i+1] << 8) | d[i+2]).toString(16).padStart(6, '0');
    const n = (modeCount.get(key) || 0) + 1;
    modeCount.set(key, n);
    if (n > bestN){ bestN = n; best = key; }
  }
  return '#' + best;
}
// Keyboard fine-tuning of the selection: Shift+wheel = 1px per notch, Ctrl+wheel = 10px per notch
canvas.addEventListener('wheel', e => {
  if (!sel || !e.shiftKey) return;
  e.preventDefault();
  const d = (e.ctrlKey ? 10 : 1) * (e.deltaY < 0 ? 1 : -1);
  if (e.altKey){ sel.x += d; sel.w -= d; }       // Alt: move left/right
  else         { sel.w  += 2 * d; }               // Default: change width symmetrically
  sel.w = Math.max(1, sel.w);
  requestRender();
}, { passive: false });

Annotation export. When exporting the manifest, coordinates and dimensions are taken from the drawing coordinates on the canvas without high-DPI scaling, so they equal the original image pixels directly. This convention must be nailed down in the prompt, otherwise the exported values get inexplicably inflated.

// annotations: { x, y, w, h }[] — uses the same coordinate system as drawImage
const manifest = {
  image: { name: file.name, width: img.naturalWidth, height: img.naturalHeight },
  palette: [...new Set(annotations.map(a => a.color))],   // Deduplicated color palette
  regions: annotations.map((a, i) => ({
    id: 'R' + String(i + 1).padStart(2, '0'),
    x: a.x, y: a.y, width: a.w, height: a.h, color: a.color,
    css: `width:${a.w}px;height:${a.h}px;`
  }))
};
// One-click download: Blob + a[download], entirely client-side, no server needed
function download(name, text, type = 'application/json'){
  const url = URL.createObjectURL(new Blob([text], { type }));
  const a = Object.assign(document.createElement('a'), { href: url, download: name });
  a.click();
  URL.revokeObjectURL(url);
}

Performance control. The grid, selection, and magnifier are all drawn on a single overlay canvas; the image layer is redrawn only on load, zoom, and pan. Mouse-move redraw requests are coalesced through requestAnimationFrame to keep dragging smooth.

4. The gap across six dimensions: from “runs” to “usable”

Dimension	Typical unconstrained behavior	Constrained behavior
Visual consistency	Uneven button sizes, spacing by feel, scattered color values	Everything references tokens; change one place, applies globally
Information hierarchy	Prominent numeric labels, primary action not emphasized	Readout is secondary, primary action is unique, labels clearly readable
Interaction feedback	No hover or disabled states; default states error out directly	All states present; empty canvas has guidance, errors have prompts
Accessibility	Insufficient gray-text contrast; custom controls unusable by keyboard	Meets contrast; native controls with focus rings; fully keyboard operable
Responsive	Sidebar squeezes the canvas on narrow screens	Auto-switches to a stacked layout on narrow screens
Engineering details	Coordinate conversion misses DPR, blurry grid, Data URL memory usage	Rigorous coordinate conversion, 0.5px alignment, grid adapts to the step

The “typical behavior” in the table comes from common issues in unconstrained output; it’s used to illustrate the direction of the difference, not as a fixed conclusion.

Two points are easy to overlook:

The gap isn’t the tool, it’s the constraint. In the CSS from the unconstrained version, the same shadow value is often written as four or five different numbers; the constrained version references tokens only. On the surface this is an aesthetic issue, but at its core it’s a missing spec—later maintenance and re-theming costs multiply.
Sample multiple times and look at the distribution. Repeated generations from the same prompt will vary, so look at the distribution rather than a single run. A single comparison is easily misled by chance; only by repeating the comparison across a new batch of requirements can the conclusion be trusted.

A reusable five-part prompt template

【1 Role & deliverable】You are a senior frontend engineer and interface designer. Deliver only
              directly runnable static code, with no backend dependency, no build tools, and no third-party libraries.
【2 Functional requirements】An online image-slicing tool for designers and frontend developers: drag/paste/select a
              local image, image never uploaded; fit-window / original pixels / 25%–800% zoom; adjustable-step pixel grid;
              real-time cursor coordinate and color readout, with a 3×3 neighborhood mode magnifier; box selection,
              Shift+wheel 1px, Ctrl+wheel 10px fine-tuning; export annotation manifest JSON (image info / deduplicated
              palette / per-region coordinates, size, and CSS snippet); export the selected region as PNG or JPEG at 1x/2x/3x.
【3 Design spec】Define all colors, spacing (multiples of 4), font sizes, corner radii, and shadows uniformly as CSS custom
              properties, and let components reference only variables; use a three-column layout, switching to a stacked
              layout at viewport ≤900px; buttons in three tiers (primary/secondary/icon), numeric values in a monospace font
              and right-aligned; hover/focus/disabled/empty-state/error prompts all present; text contrast ≥4.5:1;
              respect prefers-reduced-motion and disable motion animations.
【4 Engineering constraints】Deliver as separate files: index.html, styles.css, app.js; comment key functions;
              handle devicePixelRatio correctly; draw the grid on an overlay canvas, redraw the image only on load and view change;
              throttle mouse events with requestAnimationFrame; use createObjectURL for large images and revokeObjectURL on replacement or close.
【5 Self-check list】Verify each item before delivery: ① no hard-coded colors or spacing; ② all interaction states present;
              ③ narrow-screen layout works; ④ coordinates and sizes converted by original pixels; ⑤ no console errors.
              List the check results in a table, and explain the reason for any unmet item.

5. Distilling constraints into a project rule file

Design tokens and engineering conventions shouldn’t live only within a single conversation. A better approach is to write them into a rule file at the project root—for example AGENTS.md or a project documentation file—which the AI coding tool reads automatically before coding. Layered management further reduces maintenance cost:

Base layer: tokens that are common across projects, such as colors, fonts, spacing, and animation durations;
Project layer: the current project’s layout structure, component list, and naming conventions;
Task layer: constraints added only for a specific request.

Every spec change goes through code review, and the rule files themselves are placed under version control. This turns “professional polish” from a one-off prompt trick into a reusable, iterable engineering asset.

6. Zero-cost launch: making the tool truly usable

The premise of zero cost is that the application architecture can be kept as light as possible.

Core form. A static frontend plus static hosting on object storage, fronted by a content delivery network. With no database and no long-lived connections anywhere in the application, zero cost is entirely achievable within the free tier.

Optional function compute. If you want to load cross-origin images from a URL, you need a controlled image proxy inside a serverless function—adding the cross-origin response headers and restricting a domain allowlist. Otherwise the tool could be used as a jump point for bypassing cross-origin restrictions.

Code you can borrow directly. After hosting, you can add “paste screenshot” support to the canvas—a real must-have for the image-slicing use case:

// Listen for whole-page paste: after a screenshot, just Ctrl+V to load it, no need to save as a file first
window.addEventListener('paste', e => {
  const file = [...(e.clipboardData?.items || [])]
    .find(it => it.kind === 'file' && it.type.startsWith('image/'))
    ?.getAsFile();
  if (file) loadImage(file);
});

Cost boundaries. Free tiers generally have a validity period and usage limits, so “zero cost” rests on three conditions:

Keep first-screen assets within a few hundred KB, and enable long caching and compression;
The traffic users generate is mainly download traffic, not just page traffic;
Set budget alerts so you’re notified as soon as usage exceeds expectations.

Most major cloud providers offer general-purpose object storage, content delivery networks, serverless functions, and monitoring/alerting capabilities. For specific quotas and billing rules, refer to the official documentation.

7. Risk checklist and quality guidelines

Code hallucination: the model may “invent” APIs or parameters that don’t exist, so all code must be run and verified—you can’t just check whether the output “looks right”;
Image encoding pitfalls: JPEG has no alpha channel, so exporting a transparent region fills it with black—state clearly in the prompt to “fill transparent areas with white or use PNG”;
Privacy and compliance: local-only image processing is a privacy selling point and should be stated clearly in the interface; at the same time, avoid letting users paste a URL to bring in third-party images, which creates copyright risk;
No small feature: if a design tool can’t copy a color value with one click or can’t be fine-tuned by keyboard, users will leave. The unconstrained version often misses exactly these small features.

Conclusion

The comparison with and without design constraints shows that the ceiling of an AI coding assistant largely depends on the quality of the context. Only when design tokens, layout specs, interaction states, and a self-check list are spelled out can the model produce an interface that’s “ready to deliver.” Add a reasonable architecture and free-tier management on top, and even a small tool can be professional, usable, and launched at zero cost.