design.dev

A UI prompt is a reusable instruction block that tells an AI coding agent what front-end component to build and how it should look, behave, and handle data. Use one when you want a repeatable component (a chart, a loading skeleton, a toast stack) rather than a one-off screen, and pair it with an agent config file so the output matches your project's tokens and conventions instead of the agent's defaults.

What a UI prompt actually contains

A UI prompt is not a vague request like "make a dashboard." It is a spec the agent can execute without guessing. The parts that matter:

• Component type — chart, table, modal, toast stack, skeleton screen. Name the exact element.
• Layout — where it sits, how it sizes, what wraps it.
• States — loading, empty, error, success, disabled. Agents skip these unless told.
• Data shape — the fields, types, and ranges the component must handle.
• Styling constraints — which tokens, framework, or utility classes to use.
• Accessibility — roles, labels, keyboard behavior, contrast requirements.

If a prompt omits states or data shape, the agent invents them, and you get a component that looks right in a demo and breaks on real input.

Anatomy of a UI prompt

A workable structure, in order:

1. Role and target — "Build a React component for…"
2. Component and scope — one component per prompt. Splitting beats one giant prompt.
3. Data contract — props, types, expected values.
4. Visual spec — layout, spacing, tokens, responsive behavior.
5. States — enumerate every one, including empty and error.
6. Accessibility — ARIA roles, focus order, contrast floor.
7. Constraints — what not to do (no inline styles, no new dependencies).

The last item is underused. Telling the agent what to avoid prevents it from pulling in a charting library you did not ask for.

Examples from the Design.dev prompt library

Design.dev's AI Prompt Library lists component prompts you can start from, including:

• UI Component Real-Time Data Chart — a chart that updates from a live data source, which forces you to specify the data contract and update cadence.
• UI Component Skeleton Loading Screen — a loading state, which only works if the prompt defines the shape of the content being loaded.
• UI Component Toast Notification Stack — a queue with stacking, dismissal, and timing behavior.

Each of these is a component with states and data, not a page. That is the pattern to copy: prompt for the component, let the agent compose pages from components.

Pair UI prompts with agent config files

A UI prompt describes one component. An agent config file describes the project the component lives in. Design.dev's AI Agent Config Generators produce several of these:

The division of labor: the config file carries tokens, conventions, and constraints that apply everywhere; the UI prompt carries the spec for the one component you are building now. Without the config file, every UI prompt has to restate your color scale and spacing, and the agent still drifts.

If you are unsure which config file to use, the choice depends on your agent: Cursor reads .mdc rules, Claude Code reads CLAUDE.md, Copilot reads copilot-instructions.md, and AGENTS.md is the cross-agent option.

Common failure modes

Agents ship predictable problems when prompts are thin:

• Low-contrast grays — the default palette agents reach for often fails contrast. Design.dev's Color Contrast Checker exists specifically to catch this.
• Missing states — no empty state, no error state, no loading state. The prompt has to name them.
• Unstyled defaults — the agent ships browser-default form controls and tables. Styling constraints in the prompt or tokens in the config file fix this.
• Features that do not ship — the agent writes CSS or JS that your target browsers do not support. Browser Feature Detection confirms what actually ships.
• Heavy generated images — agent-generated assets arrive uncompressed. The Image Optimizer compresses and converts them before they ship.

How to verify what the agent shipped

Do not trust the diff. Check the output against the prompt:

1. Contrast — run the shipped colors through a contrast checker, not your eyes.
2. Feature support — confirm the CSS and JS the agent used actually ships in your target browsers.
3. States — trigger loading, empty, error, and success manually.
4. Assets — compress and convert any generated images before they reach production.

Design.dev groups these under "Check What the Agent Shipped," which is the right mental model: the prompt is the input, verification is the other half of the loop.

A practical workflow

1. Write or generate your agent config file (DESIGN.md, AGENTS.md, or the file your agent reads) so tokens and rules are fixed.
2. Pick or write a UI prompt for one component, with data contract, states, and accessibility spelled out.
3. Run the agent and review the diff against the prompt, not against your hopes.
4. Verify contrast, feature support, states, and assets.
5. Save the prompt that worked. Reusable prompts are the point — the next component starts from a known-good spec.

Design.dev offers these generators and prompts as free tools, with a weekly newsletter (read by 9,000+ developers per the site) that includes a free pack of 300 icons. The site lists a subscribe option; check the current page for what any subscription includes rather than assuming terms.

AI coding agents are tools that take a goal, read your project, and write or change code across multiple files rather than just suggesting the next line. Developers direct them with config files and rules (AGENTS.md, CLAUDE.md, Cursor rules, SKILL.md), feed them UI prompts and style packs for consistent output, then verify what shipped with checks like color contrast, browser feature detection, and image optimization. This explainer covers that loop: how agents differ from chat-based suggestions, how to configure them, and what to check before their code lands.

How AI coding agents differ from chat-based code suggestions

A chat assistant answers a question and hands you a snippet. An agent acts on your repository: it reads files, decides which ones to change, and writes the result. The difference matters because agents make more decisions per request, and those decisions are where quality is won or lost.

The practical consequence: with an agent, the prompt is only half the job. The other half is the configuration that tells it how your project works, and the review that catches what it got wrong.

Directing agents with config files and rules

Agents behave better when they have explicit, persistent instructions instead of relying on whatever you type in a single session. Design.dev's AI Agent Config Generators cover the formats that matter, each aimed at a different tool or scope:

• AGENTS.md Generator — one config file intended for every coding agent, useful when your team uses more than one tool.
• CLAUDE.md Generator — project memory for Claude Code.
• Cursor Rules — scoped .mdc rules for the Cursor IDE, written to .cursor/rules/*.mdc.
• Copilot Instructions — repo-wide rules for GitHub Copilot, written to copilot-instructions.md.
• SKILL.md Generator — reusable skills for 27+ coding agents.
• DESIGN.md Generator — design tokens and rules agents can apply.
• MCP Config Generator — connects agents to tools and data via MCP, written to mcp.json.

What to put in a rules file

Rules files work best when they state constraints the agent cannot infer from the code alone. Typical contents:

1. Project conventions — framework, file layout, naming, where new components go.
2. Design tokens — colors, spacing, and type scale the agent must reuse instead of inventing values.
3. Boundaries — files or directories the agent should not touch.
4. Verification expectations — what the agent should check before declaring a task done.

The DESIGN.md and Design Tokens generators exist for the second item specifically: turning a brand or Figma source into CSS and Tailwind tokens (tokens.css) so an agent applies your palette rather than guessing one.

Why one file per tool is not always enough

If your team runs Cursor, Claude Code, and Copilot side by side, per-tool files (.cursor/rules/*.mdc, CLAUDE.md, copilot-instructions.md) keep each agent aligned with its own conventions, while AGENTS.md gives you a single shared baseline. The tradeoff is maintenance: more files means more places to update when conventions change.

Getting consistent UI output with prompts and style packs

Config files set the rules; prompts and style packs set the look. Design.dev's AI Prompt Library includes UI component prompts such as a real-time data chart, a skeleton loading screen, and a toast notification stack — starting points that describe a component well enough for an agent to build it.

Style Packs go further by fixing a visual direction across everything an agent produces. The examples on the site — Swiss Editorial, Brutalist Terminal, and Warm Print Magazine — each carry a point of view. The Swiss Editorial pack makes the argument bluntly: "A style that cannot survive a table is a costume." That is a useful test for any style you hand an agent. If the aesthetic collapses the moment real data appears, it will not hold up in production.

A workable sequence:

1. Pick a style pack or write your own tokens.
2. Generate the token file (CSS and Tailwind) from your brand or Figma source.
3. Reference those tokens in your rules file so the agent reuses them.
4. Use component prompts from the library as the starting request.
5. Review the output against the style pack's constraints, not just against "does it render."

Verifying what the agent shipped

Agents ship plausible code, not necessarily correct code. Design.dev groups its verification tools under "Check What the Agent Shipped," and each targets a failure mode that shows up repeatedly:

• Color Contrast Checker — catches the low-contrast grays agents ship by default. If your rules file does not pin accessible colors, agents tend to reach for mid-grays that fail contrast requirements.
• Browser Feature Detection — confirms the CSS and JS the agent used actually ships in the browsers you support. Agents sometimes reach for newer features than your audience can run.
• Image Optimizer — compresses and converts agent-generated images before they ship, since agents rarely optimize assets on their own.

A short verification checklist

• Run the contrast checker on any UI the agent produced, especially text on tinted backgrounds.
• Confirm each CSS or JS feature the agent used is supported where you need it.
• Optimize any images the agent added or generated.
• Diff the changes against your rules file: did the agent reuse tokens, or invent values?
• Check the files the agent was told not to touch.

Common failure modes when agents run without rules or review

The problems cluster around missing direction and missing checks:

• Invented design values. Without a tokens file, the agent picks its own colors and spacing, and the UI drifts from your system.
• Default low-contrast grays. A recurring, specific failure — the contrast checker exists because it happens often enough to be predictable.
• Unsupported features. The agent writes modern CSS or JS that does not ship everywhere your users are.
• Unoptimized assets. Images land at full size because nothing told the agent to compress them.
• Scope creep. Without boundaries in the rules file, the agent edits files it should have left alone.
• Style that breaks under data. A look that works for a hero section but not a data table, which is the test the Swiss Editorial pack names directly.

Each of these is cheaper to prevent with a rules file than to fix after review. The loop that works: configure the agent, prompt it within a defined style, then verify contrast, feature support, and assets before the code ships.

Design.dev's generators, prompt library, and verification tools are free to browse, and the site notes a weekly drop read by 9,000+ developers with a free 300-icon pack; the page shows a subscribe option, so treat ongoing updates as a subscription rather than an assumed free feed.

Agent rules are persistent instructions an AI coding agent reads before it generates or edits code — stack versions, folder conventions, design tokens, lint commands, and hard limits on what it must not touch. You write them once in a config file at a known path (for example AGENTS.md, CLAUDE.md, or .cursor/rules/*.mdc), and the agent applies them across every task in that scope instead of you re-explaining your conventions in each new chat. They are worth setting up as soon as you use an agent on a repo more than once; for a single throwaway snippet, a one-off prompt is faster.

How agent rules differ from prompts

A prompt is scoped to one request and disappears when the session ends. Rules live in the repo, so they survive across sessions, tools, and teammates.

The practical difference: with rules, "use our Tailwind token names and never edit globals.css by hand" is stated once and enforced on every generation. With prompts, you repeat it and the agent still drifts.

The common rule file formats and what each is for

Different agents read different files. Design.dev's generator set maps them directly:

• AGENTS.md — one config file intended for every coding agent. The broadest option; start here if your team mixes tools.
• CLAUDE.md — project memory for Claude Code.
• .cursor/rules/*.mdc — scoped rules for the Cursor IDE, where each .mdc file can target a path or pattern.
• copilot-instructions.md — repo-wide rules for GitHub Copilot.
• SKILL.md — reusable skills shared across 27+ coding agents, for capabilities you want to invoke rather than always-on conventions.
• DESIGN.md — design tokens and rules agents can apply, generated from brand assets or a Figma file.
• mcp.json — connects agents to tools and data via MCP, which is configuration rather than rules.

If you only maintain one file, AGENTS.md covers the most agents. If your team is standardized on a single tool, the tool-specific file gives you tighter scoping.

What to put in your rules

Keep each rule checkable — something you could verify by looking at the output.

• Stack and versions. Framework, language version, package manager. "React 19, TypeScript strict, pnpm" prevents an agent from reaching for an older API.
• Folder and naming conventions. Where components, hooks, and tests live, and the casing each uses.
• Design tokens. The token names and values the agent should reference instead of hardcoding colors and spacing. A DESIGN.md or generated tokens.css gives the agent something concrete to apply.
• Formatting and lint commands. The exact commands to run, so the agent can self-check before handing work back.
• Hard limits. Files or directories the agent must never modify, and dependencies it must not add without asking.

A short, specific rule beats a long, vague one. "Never edit globals.css; add tokens to tokens.css" is enforceable. "Write clean code" is not.

Scoping and precedence

Rules stack, and conflicts are the main failure mode. Order them so the most specific wins:

1. Repo-wide rules (AGENTS.md, copilot-instructions.md) — the baseline for every task.
2. Per-directory rules (.cursor/rules/*.mdc scoped to a path) — override the baseline inside that folder.
3. Per-task prompts — override everything for the current request only.

If two files disagree, the agent may follow either, so keep the baseline general and push specifics into scoped files. When you change a convention, update the file that owns it rather than adding a contradicting rule elsewhere.

Verify the agent actually followed the rules

Rules are only useful if the output matches them. After a generation, check the things agents most often get wrong:

• Color contrast. Agents ship low-contrast grays by default. A contrast checker catches them before review.
• Browser feature support. Confirm the CSS and JS the agent used actually ships in your target browsers.
• Images. Compress and convert agent-generated images before they land in the repo.
• Token usage. Grep the diff for hardcoded hex values or pixel spacing that should have been tokens.

If the agent ignored a rule, the usual cause is that the rule was ambiguous or buried. Move it to the top of the file, make it concrete, and re-run the task.

A starting workflow

1. Pick your file: AGENTS.md for mixed tools, or the tool-specific file if you've standardized.
2. Write the five sections above — stack, conventions, tokens, commands, limits.
3. Generate or hand-write a DESIGN.md / tokens.css so token rules have a source of truth.
4. Run one real task and check the output against the rules.
5. Tighten any rule the agent missed, then commit the file so the whole team benefits.

Design.dev offers free generators for each of these config files alongside the verification tools above, so you can produce a first draft and refine it against real output.

Web design is the planning of a website's layout, navigation, content structure, and visual style before and alongside development. It answers what goes where, how people move through it, and how it looks and feels — not just how it is coded. It applies whether you are commissioning a site, building one yourself, or hiring a studio such as Fuel180 Creative, a New Jersey multimedia development facility whose in-house services include design, internet site development, e-marketing, social media, interactive development, video production, animation, and presentation design.

Where web design sits among related disciplines

Web design overlaps with several fields but is not identical to any of them.

A designer may handle UX and branding tasks, and a developer may make design decisions during implementation. The distinction matters mainly for scoping: if you hire for "web design" only, confirm whether research, copywriting, and coding are included.

The core phases of a web design project

1. Discovery and goals

Define who the site serves, what visitors should do, and how success is measured. Outputs often include a written brief, competitor review, and success metrics such as inquiries, signups, or time on page.

2. Information architecture

Organize content into a hierarchy. The deliverable is usually a sitemap showing pages and their relationships, plus navigation labels. This is where you decide whether services, products, or resources get top-level placement.

3. Wireframes

Low-fidelity layouts that show structure without final visuals — where the headline, call to action, and supporting content sit on each page type. Wireframes are cheap to change, so review them carefully before visual design begins.

4. Visual design

Typography, color, imagery, spacing, and component styling are applied to the approved structure. A style guide or design system documents the rules so future pages stay consistent.

5. Handoff to development

The designer delivers mockups, assets, specifications, and interaction notes. Development then builds the site, and design review continues during implementation to catch issues that only appear in a browser.

Key decisions you will be asked to make

• Responsive layout — how the design adapts across phone, tablet, and desktop. Designing only for desktop is a common and costly pitfall.
• Typography and color — how many typefaces and colors, and whether they meet contrast requirements for readability.
• Accessibility — whether the design works for keyboard users, screen readers, and people with low vision. Retrofitting accessibility later is harder than designing for it.
• Performance trade-offs — large hero images, video backgrounds, and web fonts look impressive but add load time. Decide what is worth the cost.
• Content and conversion goals — the design should serve the content you actually have, not placeholder text that never gets replaced.

Typical deliverables and how to evaluate them

Common pitfalls

• Designing for desktop first and treating mobile as an afterthought.
• Skipping discovery, so the site reflects internal preferences rather than visitor needs.
• Ignoring content: a beautiful layout collapses when real headlines and product descriptions are longer than the mockup.
• Losing conversion focus — every page should make the next step clear.
• Treating design as finished at handoff, when many issues surface only during development.

If you are commissioning work, ask which phases are included, what deliverables you will receive, and who owns the files afterward. Those three answers prevent most misunderstandings before a project starts.

An AI agent config generator turns your project rules, design tokens, and tool connections into a config file that a coding agent reads before it writes code. The file you need depends on which agent you use: AGENTS.md for a single shared config across many agents, CLAUDE.md for Claude Code, .cursor/rules/*.mdc for Cursor, copilot-instructions.md for GitHub Copilot, SKILL.md for reusable skills, DESIGN.md for design tokens and rules, and mcp.json to connect an agent to external tools and data. If you use one agent, generate its native file; if you use several, generate AGENTS.md and keep agent-specific files only where behavior differs.

What an AI agent config generator actually solves

Coding agents start each session with no memory of your project. Without a config file, they guess at conventions, invent design values, and repeat mistakes you already corrected. A config generator produces a persistent instruction file the agent loads automatically, so your rules apply to every task instead of every prompt.

The generator's output is a plain text or structured file you commit to the repo. It typically contains three kinds of content:

• Project context — what the codebase is, its stack, and how it's organized.
• Rules — coding conventions, file scoping, and constraints the agent must follow.
• Design tokens — colors, spacing, and typography values so the agent stops inventing its own.

The main config file types and what each is for

AGENTS.md is the broadest option: one file for every coding agent. The agent-specific files exist because some tools read their own path first, and because you may want rules scoped differently — Cursor's .mdc format, for example, supports per-directory scoping that a single root file can't express.

How to choose between a shared config and agent-specific files

Start with the number of agents your team actually runs.

• One agent — generate that agent's native file (CLAUDE.md, copilot-instructions.md, or Cursor rules). No need for a shared layer.
• Two or more agents — generate AGENTS.md as the source of truth, then add an agent-specific file only for rules that agent handles differently.
• Path-scoped rules — use Cursor's .cursor/rules/*.mdc when different parts of the repo need different conventions.
• Reusable capabilities — use SKILL.md when the same skill should work across many agents.
• External tools and data — use mcp.json when the agent needs to call tools or read data beyond the repo.

A practical default: AGENTS.md for shared rules, DESIGN.md for design tokens, and mcp.json only if the agent needs tool access.

What to put in a generated config

The generator's value comes from what you feed it. Include:

• Design tokens — brand or Figma values converted to CSS and Tailwind tokens, so the agent applies your palette instead of default grays.
• Coding rules — naming, file structure, and constraints, scoped to the paths they apply to.
• Project context — stack, entry points, and what the agent should not touch.

Keep rules specific and checkable. "Use the tokens in tokens.css" is enforceable; "write clean code" is not.

Verify what the agent actually shipped

A config file directs the agent, but it doesn't guarantee the output. After the agent runs, check the result:

• Color contrast — catch the low-contrast grays agents ship by default.
• Browser feature detection — confirm the CSS and JS the agent used actually ships in target browsers.
• Image output — compress and convert agent-generated images before they ship.

These checks close the loop: the config sets the rules, and verification confirms the agent followed them.

Where to generate these files

Design.dev hosts free generators for each file type above — DESIGN.md, CLAUDE.md, Cursor rules, Copilot instructions, SKILL.md, AGENTS.md, and mcp.json — alongside a prompt library, style packs, and verification tools like a color contrast checker and browser feature detection. The site also offers a free 300-icon pack on subscribe; pricing for other resources isn't specified in the available material, so check the site directly before assuming access terms.