Design GenerationCAUTION

A framework for building agentic apps

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: design-generation
description: >-
  Generate or refine complete interactive HTML prototypes in Design. Use when
  creating screens, variants, Alpine/Tailwind prototypes, tweaks, or visual
  refinements from a prompt or selected design.
---

# Design Generation

How to generate complete, interactive HTML prototypes using Alpine.js + Tailwind CSS (via CDN). This is the core skill for the design agent.

## Technology Stack

Every generated design uses:
- **Tailwind CSS v4** — via `@tailwindcss/browser@4` CDN (NOT the old v3 CDN)
- **Alpine.js 3.x** — via `[email protected]` CDN with `defer` attribute
- **Google Fonts** — for distinctive typography (never Inter/Roboto/Arial)
- **CSS Custom Properties** — for theming and tweaks panel integration

## Why the workflow exists — it is the anti-slop engine

Generic output ("AI slop") is a *workflow* failure, not a lack of talent. When one
prompt has to set the taste, explore the options, and emit final code all at once,
the safest answer is the statistical average of the training data: Inter, an
indigo→violet gradient, a centered hero, three rounded icon cards. Design beats
this by splitting those jobs across the tools — use them in order, don't collapse
them:

1. **Direction** — `show-design-questions` (or a stated thesis) sets taste on purpose.
2. **Exploration** — `present-design-variants` compares genuinely different directions
   before committing to one. **This step kills sameness; never skip it for open-ended work.**
3. **Spec** — a linked design system and the `:root` token block capture the chosen look as reusable rules.
4. **Code** — `generate-design` / `edit-design` execute a decision already made instead of guessing.

Jumping straight to code is how you get slop. Let the phases (below) do the work.

## First decide the mode: reproduce or explore

The workflow above assumes an under-specified prompt. When the user has already
specified the design, that same workflow is the failure — exploration reads to
them as "the agent ignored everything I gave it".

Before Phase 1, check for **specification signals**:

- an attached screenshot, mockup, or photo of a UI,
- a linked design system / Brand Kit,
- a written outline naming concrete screens, sections, components, or copy,
- a named existing product/page to match, or pasted markup or tokens.

**Any one of these puts you in reproduce mode.** In reproduce mode:

- Do **not** call `present-design-variants`. Three divergent directions when the
  user handed you one is not exploration, it is discarding their work. Produce
  the one thing they specified.
- Do **not** call `show-design-questions` about anything the supplied material
  already answers. Ask only about a genuine gap, and prefer stating an
  assumption over asking.
- Every "Do" in the aesthetic quality bar below is **off** wherever it would
  contradict the supplied material. Those rules break ties in the absence of a
  spec; they never outvote one.
- Reproduce first, improve second. Match the structure, then raise quality
  *within* it, and say what you changed and why.

Mixed input is normal: reproduce what was given, use the quality bar only for
the parts genuinely left open. When a supplied reference and the linked design
system disagree, follow the design system for tokens (color, type, spacing,
radius) and the reference for layout and composition, then say you did.

### A reference screenshot is a specification, not a mood board

When the user attaches an image of a UI, read it as a layout spec and
reproduce it: the same regions in the same positions, the same navigation
pattern, the same information hierarchy and density, the same component
grammar (tabs vs. pills, cards vs. rows, sidebar vs. topbar), the same
approximate proportions. Name what you see before you build, so the user can
correct a misread early. Deviate only where the image is genuinely unreadable
or an explicit instruction overrides it — and say which, rather than
silently substituting your own composition.

An attached image is only guaranteed to be visible on the turn it arrived.
If a screenshot was described earlier in the thread but you cannot see one now,
say so and ask for a re-attach — never quietly design from the text alone.

## Authority and direction record

Before generating, make a compact direction record: the job this surface must
do, its audience, one-sentence visual thesis, the active design-system id or
token source, approved references, and any unresolved choice that could change
the result. This keeps a strong point of view without asking the model to fill
in the user's intent silently.

Resolve visual authority in this order:

1. The current-turn product, audience, content, accessibility, and explicit
   brand constraints.
2. The active Agent-Native design system and its registered tokens, components,
   type, imagery rules, and custom instructions.
3. Approved Creative Context assets, components, and examples.
4. Impeccable-inspired quality heuristics for hierarchy, subtraction,
   composition, contrast, motion, and bounded review.
5. Generic defaults only when the sources above are absent.

The active design system is a contract, not a mood board. Do not swap its
palette, fonts, component grammar, or imagery policy because a generic
anti-pattern list prefers something else. A user can explicitly request a
replacement or detachment; do not infer that request from a vague adjective.
References can guide composition and narrative, but they do not silently
transfer their tokens or brand identity.

When the source is a transcript, meeting note, or pasted brief, treat it as
evidence rather than a finished story. Preserve the user's terminology and
exact claims, separate facts from interpretation and visual references, and
ask one targeted question or mark an assumption when a missing choice would
change the design. Never smooth an evidence gap into confident copy.

## Aesthetic quality bar — beat distributional convergence

The rules in

CAUTIONgrade B · trust 89/100 Install with care. The audit found things worth knowing before you trust its output.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (5)

.agents/skills/an

.agents/skills/content-product-development

.agents/skills/design-exploration

.agents/skills/turn-into-app

.agents/skills/visual-edit

Gates applied: no_behavioural_pass.

[![ModelsAtlas audit: Design Generation](https://modelsatlas.com/skills/builderio/design-generation/badge.svg)](https://modelsatlas.com/skills/builderio/design-generation/)

Not your listing, or something out of date? Claim or update your listing.