Devcad / Field notes / AI workflow

The AI skills behind Devcad

Building a useful website is rarely one big task. It is a long chain of small decisions: what to say, who it is for, how it should feel, and whether someone can actually find their way through it.

AISkillsWeb designProductivityDevcad

I use AI to make the work lighter and faster—but the point of the work still starts with a human problem.

Why I needed a set of skills, not just a chatbot

A chatbot can help write a paragraph. It cannot, by itself, make a whole website feel coherent. The useful part comes from giving AI repeatable ways to think about the work: research first, structure the experience, write for a real reader, then check what was actually built.

That is what the skills behind Devcad do. Each one handles a different part of the journey from rough idea to a public page.

The skills I used

Web design engineeringTurning a visual direction into a responsive, usable interface.

This skill helped shape the page structure, spacing, typography, responsive behavior, and component details. It is the difference between “make it look nice” and checking whether the design still works on a narrow screen.

Beautiful article designMaking long-form reading feel intentional instead of crowded.

Articles need their own rhythm. This skill guided the reading width, headings, metadata, tags, emphasis, and the small visual pauses that make a technical idea easier to follow.

Information architectureDeciding what belongs on each page and how people move between pages.

It helped separate Blog, About Us, Community, Contact Us, the everyday article, and the technical guide. Good navigation reduces the amount of thinking a visitor has to do before they reach something useful.

Architecture diagramsShowing a system as a picture instead of a wall of explanation.

The workflow visual makes the relationship between Hermes, email tools, and the human approval step easier to understand. A diagram earns its place when it answers one question quickly.

Design tokens and visual consistencyKeeping colors, type, spacing, and interaction patterns consistent.

A lightweight site still benefits from a small design system. Reusing the same visual rules makes new pages faster to create and makes the site feel like one place rather than a collection of experiments.

Plain-language technical writingExplaining the useful idea before introducing the implementation.

The main article starts with the reader’s experience. The technical guide can then explain architecture, commands, safety boundaries, and rollout details for people who want to go deeper.

How the skills work together

Start with a real problem someone recognizes.
Use information architecture to give the idea a clear home.
Use writing skills to explain it without unnecessary jargon.
Use design engineering to make the page easy to scan and use.
Use diagrams and visual consistency to make the idea memorable.
Check the rendered result on desktop and mobile before publishing.

The part AI does not replace

AI can speed up drafts, comparisons, layouts, and repetitive checks. It does not decide what matters to the people the site is for. That is still the human part: choosing the problem, setting the boundary, reviewing the result, and deciding what is worth sharing.

Sources

[1] Web design engineer skill
[2] Beautiful article skill
[3] Information architecture skill
[4] Architecture diagram skill
[5] Design MD skill