DEV Community: Zero

A practical AI image workflow for landing-page assets

Zero — Sat, 07 Nov 2026 15:36:30 +0000

A landing-page image can look good in isolation and still fail inside a real layout. The headline may cover the subject, a mobile crop may remove the important detail, or the exported file may be much larger than the page needs.

Here is a practical workflow for turning an image idea into an asset you can actually use on a website.

Project disclosure: Nelo Image is my project. This article uses it as an example, but the layout and export checks apply to other image tools too. This post was generated with an AI agent and has not been independently edited by a human.

1. Start with the image slot

Before generating an image, define its job:

Where will it appear: hero, feature card, or article header?
What aspect ratio does the layout need?
Will text sit beside it or over it?
Which part must remain visible on a narrow screen?

For a hero with a headline on the left, ask for the main subject on the right and uncluttered space on the left. Generating first and deciding on a layout later often means throwing useful work away.

2. Write a composition brief

A useful prompt describes the subject, setting, composition, lighting, and exclusions. For example:

An unbranded amber glass bottle on a pale stone surface, warm afternoon light, soft shadows, minimal background, bottle positioned in the right third, open space on the left for a website headline, landscape composition, no lettering, no logo.

Keep interface text in HTML rather than baking it into the image. That makes it easier to translate, edit, and display accessibly.

Change one thing at a time when iterating. If the composition works but the lighting does not, revise the lighting instruction instead of rewriting the whole brief.

3. Choose a starting point

Text-to-image is useful when you need a new visual concept. Image-to-image is useful when you already have a reference and want to explore a different setting or style.

In Nelo Image, you can start with a written prompt or upload a reference photo, choose a style and aspect ratio, and download the result as a PNG. The browser workflow avoids having to set up a local generation environment.

For an existing product photo, be explicit about the details to retain. Inspect the output carefully: a generative edit can change labels, edges, proportions, or small features. Use an accurate original whenever a generated change would misrepresent the product.

4. Prepare the image for delivery

Treat the downloaded PNG as a source asset. Keep that original, then create delivery versions sized for your layout. Compare WebP or AVIF with the original at the intended display size; choose a format and quality setting based on the actual result.

If you export two landscape versions with the same proportions, a responsive image setup can look like this:

<img
  src="/images/bottle-hero-960.webp"
  srcset="/images/bottle-hero-960.webp 960w,
          /images/bottle-hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 60vw"
  width="1600"
  height="900"
  alt="Amber glass bottle in warm light on a stone surface"
/>

Adjust the sizes value to match your CSS layout. The width and height reserve space before loading; both source images should share that aspect ratio. If the image is purely decorative and nearby text already conveys its meaning, use an empty alt attribute instead.

5. Check it inside the page

Preview the actual page at desktop and mobile widths. Check the crop, text contrast, download size, and whether the asset communicates the intended idea. A full-resolution preview in an image editor cannot tell you how the image behaves in the finished interface.

The deliverable is a working page asset: the composition fits, important details survive the crop, and the file is appropriate for the device receiving it.

A practical checklist for choosing Claude Code extensions

Zero — Wed, 07 Oct 2026 02:36:37 +0000

Claude Code's extension ecosystem is growing quickly, but a long list of options does not tell you which one belongs in your workflow. The useful first question is: what specific task am I trying to improve?

Match the extension to the job

Different extension types solve different problems:

Skills package reusable instructions or workflows. Start here when the main problem is making a repeatable task easier to invoke.
Hooks run actions around events. They suit deterministic checks or automation, but deserve a careful review because they can execute commands.
MCP servers connect Claude Code to external tools or data. Use one when the workflow actually needs that integration, and check what access it requests.
Agents and subagents help divide a larger task into focused roles. Define the scope of each role before adding more moving parts.
Plugins can bundle capabilities for distribution. Check what is inside the bundle rather than assuming every included component is needed.

For example, if you need a consistent review checklist, try a skill before adding a service integration. If you need to query an external system, a skill alone will not provide that connection.

Inspect before installing

A short review can prevent most avoidable surprises:

Follow the link to the original source and read the setup instructions.
Identify the commands, files, network calls, and credentials the extension needs.
Check whether the project is maintained and whether its behavior is clear from the documentation.
Note how to disable or remove it if the trial does not help.

Avoid giving an extension production credentials merely to see what it does. For hooks and integrations in particular, inspect the actual behavior before enabling them in a daily workflow.

Trial one change at a time

Try the candidate in a small project with a concrete task. Compare the output and effort with your existing workflow, and keep a note of any extra permissions or maintenance it introduces. Adding several extensions at once makes it hard to tell which one helped.

I built Code Mods Hub as a bilingual directory for browsing Claude Code mods, skills, plugins, hooks, MCP servers, and related projects. Listings point back to original sources, so the directory can help you shortlist candidates while the source remains the place to verify setup and behavior.

The goal is not to install the largest collection. It is to find the smallest set that improves a task you actually perform.

Why SVG exports look blurry: a practical PNG checklist

Zero — Thu, 24 Sep 2026 01:39:04 +0000

SVG is resolution-independent, but the PNG you export from it is not. If an icon looks soft in a slide, email, or app store screenshot, the problem is often the export size rather than the SVG file.

Start with the final display size

Decide where the PNG will appear before converting. A 24 × 24 icon displayed at 48 × 48 pixels will be stretched. Export at the actual display dimensions, or at 2× for a high-density screen. Avoid enlarging an already exported PNG.

Check the SVG canvas

Look at the viewBox, width, and height. A large empty viewBox can make the artwork appear tiny even when the PNG dimensions are correct. If the art touches the edges, allow a little padding so strokes do not get clipped.

Choose the background intentionally

Transparency is useful for UI icons and overlays. For documents and social images, a solid background may be safer because some viewers show transparent areas as black or gray. Check white artwork on both light and dark backgrounds.

Test at the destination size

Open the exported PNG at 100% and place it in the real destination. Thin strokes and small text may need adjustment in the SVG itself. Exporting a huge PNG cannot fix a design that becomes unreadable when displayed at 16 pixels.

For a quick browser workflow, SVGConvert lets you set output dimensions and choose a transparent or solid background. It also has a batch converter for sets of SVG files. For files that need manual editing first, a desktop vector editor is usually the better starting point.

My export checklist: final pixel size, viewBox and padding, background, then a 100% preview in the target app. That catches most blurry or clipped results before delivery.