# How to Use the Web Design Engineer Skill in the Garden-Skills Repository

> Learn to use the Web Design Engineer skill from ConardLi/garden-skills to generate full web design projects from prompts. Discover this LLM powered tool today.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: how-to-guide
- Published: 2026-08-29

---

**The Web Design Engineer skill is a modular, data-driven component in the ConardLi/garden-skills repository that generates complete web design projects from high-level descriptions using LLM prompts and reusable style recipes.**

The Web Design Engineer skill enables automated generation of production-ready web designs through a structured, recipe-based approach within the garden-skills ecosystem. This self-contained module leverages curated design knowledge and configurable agents to transform brief text descriptions into complete HTML, CSS, and JavaScript projects without requiring manual coding.

## Understanding the Web Design Engineer Skill Architecture

The skill operates through a declarative architecture that separates configuration, prompting logic, and design knowledge. Located under `skills/web-design-engineer/`, the module requires no code modifications to extend its capabilities, relying entirely on data-driven configuration files.

### Core Configuration and Agent Setup

The **[`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json)** file serves as the skill's entry point, declaring the skill name, description, required agents, and default prompt templates. Instagit parses this file to register the skill at runtime. The LLM configuration resides in **[`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml)**, specifying model parameters such as `gpt-4o-mini`, temperature settings (typically 0.7), and token limits that govern generation behavior.

### Prompt Templates and Documentation

Human-readable instructions live in **[`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)**, which contains the core prompt template and step-by-step workflow instructions that guide the LLM during the design generation process. End-users reference **[`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md)** for quick-start instructions, required inputs, and invocation methods specific to their use case.

### Design Knowledge Base

The **`references/`** directory houses the skill's curated design intelligence. The **`style-recipes/`** subdirectory contains markdown files like [`vignelli-swiss-helvetica.md`](https://github.com/ConardLi/garden-skills/blob/main/vignelli-swiss-helvetica.md) and [`pastel-dream.md`](https://github.com/ConardLi/garden-skills/blob/main/pastel-dream.md) that codify specific visual languages and design systems. Additional calibration files such as **[`design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/design-calibration.md)** and **[`critique-guide.md`](https://github.com/ConardLi/garden-skills/blob/main/critique-guide.md)** provide structured guidelines ensuring consistent visual output and self-evaluation protocols for the LLM.

## How to Invoke the Web Design Engineer Skill

You can trigger the skill through multiple interfaces depending on your integration requirements and preferred programming environment.

### Using the Instagit JavaScript SDK

The recommended approach for production applications uses the Instagit SDK to programmatically generate designs with type-safe methods:

```javascript
import { Instagit } from '@instagit/sdk';

// Initialise the SDK (the token is stored in a .env file – see the repo README)
const client = new Instagit({ apiKey: process.env.INSTAGIT_API_KEY });

async function createLandingPage() {
  const response = await client.useSkill('web-design-engineer', {
    // The high‑level design brief
    prompt: 'Design a modern landing page for a AI‑powered analytics SaaS. Emphasise clean typography and a single‑column layout.',
    // Optional: force a particular style recipe
    style: 'vignelli-swiss-helvetica',
    // Optional: request a live preview URL
    preview: true,
  });

  console.log('Generated files are available at:', response.previewUrl);
}

createLandingPage();

```

### Making Direct HTTP API Calls

For server-to-server integration, testing, or non-JavaScript environments, use cURL to POST to the skill endpoint:

```bash
curl -X POST https://api.instagit.com/v1/skills/web-design-engineer \
     -H "Authorization: Bearer $INSTAGIT_TOKEN" \
     -H "Content-Type: application/json" \
     -d '{
           "prompt": "Create a responsive portfolio website for a photographer. Use a pastel‑dream aesthetic.",
           "style": "pastel-dream",
           "preview": true
         }'

```

The API returns a JSON response containing the generated file list and optional preview URL:

```json
{
  "files": ["index.html","style.css","script.js"],
  "previewUrl": "https://preview.instagit.com/abcd1234"
}

```

### Extending with Custom Style Recipes

Because the skill is **data-driven**, you can expand its design vocabulary without modifying source code. Create a new markdown file in `skills/web-design-engineer/references/style-recipes/` following the existing recipe format, then reference it by filename (without extension) in your API call:

```javascript
await client.useSkill('web-design-engineer', {
  prompt: 'Build a brand‑centric homepage for a boutique coffee shop.',
  style: 'my-brand-guide'
});

```

The LLM automatically ingests the new recipe because the skill loads all markdown files from the `style-recipes` directory at runtime.

## Step-by-Step Workflow

1. **Skill Registration**: Instagit loads the skill by parsing [`skills/web-design-engineer/manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/manifest.json) and registering the OpenAI agent defined in [`skills/web-design-engineer/agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/agents/openai.yaml).

2. **Brief Submission**: The user submits a design brief through the API, optionally specifying a style recipe from the `references/style-recipes/` directory.

3. **Prompt Composition**: The LLM receives a composite prompt incorporating the user brief, selected style guidelines, and calibration rules from [`design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/design-calibration.md) and [`critique-guide.md`](https://github.com/ConardLi/garden-skills/blob/main/critique-guide.md).

4. **Asset Generation**: The model generates a complete folder structure containing HTML, CSS, and JavaScript files, optionally including a [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) explaining design decisions.

5. **Delivery**: Instagit packages the output as downloadable files or exposes it via a temporary preview URL for immediate browser inspection.

## Summary

- The Web Design Engineer skill uses a **declarative architecture** where [`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json) and [`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml) control registration and LLM configuration.
- **Data-driven extensibility** allows adding new design languages by creating markdown files in `references/style-recipes/` without modifying source code.
- The skill can be invoked via the **Instagit JavaScript SDK** or direct **HTTP API calls** using standard Bearer token authentication.
- Core prompt logic resides in **[`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)**, while **[`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md)** provides end-user documentation and quick-start guidance.
- Output includes production-ready **HTML, CSS, and JavaScript files** with optional live preview URLs for immediate validation.

## Frequently Asked Questions

### What is the Web Design Engineer skill and how does it work?

The Web Design Engineer skill is a modular component in the ConardLi/garden-skills repository that automatically generates complete web design projects from text descriptions. It works by combining user prompts with curated style recipes stored in `references/style-recipes/` and guided by calibration documents, using the LLM configuration specified in [`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml) to produce HTML, CSS, and JavaScript outputs according to specified design systems.

### How do I add a custom style recipe to the Web Design Engineer skill?

Create a new markdown file in `skills/web-design-engineer/references/style-recipes/` describing your visual system, such as [`my-brand-guide.md`](https://github.com/ConardLi/garden-skills/blob/main/my-brand-guide.md). The skill automatically loads all markdown files from this directory at runtime, allowing you to reference your new recipe immediately by its filename in API calls without restarting the service or modifying any code.

### Which files control the LLM behavior in the Web Design Engineer skill?

LLM behavior is controlled by three primary files: [`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml) defines model settings including temperature and token limits; [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) contains the core prompt template and workflow instructions; and [`references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/references/design-calibration.md) provides structured guidelines that steer the LLM toward consistent visual language and quality standards during generation.

### Can I use the Web Design Engineer skill without the Instagit SDK?

Yes, you can interact with the skill directly via HTTP POST requests to the Instagit API endpoint `/v1/skills/web-design-engineer`. Authenticate using a Bearer token in the Authorization header and pass your design brief, optional style preferences from the `references/style-recipes/` directory, and preview flags as JSON in the request body.