@appifex/design

@appifex/design

AI design generation with pluggable adapters for the DTC toolkit.

Usage

import { PencilAdapter } from '@appifex/design'
import { LocalRunner } from '@appifex/runner'

const runner = new LocalRunner(process.cwd())
const pencil = new PencilAdapter(runner, { cliKey: process.env.PENCIL_CLI_KEY! })

// Create a new design
const result = await pencil.create({
  prompt: 'Pet adoption app with browse, favorites, adoption form',
  outputPath: 'design.pen',
  exportPath: 'preview.png',
})

// Iterate on existing design
await pencil.iterate({
  inputPath: 'design.pen',
  outputPath: 'design.pen',
  prompt: 'Make cards 2-column grid with shadows, add heart icons',
})

Adapters

Adapter	Tool	Status
PencilAdapter	Pencil CLI	Implemented
StitchAdapter	Google Stitch	Implemented
FigmaMakeAdapter	Figma Make (MCP)	Implemented

Importing external design exports (zero-adapter path)

Any design tool that exports HTML + screenshots can feed the DTC pipeline without a dedicated adapter — export a zip, then pass it via dtc run --design path/to/export.zip. Supported out of the box:

• Google Stitch (generated by StitchAdapter, or exported manually)
• Figma Make — File → Export HTML
• Claude Design (Anthropic Labs) — Export → Standalone HTML files

The zip is unpacked via extractDesignZip into .design-import/; HTML + screenshots (+ optional design.md) are fed to extractSpecFromHtmlDesign to produce a normalized DesignSpec. From there the pipeline is identical to .pen inputs.