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

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 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, 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, 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 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 and pastel-dream.md that codify specific visual languages and design systems. Additional calibration files such as design-calibration.md and 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:

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:

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:

{
  "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:

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 and registering the OpenAI agent defined in 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 and critique-guide.md.

4. Asset Generation: The model generates a complete folder structure containing HTML, CSS, and JavaScript files, optionally including a 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 and 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, while 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 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. 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 defines model settings including temperature and token limits; SKILL.md contains the core prompt template and workflow instructions; and 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}